Disclosure widget accessibility issues

[aardrian]

Using the Accessibility page from the latest (2023) survey, the disclosure widgets under Accessibility Pain Points have a few problems.

1. They do not have an aria-expanded attribute to programmatically convey their state.
2. Their accessible name changes when activated.
3. Their focus styles do not match their hover styles (definitely in Firefox).

For item 1, I encourage you to use aria-expanded with true when expanded and false when collapsed. This will convey to screen reader users whether new content has been exposed or not. If you are unfamiliar with how disclosure widgets are exposed to screen readers, I have a video using JAWS / Chrome showing it in action.

For item 2, the accName changes from "+7" (or similar) to "-" (announced "hyphen" or "dash"). This change may not be communicated, or it may be communicated and then a voice user has an extra challenge while a screen reader user may not understand the context.

For item 3, I don't see a :hover selector, and so I am worried this is managed by JS. In Firefox, the only visual cue is the default browser focus indicator, which passes WCAG (on a technicality) but is essentially useless as a visual cue. There is no reason to leave Firefox and keyboard users in particular with an inadequate interface, particularly if this is the simple CSS fix I expect it would be.