A11y: expandable "Options" disclosure widgets not keyboard-accessible, don't expose role or state

[patrickhlauke]

Describe the Bug

Expand/collapse disclosure widgets (such as "Options" in the "Create new send", and "General"/"Display"/"Autofill" in Settings > Options) can't be used with a keyboard. It further doesn't expose any role, nor does it programmatically expose its state (whether the panel is expanded or collapsed).

<div class="box-header-expandable"> Options <!----><i class="fa fa-chevron-down fa-sm icon ng-star-inserted"></i> <!----> </div>

Steps To Reproduce

1. Go to one of the screens in the popup with a disclosure widget (such as "Create new send")
2. Try to reach the expand/collapse control with the keyboard to operate it
3. Using a screen reader, navigate through the screen (using reading keys/browse mode) and reach the control

Expected Result

• Disclosure wiget control can be focused using Tab, toggled with Enter or Space
• Screen reader announces it as a button, and announces whether the related panel is expanded or collapsed

Actual Result

• Disclosure widget trigger can't be focused/activated using keyboard
• Screen reader does not announce it as a button, or anything interactive at all, nor does it announce the state (expanded or collapsed) or the related panel

Screenshots or Videos

Environment

• Operating system: Windows 10
• Browser: Chrome 92
• Build Version (go to "Settings" → "About" in the app): 1.51.1

Additional Context

Ideally, the end result should look like this

<button class="box-header-expandable" aria-expanded="false"> Options <!----><i class="fa fa-chevron-down fa-sm icon ng-star-inserted"></i> <!----> </button>

with the aria-expanded either set to false (not expanded) or true (expanded) dynamically, to reflect the state of the panel.

see https://www.w3.org/TR/wai-aria-practices-1.2/#disclosure (recommend ignoring the optional aria-controls, as it has little/no actual assistive technology support)