Accordion - heading structure
- Dominant language
- JavaScript
- Stars
- 29.8k
- Forks
- 5.4k
- Avg merge
- 25m
- Merged PRs (30d)
- 1
Description
## What is missing?
Heading structure applied to accordion items for readability.
## What is wrong now ?
Currently no heading structure applied, screen reader lists this out as an item.
## Possible Solution
If an accordion sits underneath a H1 item, all accordion headings to be H2 (then content within this to start from H3). If an accordion sits underneath a H2 item, all accordion headings to be H3 etc.
So for example
H1 (Heading - page heading)
H2 (Accordion item - added automatically when adding accordion, content editors do not need to update)
H3 (Heading within accordion content - added by content editor)
or
H1 (Heading - page heading)
H2 (Sub heading - added in page by content editor)
H3 (Accordion item - added automatically when adding accordion, content editors do not need to update)
H4 (Heading within accordion content - added by content editor)
## Context
To provide a structure of content within the page using accordions
## Your Environment
- Foundation version(s) used: 6.7.4
- 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 file, test, or entry point is named in the issue. Start by locating the accordion implementation and any existing accessibility tests, then verify how heading levels are determined in nested page content. Done means accordion items expose the requested semantic heading hierarchy and the behavior is covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100