Accordion Accessibility Issue
- Dominant language
- JavaScript
- Stars
- 29.8k
- Forks
- 5.4k
- Avg merge
- 25m
- Merged PRs (30d)
- 1
Description
## What is missing?
**What is missing:**
The Foundation Accordion is getting flagged by our Accessibility Assessment scan. Finding is: "The trigger elements for the disclosure widgets (show/hide) are elements with a role="tab" attribute. The tab role is not appropriate for show/hide, especially in combination with the aria-expanded attribute. The trigger should either be a button, or have a role="button" attribute."
## What is wrong now ?
Currently, I can override with $('a.accordion-title').attr("role", "button"); in my JS and it seems to work, but this is not ideal.
...
## Possible Solution
*Solution**
Change the markup to use a `` rather than using an `` to trigger an accordion so that the accordion is truly in compliance with Accessibility standards, or change the .accordion-title from role=tab to role=button.
...
## Context
...
## Your Environment
- Foundation version(s) used:
- Browser(s) name and version(s):
- Device, Operating System and version:
## Checklist
- [ ] I have read and follow the CONTRIBUTING.md document.
- [ ] There are no other issues similar to this one.
- [ ] The issue title and template are correctly filled.
Contributor guide
Research direction
No source file or test is identified in the issue. Start by locating the Foundation Accordion markup and its JavaScript behavior, then verify the trigger semantics against the reported accessibility finding. Done means the accordion trigger uses an appropriate button or button role without requiring the reporter’s JavaScript override, and the accessibility scan no longer flags it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100