ARIA attribute for expand/collapse FAQ display not functioning as expected

[kelynch]

Steps to recreate

Navigate through the FAQ section of the user profile page using a screenreader such as VoiceOver. Each FAQ entry will incorrectly be identified by the screenreader as "expanded."

Example:

URL

• User profile page

Issues

• FAQ entries are collapsed by default when the page loads, and expand/collapse when the user interacts with the arrow icon to the right of each entry. The aria-expanded attribute is hard-coded to "expanded" in our code base and needs to be changed.

Severity

• High

WCAG Success Criterion

• Success Criterion 2.4.1 Bypass Blocks
• Success Criterion 4.1.2 Name, Role, Value

WCAG Conformance level (A, AA, AAA)

• Level A

User impact

There is no indication to users of assistive technology (AT) that rely on aria-expanded attributes to signal when an FAQ entry is opened or closed by the user. According to the AT, all of the questions are regarded as "expanded" at all times even though this is not the case, and all FAQ entries start out closed by default on page load.

Recommended fix

The aria-expanded attribute on each FAQ should be set to "false" when the FAQ entry is closed and should be set to "true" when the FAQ entry is expanded/open.

Acceptance criteria

• [ ] I can successfully use this feature with Voice Over in Safari.
• [ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave

Notes

• Reported through the Digital Accessibility team
• Potential coding solution available here
• Practical Guide on Implementing ‘aria-expanded’ in Web Development

[carolyncole]

Hey team! Please add your planning poker estimate with Zenhub @hectorcorrea @JaymeeH @jrgriffiniii @kelynch @leefaisonr