Accessibility

Navigation, disclosures and menus

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

fe-a11y-menusevery web project5 rules89 tokens always loaded, 872 tokens when used, 1271 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-menus lands for Claude Code

.claude/skills/fe-a11y-menus/SKILL.mdskill
.claude/skills/fe-a11y-menus/references/menus.mdskill
.claude/rules/fe-a11y-menus.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-menus.md

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

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for OpenAI Codex

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus lands for Cursor

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.cursor/rules/fe-a11y-menus.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-menus.mdc

---
description: Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for GitHub Copilot

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.github/instructions/fe-a11y-menus.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-menus.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for Gemini CLI

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus lands for Antigravity CLI

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.agents/rules/fe-a11y-menus.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-menus.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for Devin / Windsurf

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.mdskill
.devin/rules/fe-a11y-menus.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-menus.md

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

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for OpenCode

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus lands for Cline

.claude/skills/fe-a11y-menus/SKILL.mdskill
.claude/skills/fe-a11y-menus/references/menus.mdskill
.clinerules/fe-a11y-menus.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-menus.md

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

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for Zed

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus lands for JetBrains Junie

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus lands for Kiro

.kiro/skills/fe-a11y-menus/SKILL.mdskill
.kiro/skills/fe-a11y-menus/references/menus.mdskill
.kiro/steering/fe-a11y-menus.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-menus.md

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

# Navigation, disclosures and menus (frontend-skills)

Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role="menu" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked "make this menu accessible".

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for Augment

.agents/skills/fe-a11y-menus/SKILL.mdskill
.agents/skills/fe-a11y-menus/references/menus.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-menus lands for Trae

.trae/skills/fe-a11y-menus/SKILL.mdskill
.trae/skills/fe-a11y-menus/references/menus.mdskill
.trae/rules/fe-a11y-menus.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-menus.md

---
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for Continue

.frontend-skills/skills/fe-a11y-menus/SKILL.mdskill
.frontend-skills/skills/fe-a11y-menus/references/menus.mdskill
.continue/rules/fe-a11y-menus.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-menus.md

---
name: "Navigation, disclosures and menus"
description: "Builds site navigation, dropdowns, disclosure menus and menu buttons that work with keyboard and screen readers (WAI-ARIA APG Disclosure and Menu Button patterns) - links in a nav, aria-expanded, aria-current, when role=\"menu\" is right and its keys. Use when building a header, mega menu, hamburger menu, dropdown, account or actions menu, or when asked \"make this menu accessible\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Navigation, disclosures and menus (frontend-skills)

- Site navigation is `<nav aria-label>` with a list of `<a href>`, not `role="menu"` or `menubar` (a11y/menu-not-for-site-nav).
- A control with `aria-haspopup`, and every combobox, has `aria-expanded` that follows the open state (a11y/popup-button-expanded).
- A show/hide trigger is a `<button>` with `aria-expanded`, and `aria-controls` for the panel (a11y/state-exposed).
- Navigation items are real links; a sub-list opens from a button, never from a link with `href="#"` (a11y/link-is-link).
- Mark the current page with `aria-current="page"`, not only with a colour.
- A `role="menu"` implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
- Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
- Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

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

The real file

Where fe-a11y-menus lands for Amazon Q Developer

.frontend-skills/skills/fe-a11y-menus/SKILL.mdskill
.frontend-skills/skills/fe-a11y-menus/references/menus.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-menus` (Navigation, disclosures and menus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-menus/SKILL.md`.

The real file

Where fe-a11y-menus lands for Aider

.frontend-skills/skills/fe-a11y-menus/SKILL.mdskill
.frontend-skills/skills/fe-a11y-menus/references/menus.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-menus` (Navigation, disclosures and menus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-a11y-menus/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:

menu
make this menu accessible

And to check and fix the work:

Use the fe-a11y-menus skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain a11y/menu-not-for-site-nav and fix it here.

Rules it teaches

a11y/menu-not-for-site-nav
Site navigation is a nav with a list of links and disclosure buttons, not role="menu" or role="menubar".
moderatestaticWCAG 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/menu-keyboard
Menus implement their keys - arrows move between items, Enter activates, Escape closes and returns focus to the button.
seriousmanualWCAG 2.1.1
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
seriousmanualWCAG 4.1.2
a11y/link-is-link
An <a> is a real link with an href; an action is a <button>, never <a> without href, href="#" or javascript:.
seriousstaticWCAG 2.1.1, 4.1.2

The rule digest

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

Site navigation is <nav aria-label> with a list of <a href>, not role="menu" or menubar (a11y/menu-not-for-site-nav).
A control with aria-haspopup, and every combobox, has aria-expanded that follows the open state (a11y/popup-button-expanded).
A show/hide trigger is a <button> with aria-expanded, and aria-controls for the panel (a11y/state-exposed).
Navigation items are real links; a sub-list opens from a button, never from a link with href="#" (a11y/link-is-link).
Mark the current page with aria-current="page", not only with a colour.
A role="menu" implements the APG keys: arrows, Home, End, Enter, Escape, type-ahead (a11y/menu-keyboard).
Escape closes an open menu or panel and focus goes back to its button; a click outside closes it too.
Never open a submenu on hover alone; hover may open it, but a click and the keyboard must too.

Steps the agent follows

Decide the pattern: links to pages → disclosure navigation; commands in an app (rename, delete, export) → menu button with role="menu"; one choice from a list → <select> or a listbox (fe-a11y-combobox).
For a hamburger on small screens, toggle the same <nav> with a <button aria-expanded aria-controls>; when it covers the page, render it in a <dialog> (fe-a11y-dialog).
For a menu button, use the project's UI library primitive (Radix DropdownMenu, React Aria Menu, Reka UI DropdownMenu, Angular CDK Menu) or follow the APG example closely.
Keep the open state in one variable and bind aria-expanded, the hidden attribute and the CSS class to it.
Use popover for the dropdown panel when it should close on outside click and Escape without extra code.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds role="menu" inside <nav>, popup triggers without aria-expanded, and fake links.
By hand: with the keyboard only, open and close every menu, reach every link, press Escape; with a screen reader, hear "expanded" and "collapsed" and "current page".

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/menus.md1271 tokens

SKILL.md on GitHub