[Medium]: Chrome+Jaws : Missing list markup for controls.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Create new Workspace > Search for the created workspace > Details.
3. Navigate to "Members", "Settings", "Invite" and "Leave room" controls using the screen reader.
4. Observe the screen reader announce list markup.

Expected Result:

When list mark-up is provided for the mentioned content, screen reader users will identify a number of list items.

Actual Result:

The list mark-up is not used to present related information on the screen. For instance, the related information such as "Members", "Settings", "Invite" and "Leave room" controls are not marked as list items that visually look like a list. As a result, screen reader users might find it difficult to navigate to the lists and different list items quickly.

other occurrences:
Similar issue repro on PR #8065, #8103, #8476, #8499, #9118, #8878, #9202, #9213, #9472

Similar issue repro on PR #9472 for the list of email id

Workaround:

Yes

Area issue was found in:

Details

Failed WCAG checkpoints

1.3.1

User impact:

When lists do not use list markup, screen reader users will lose the semantic information the structure of the list provides visual users.

Suggested resolution:

Use appropriate list mark-up, such as 'li' and 'ul' to identify related information. In addition, if required apply styles to maintain the visual presentation of the web page.

Platform:

• Web
• Desktop App
• Mobile Web

Version Number: 1.1.49-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/tutorials/page-structure/content/
Issue reported by: Sumit

[melvin-bot]

@SumitDiyora, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.