Dostępność

Tabs and accordions

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

fe-a11y-tabs-accordionkażdego projektu webowego5 regułładowane zawsze: 79 tokenów; przy użyciu: 821 tokenów; w referencjach na żądanie: 1218 tokenów.

Instalacja

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

npx github:dawidolko/frontend-skills init

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

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

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

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

Gdzie trafia fe-a11y-tabs-accordion dla: Claude Code

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: OpenAI Codex

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

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

---
description: Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Gemini CLI

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

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Devin / Windsurf

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: OpenCode

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

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Zed

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

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

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

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

# Tabs and accordions (frontend-skills)

Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked "should this be tabs or an accordion".

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Augment

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

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

---
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Continue

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

---
name: "Tabs and accordions"
description: "Builds tabs, accordions and FAQ sections with the right roles, states and keyboard model (WAI-ARIA APG Tabs and Accordion patterns), preferring details and summary where they fit. Use when building tabs, segmented views, an accordion, collapsible sections or an FAQ in any stack, or when asked \"should this be tabs or an accordion\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Tabs and accordions (frontend-skills)

- Tabs use `tablist` > `tab`, each tab with `aria-selected` and `aria-controls`, each panel `tabpanel` with `aria-labelledby` (a11y/tabs-selected).
- A tab list is one Tab stop: roving `tabindex`, arrow keys, Home and End (a11y/tabs-keyboard).
- Accordion headers are `<button aria-expanded>` inside a heading, or `<summary>` in `<details>` (a11y/accordion-header).
- Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
- Headers and tabs are buttons, never clickable `div`s (a11y/no-click-on-static).
- Give a `tabpanel` `tabindex="0"` when its first content is not focusable.
- Use `<details name="group">` for a one-open-at-a-time accordion before writing script.
- Tabs that change the URL or load a page are links in a `<nav>`, not tabs.

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Amazon Q Developer

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

Prawdziwy plik

Gdzie trafia fe-a11y-tabs-accordion dla: Aider

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

should this be tabs or an accordion

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

a11y/tabs-selected
Every role="tab" carries aria-selected, true on the active tab and false on the others.
poważnastatyczneWCAG 4.1.2
a11y/tabs-keyboard
A tab list is one Tab stop; Left and Right Arrow (Up and Down when vertical), Home and End move between tabs.
poważnaręczneWCAG 2.1.1
a11y/accordion-header
Each accordion header is a button with aria-expanded inside a heading of the right level; or use details and summary.
umiarkowanaręczneWCAG 1.3.1, 4.1.2
a11y/state-exposed
Custom toggles, disclosures and selections expose their state (aria-expanded, aria-pressed, aria-checked, aria-selected).
poważnaręczneWCAG 4.1.2
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

Skrót reguł

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

Tabs use tablist > tab, each tab with aria-selected and aria-controls, each panel tabpanel with aria-labelledby (a11y/tabs-selected).
A tab list is one Tab stop: roving tabindex, arrow keys, Home and End (a11y/tabs-keyboard).
Accordion headers are <button aria-expanded> inside a heading, or <summary> in <details> (a11y/accordion-header).
Open and closed state is exposed, never only a CSS class (a11y/state-exposed).
Headers and tabs are buttons, never clickable divs (a11y/no-click-on-static).
Give a tabpanel tabindex="0" when its first content is not focusable.
Use <details name="group"> for a one-open-at-a-time accordion before writing script.
Tabs that change the URL or load a page are links in a <nav>, not tabs.

Kroki, które wykonuje agent

Choose: few short panels on wide screens → tabs; many or long sections, or small screens → accordion; navigation between pages → links with aria-current="page".
Use the UI library's primitive if the project has one (Radix Tabs, React Aria Tabs, Reka UI Tabs, Angular CDK or @angular/aria once stable); check that it renders the roles below.
Otherwise build tabs from buttons with role="tab"; keep the selected index in one state and derive aria-selected, tabindex and the visible panel from it.
Hide inactive panels with hidden (not only opacity), so they leave the Tab order and the accessibility tree.
For an FAQ, start with <details>/<summary>; style the marker with summary::marker or list-style: none.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed finds tabs without aria-selected and clickable div headers.
audit --url <page> adds axe-core's required parent and child role checks (a tab outside a tablist).
By hand: Tab reaches the tab list once, arrows move, Tab enters the panel; accordion headers toggle with Enter and Space and announce expanded or collapsed.

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/tabs-accordion.md1218 tokenów

SKILL.md na GitHubie