Dostępność

Combobox, listbox and custom select

Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked "make this dropdown accessible".

fe-a11y-comboboxkażdego projektu webowego6 regułładowane zawsze: 82 tokeny; przy użyciu: 872 tokeny; w referencjach na żądanie: 1167 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

Agent	Rozpoznawany po
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Gdzie trafia fe-a11y-combobox dla: Claude Code

.claude/skills/fe-a11y-combobox/SKILL.mdskill
.claude/skills/fe-a11y-combobox/references/combobox.mdskill
.claude/rules/fe-a11y-combobox.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.claude/rules/fe-a11y-combobox.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Combobox, listbox and custom select (frontend-skills)

Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked "make this dropdown accessible".

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.claude/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: OpenAI Codex

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Cursor

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.cursor/rules/fe-a11y-combobox.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.cursor/rules/fe-a11y-combobox.mdc

---
description: Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked "make this dropdown accessible".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Combobox, listbox and custom select (frontend-skills)

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: GitHub Copilot

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.github/instructions/fe-a11y-combobox.instructions.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.github/instructions/fe-a11y-combobox.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked \"make this dropdown accessible\"."
---

# Combobox, listbox and custom select (frontend-skills)

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Gemini CLI

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Antigravity CLI

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.agents/rules/fe-a11y-combobox.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.agents/rules/fe-a11y-combobox.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked \"make this dropdown accessible\"."
---

# Combobox, listbox and custom select (frontend-skills)

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Devin / Windsurf

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.devin/rules/fe-a11y-combobox.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.devin/rules/fe-a11y-combobox.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Combobox, listbox and custom select (frontend-skills)

Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked "make this dropdown accessible".

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.agents/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: OpenCode

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Cline

.claude/skills/fe-a11y-combobox/SKILL.mdskill
.claude/skills/fe-a11y-combobox/references/combobox.mdskill
.clinerules/fe-a11y-combobox.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.clinerules/fe-a11y-combobox.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Combobox, listbox and custom select (frontend-skills)

Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked "make this dropdown accessible".

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.claude/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Zed

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: JetBrains Junie

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Kiro

.kiro/skills/fe-a11y-combobox/SKILL.mdskill
.kiro/skills/fe-a11y-combobox/references/combobox.mdskill
.kiro/steering/fe-a11y-combobox.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.kiro/steering/fe-a11y-combobox.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Combobox, listbox and custom select (frontend-skills)

Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked "make this dropdown accessible".

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.kiro/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Augment

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Trae

.trae/skills/fe-a11y-combobox/SKILL.mdskill
.trae/skills/fe-a11y-combobox/references/combobox.mdskill
.trae/rules/fe-a11y-combobox.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.trae/rules/fe-a11y-combobox.md

---
description: "Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked \"make this dropdown accessible\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Combobox, listbox and custom select (frontend-skills)

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.trae/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Continue

.frontend-skills/skills/fe-a11y-combobox/SKILL.mdskill
.frontend-skills/skills/fe-a11y-combobox/references/combobox.mdskill
.continue/rules/fe-a11y-combobox.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.continue/rules/fe-a11y-combobox.md

---
name: "Combobox, listbox and custom select"
description: "Builds autocomplete inputs, searchable selects, select-only comboboxes and listboxes that work with keyboard and screen readers (WAI-ARIA APG Combobox and Listbox patterns), after checking whether a native select or datalist is enough. Use when building a typeahead, search suggestions, a custom select, a tag or recipient picker, or when asked \"make this dropdown accessible\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Combobox, listbox and custom select (frontend-skills)

- Use a native `<select>` (or `<input list>` with `<datalist>`) unless filtering, rich options or async search are really needed.
- `role="combobox"` goes on the `<input>` itself, not on a wrapper (a11y/combobox-on-input).
- The combobox has `aria-expanded`, `aria-controls` pointing at the listbox, and `aria-autocomplete` (a11y/popup-button-expanded).
- Focus stays in the input; the highlighted option is `aria-activedescendant` with `aria-selected="true"` (a11y/combobox-keyboard).
- Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
- Options hold only text and images, never buttons or links (a11y/option-no-interactive).
- The input has a visible `<label>`; a placeholder is not a label (a11y/input-label).
- Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
- Options have unique ids, and the list does not close when the pointer moves over it.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-a11y-combobox/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Amazon Q Developer

