The TOC should surface expanded status to screenreaders, similar to the checkbox hack implementation.
Developer notes
- Add aria-expanded to the button element, this should be updated automatically when the section is closed or opened
- Add aria-controls to the button element, which points to the ul element
- Add an id to the ul element to be used by aria-controls
- Add descriptive text to the button element, i.e. "Toggle {section name} subsection"
Currently SkinVector::getTemplateData() calls SkinVector::getTocData() (populated by inheritance in Skin::getTemplateData() which uses the new componentRegistry system i.e. SkinComponentTableOfContents).
Historically it seems we use SkinVector::decoratePortletsData() (which calls SkinVector::decoratePortletData() for each portlet) to add accessibility labels for data portlets. Presumably we do the same thing to add them to the new sticky TOC?
AC
When navigating the TOC with assistive technology:
- The arrow button should have a descriptive label
- The arrow button should read out the expanded/collapsed status of it's corresponding section
- The expanded/collapsed status should always be updated (i.e. after the button is clicked, or after a section is closed automatically)
QA Results - Beta|Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T303766#7849938 |
| 2 | ✅ | T303766#7849938 |
QA Results - Beta|Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T303766#7859434 |
| 2 | ✅ | T303766#7859434 |