SC 412 -- FAQ disclosure inconsistent state communication

[damiansian]

URL

https://demo.fileyourstatetaxes.org/en/nj/landing-page

Issue

The screen reader announces Expanded/Collapsed inconsistently. When I open the control, it should announce "expanded". The current implementation does this, but only when I navigate away from it and come back to it. The W3C example announces the expanded and collapsed state each time I open and close the disclosure. The W3C example has all the JS and HTML you'd need to have this occur optimally.

Note

Your current implementation is sufficient for WCAG conformance. This change could take you to that platinum level though.

faq_disclosure.mov

WCAG

SC 4.1.2: Name, Role, Value (Level A)

User Impact

Screen reader users rely on state information to understand what the interactive control is doing at any given time and in relation to the commands they have made.

Suggested fix

Follow the guidance from the Aria Authoring Practices Guide:
https://codepen.io/dsian108/pen/LEPOBPR