.frontend-skills/skills/fe-a11y-combobox/SKILL.mdskill
.frontend-skills/skills/fe-a11y-combobox/references/combobox.mdskill
.amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-combobox` (Combobox, listbox and custom select): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-combobox/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-a11y-combobox dla: Aider

.frontend-skills/skills/fe-a11y-combobox/SKILL.mdskill
.frontend-skills/skills/fe-a11y-combobox/references/combobox.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-a11y-combobox` (Combobox, listbox and custom select): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-combobox/SKILL.md`.

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

make this dropdown accessible

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-a11y-combobox na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij a11y/combobox-on-input i popraw to tutaj.

Reguły, których uczy

a11y/combobox-on-input
role="combobox" sits on the input itself (ARIA 1.2), not on a wrapper element that contains the input.
poważnastatyczneWCAG 4.1.2
a11y/popup-button-expanded
A control that opens a popup (aria-haspopup or role="combobox") has aria-expanded that follows the open state.
poważnastatyczneWCAG 4.1.2
a11y/option-no-interactive
Options in a listbox or combobox popup hold only text and images, never links, buttons or fields.
poważnastatyczneWCAG 4.1.2
a11y/combobox-keyboard
A combobox keeps focus in the input, marks the highlighted option with aria-activedescendant and supports Down, Up, Enter and Escape.
poważnaręczneWCAG 2.1.1, 4.1.2
a11y/input-label
Every form field has a programmatic label (label element, aria-label or aria-labelledby); a placeholder is not a label.
krytycznastatyczneWCAG 1.3.1, 3.3.2, 4.1.2
a11y/status-message-live
Messages that appear without moving focus (saved, results, errors, progress) are announced through a live region.
poważnaręczneWCAG 4.1.3

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

Use a native <select> (or <input list> with <datalist>) unless filtering, rich options or async search are really needed.
role="combobox" goes on the <input> itself, not on a wrapper (a11y/combobox-on-input).
The combobox has aria-expanded, aria-controls pointing at the listbox, and aria-autocomplete (a11y/popup-button-expanded).
Focus stays in the input; the highlighted option is aria-activedescendant with aria-selected="true" (a11y/combobox-keyboard).
Down, Up, Enter, Escape and Alt+Down work as the APG pattern says (a11y/combobox-keyboard).
Options hold only text and images, never buttons or links (a11y/option-no-interactive).
The input has a visible <label>; a placeholder is not a label (a11y/input-label).
Announce the result count in a polite live region after typing pauses (a11y/status-message-live).
Options have unique ids, and the list does not close when the pointer moves over it.

Kroki, które wykonuje agent

Try the native element first: <select> (styleable with appearance: base-select in Chromium as an enhancement only), or <datalist> for simple suggestions.
Prefer a tested primitive from the project's library (React Aria ComboBox, Downshift, Radix Select, Reka UI Combobox, bits-ui Combobox, Angular CDK Listbox) over hand-written code.
When writing one: label + input (role="combobox") + ul role="listbox" with li role="option" id; one state object holds open, activeIndex, options.
Debounce async search, cancel stale requests, keep the highlight valid when results change, and announce "5 results" or "No results".
For multi-select with chips, keep chip remove buttons outside the listbox and give each a name ("Remove Anna").

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed finds wrapper comboboxes, comboboxes without aria-expanded, controls inside options and unlabeled inputs.
By hand: type, arrow through suggestions, accept with Enter, close with Escape; with a screen reader hear the label, "expanded", the highlighted option and the result count.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/combobox.md1167 tokenów

SKILL.md na GitHubie