Action Performed:
- Using Chrome+JAWS, open URL: staging.new.expensify.com
- Navigate and activate the '+ (New)' button.
- Navigate to the 'New chat' button.
- Navigate to the "John...", "Berna ...", "Lisbeth", etc. controls in the 'RECENTS' and 'CONTACTS' sections.
- 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
Action Performed:
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
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:
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