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

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate and activate the '+ (New)' button.
3. Navigate to the 'New chat' button.
4. Navigate to the "John...", "Berna ...", "Lisbeth", etc. controls in the 'RECENTS' and 'CONTACTS' sections.
5. 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 "John...", "Berna ...", "Lisbeth", etc. controls in the 'RECENTS' and 'CONTACTS' sections 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 type of issue repro on PR #8039, #9213

Similar type of issue repro on PR #7702 for the list of currencies like AED-AED, AFN-AFN, etc.
Similar type of issue repro on PR #9534 for all the emojis

Workaround:

Yes

Area issue was found in:

New chat

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
• iOS
• Android
• 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.