Comfy-Org / Comfy-Org/ComfyUI_frontend

a11y: Add aria-expanded and aria-controls to ProductShowcaseSection accordion buttons

Open
#11,312 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.