[high] JAWS+Chrome: Licenses: The expandable sections are announced with no role or state

[ogumen]

Action Performed:

1. Using JAWS+Chrome, open https://staging.new.expensify.com/
2. Tab to focus the "licenses" link press Enter key.
3. Press down arrow key to focus the expandable state sections and listen to the announcements.

Expected Result:

The expandable elements should be announced along with their button role and collapsed/expanded state.

Actual Result:

The expandable elements are announced as headings, no interactive role or state is announced.

HTML:
<div class="toggle-title js_infoToggle"><h4>Alabama <span class="icon is-blue"><i class="expensicons expensicons-xs expensicons-caret-down"></i></span></h4></div>

Workaround:

No workaround

Area issue was found in:

Licenses page

Failed WCAG checkpoints

4.1.2

User impact:

The screen reader users are not informed about the functionality or current state of the controls.

Suggested resolution:

Implement the expandable sections using native <button> as suggested in issue 5181344. Use aria-expanded attribute on the buttons to announce their collapsed or expanded state accordingly. See: https://accessibility.huit.harvard.edu/technique-expandable-sections

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

Bug5181353_Dropdowns-Lincenses.mp4

View all open jobs on GitHub

[shawnborton]

Same comment: So the terms of service page is hosted on UseDot and it's technically not part of the NewDot app. @stitesExpensify @kadiealexander do you still think it's worth addressing these issues, or should we punt and focus on the app itself?