Accessibility

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-comboboxevery web project6 rules82 tokens always loaded, 872 tokens when used, 1167 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
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`

Where fe-a11y-combobox lands for Claude Code

.claude/skills/fe-a11y-combobox/SKILL.mdskill
.claude/skills/fe-a11y-combobox/references/combobox.mdskill
.claude/rules/fe-a11y-combobox.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for OpenAI Codex

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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.

The real file

Where fe-a11y-combobox lands for Cursor

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.cursor/rules/fe-a11y-combobox.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for GitHub Copilot

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.github/instructions/fe-a11y-combobox.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for Gemini CLI

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .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 has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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.

The real file

Where fe-a11y-combobox lands for Antigravity CLI

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.agents/rules/fe-a11y-combobox.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for Devin / Windsurf

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
.devin/rules/fe-a11y-combobox.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .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.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for OpenCode

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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.

The real file

Where fe-a11y-combobox lands for Cline

.claude/skills/fe-a11y-combobox/SKILL.mdskill
.claude/skills/fe-a11y-combobox/references/combobox.mdskill
.clinerules/fe-a11y-combobox.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for Zed

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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.

The real file

Where fe-a11y-combobox lands for JetBrains Junie

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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.

The real file

Where fe-a11y-combobox lands for Kiro

.kiro/skills/fe-a11y-combobox/SKILL.mdskill
.kiro/skills/fe-a11y-combobox/references/combobox.mdskill
.kiro/steering/fe-a11y-combobox.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for Augment

.agents/skills/fe-a11y-combobox/SKILL.mdskill
.agents/skills/fe-a11y-combobox/references/combobox.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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.

The real file

Where fe-a11y-combobox lands for Trae

.trae/skills/fe-a11y-combobox/SKILL.mdskill
.trae/skills/fe-a11y-combobox/references/combobox.mdskill
.trae/rules/fe-a11y-combobox.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

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

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for Continue

.frontend-skills/skills/fe-a11y-combobox/SKILL.mdskill
.frontend-skills/skills/fe-a11y-combobox/references/combobox.mdskill
.continue/rules/fe-a11y-combobox.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.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>`.

The real file

Where fe-a11y-combobox lands for Amazon Q Developer

.frontend-skills/skills/fe-a11y-combobox/SKILL.mdskill
.frontend-skills/skills/fe-a11y-combobox/references/combobox.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .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 has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.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`.

The real file

Where fe-a11y-combobox lands for Aider

.frontend-skills/skills/fe-a11y-combobox/SKILL.mdskill
.frontend-skills/skills/fe-a11y-combobox/references/combobox.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

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`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

make this dropdown accessible

And to check and fix the work:

Use the fe-a11y-combobox skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/combobox-on-input and fix it here.

Rules it teaches

a11y/combobox-on-input
role="combobox" sits on the input itself (ARIA 1.2), not on a wrapper element that contains the input.
seriousstaticWCAG 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.
seriousstaticWCAG 4.1.2
a11y/option-no-interactive
Options in a listbox or combobox popup hold only text and images, never links, buttons or fields.
seriousstaticWCAG 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.
seriousmanualWCAG 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.
criticalstaticWCAG 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.
seriousmanualWCAG 4.1.3

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

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.

Steps the agent follows

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").

How the agent checks the work

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.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/combobox.md1167 tokens

SKILL.md on GitHub