Feedback accordion should indicate expanded/collapsed state

[alundgard]

Current behavior

The Feedback accordion does not indicate to screen readers when it is "collapsed" or "expanded".

Steps to reproduce

Example page: Martin Wong Catalogue Raisonné, or any other exhibit.

Use a screen reader (such as VoiceOver) to navigate the Feedback link in the page header. Clicking the link gives no indication that a feedback form expands and is available for interaction on the page.

Possible solution

WCAG Level A: Understanding Success Criterion 4.1.2: Name, Role, Value.

See the WAI Accordion Example.

Note: This issue is not specific to Spotlight. It also appears in Arclight Beta, Virtual Tribunals, and possibly other applications.

Note: Ongoing discussions with the design team (DLUX) suggest replacing the Feedback accordion with a modal, which would obviate the need to fix this issue. This is part of a broader effort to redesign DLSS application headers.

Reported by SODA

Violation: Ensure custom controls provide proper textual name, role, and state information
Severity: Major

[Issue]
The feedback link does not indicate that it opens an 'accordion' style portion of the screen, nor does it indicate the current state of open or closed.

[User Impact]
When controls do not provide name, role and/or state, screen reader users will not know their purpose and current state (if applicable).

[Recommendation]
Follow the WAI pattern for accordions. The control element should have aria-expanded and aria-controls set based on the state.

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

[jcoyne]

If we get to bootstrap 5, then we can use the feedback accordion in the component library: https://sul-dlss.github.io/component-library/header/.

[jcoyne]

Ref projectblacklight/spotlight#3379