Dostępność

Keyboard access and focus

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

fe-a11y-keyboardkażdego projektu webowego9 regułładowane zawsze: 93 tokeny; przy użyciu: 1127 tokenów; w referencjach na żądanie: 1593 tokeny.

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-keyboard dla: Claude Code

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

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

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: OpenAI Codex

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.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-keyboard dla: Cursor

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

---
description: Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss
alwaysApply: false
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss"
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: Gemini CLI

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.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-keyboard dla: Antigravity CLI

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html, **/*.css, **/*.scss"
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

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

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

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

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: OpenCode

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.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-keyboard dla: Cline

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

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

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: Zed

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.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-keyboard dla: JetBrains Junie

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.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-keyboard dla: Kiro

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

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

# Keyboard access and focus (frontend-skills)

Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked "can I use this with a keyboard".

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: Augment

.agents/skills/fe-a11y-keyboard/SKILL.mdskill
.agents/skills/fe-a11y-keyboard/references/keyboard.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-keyboard dla: Trae

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

---
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html,**/*.css,**/*.scss
alwaysApply: false
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: Continue

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

---
name: "Keyboard access and focus"
description: "Makes every control work from the keyboard in any stack (HTML, React, Vue, Svelte, Angular, Astro) to WCAG 2.2 AA as a target - native controls, focus order, visible focus, focus not hidden by sticky bars, skip links, focus after route changes, no traps. Use when building interactive UI, custom widgets or a layout, removing an outline, or when asked \"can I use this with a keyboard\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html", "**/*.css", "**/*.scss"]
alwaysApply: false
---

# Keyboard access and focus (frontend-skills)

- Actions are `<button type="button">`, navigation is `<a href>`; never a click handler on a `div` or `span` (a11y/no-click-on-static).
- Never `<a>` without `href`, with `href="#"` or `javascript:` as a button (a11y/link-is-link).
- Never `tabindex` above 0; fix the order in the DOM, and keep CSS `order` and `*-reverse` from scrambling it (a11y/positive-tabindex).
- Never remove the outline without a visible `:focus-visible` style of at least 3:1 contrast (a11y/focus-visible).
- Sticky headers, footers and banners never cover the focused element: set `scroll-padding` (a11y/focus-not-obscured).
- Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
- Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
- After a client-side route change, move focus to the new heading or `<main>` (a11y/focus-route-change).
- Scrollable regions with nothing focusable inside get `tabindex="0"` and a name (a11y/scrollable-region-focusable).
- Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
- Act on `click`, not `mousedown` or `touchstart`; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

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

Prawdziwy plik

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

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

Prawdziwy plik

Gdzie trafia fe-a11y-keyboard dla: Aider

.frontend-skills/skills/fe-a11y-keyboard/SKILL.mdskill
.frontend-skills/skills/fe-a11y-keyboard/references/keyboard.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-keyboard` (Keyboard access and focus): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, `**/*.css`, `**/*.scss`, first read `.frontend-skills/skills/fe-a11y-keyboard/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):

can I use this with a keyboard

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

a11y/no-click-on-static
A click handler belongs on a button or link; a static element with one also needs a role, tabindex and a key handler.
poważnastatyczneWCAG 2.1.1, 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:.
poważnastatyczneWCAG 2.1.1, 4.1.2
a11y/positive-tabindex
No element has a tabindex greater than 0; focus order follows the source order.
poważnastatyczneWCAG 2.4.3
a11y/focus-visible
Never remove the focus outline without drawing a visible replacement for keyboard focus.
poważnastatyczneWCAG 2.4.7
a11y/focus-not-obscured
Sticky headers, footers, cookie banners and chat widgets never fully cover the element that has keyboard focus.
poważnaręczneWCAG 2.4.11
a11y/skip-link
Pages with repeated header or navigation start with a "Skip to main content" link whose target exists and takes focus.
umiarkowanaw przeglądarceWCAG 2.4.1
a11y/no-keyboard-trap
Keyboard focus can always leave a component with Tab, Shift+Tab or Escape; only an open modal keeps focus inside.
krytycznaręczneWCAG 2.1.2
a11y/focus-route-change
After a client-side route change, focus moves to the new page's heading or main region and the new title is announced.
umiarkowanaręczneWCAG 2.4.3, 4.1.3
a11y/scrollable-region-focusable
A scrolling region with no focusable content inside can itself take focus (tabindex="0") and has a name.
poważnaw przeglądarceWCAG 2.1.1

Skrót reguł

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

Actions are <button type="button">, navigation is <a href>; never a click handler on a div or span (a11y/no-click-on-static).
Never <a> without href, with href="#" or javascript: as a button (a11y/link-is-link).
Never tabindex above 0; fix the order in the DOM, and keep CSS order and *-reverse from scrambling it (a11y/positive-tabindex).
Never remove the outline without a visible :focus-visible style of at least 3:1 contrast (a11y/focus-visible).
Sticky headers, footers and banners never cover the focused element: set scroll-padding (a11y/focus-not-obscured).
Layouts with repeated navigation start with a working "Skip to main content" link (a11y/skip-link).
Focus can always leave a component with Tab or Escape; only an open modal traps it (a11y/no-keyboard-trap).
After a client-side route change, move focus to the new heading or <main> (a11y/focus-route-change).
Scrollable regions with nothing focusable inside get tabindex="0" and a name (a11y/scrollable-region-focusable).
Custom widgets (tabs, menus, listboxes) have one Tab stop and arrow keys inside, as the APG pattern says.
Act on click, not mousedown or touchstart; give drag interactions a click alternative (WCAG 2.5.2, 2.5.7).

Kroki, które wykonuje agent

Start from native elements: button, a href, input, select, details, dialog. They are focusable and handle Enter and Space for free.
For a custom widget, follow its APG pattern (fe-a11y-dialog, fe-a11y-menus, fe-a11y-tabs-accordion, fe-a11y-combobox): roving tabindex (0 on the current item, -1 on the rest) or aria-activedescendant.
Style focus once, globally: :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }; check it on every background.
Put the skip link and scroll-padding-top in the shared layout; read the sticky header height from one custom property.
When content appears after a trigger (a panel, an error summary, a deleted row's neighbour), insert it after the trigger in the DOM or move focus to it; never let focus fall to <body>.
In an SPA, use the router's announcer (Next.js, SvelteKit, Nuxt <NuxtRouteAnnouncer>) and focus the h1 after navigation.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed finds clickable divs, fake links, positive tabindex and removed outlines.
audit --url <page> adds axe-core results (skip link, scrollable regions).
By hand, for every change: unplug the mouse, Tab and Shift+Tab through the page; every control is reachable, visible when focused, works with Enter or Space, and Escape closes what it opened.

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/keyboard.md1593 tokeny

SKILL.md na GitHubie