Comfy-Org / Comfy-Org/ComfyUI_frontend
a11y: Add aria-expanded and aria-controls to ProductShowcaseSection accordion buttons
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The accordion buttons in `apps/website/src/components/home/ProductShowcaseSection.vue` toggle content visibility but are missing `aria-expanded` and `aria-controls` attributes. Screen readers cannot determine which feature is currently expanded or link the button to its controlled panel.
## Suggested Fix
For each accordion ``, add:
- `:aria-expanded="activeIndex === i"` — communicates open/closed state to screen readers
- `:aria-controls="`feature-panel-${i}`"` — links the button to its controlled content region
For each corresponding answer panel, add:
- `:id="`feature-panel-${i}`"` — matching ID for the `aria-controls` reference
- `role="region"` — marks the panel as a landmark region
## Context
Flagged as a non-blocking suggestion during review of PR #11273 (comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11273#discussion_r3090270816). Deferred to a follow-up PR to keep the current PR focused.
## References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11273
- File: `apps/website/src/components/home/ProductShowcaseSection.vue`
- Requested by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11312-a11y-Add-aria-expanded-and-aria-controls-to-ProductShowcaseSection-accordion-buttons-3446d73d365081cd971fed98fe59eef6) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.