Screen Reader: Settings-About: The links are announced without a link role

[nbhardwaj-del]

Action Performed

Prerequisite:

• the user is logged in

1. Using JAWS + Chrome, open the page https://new.expensify.com/settings/about
2. Navigate using TAB to 'App download links', press enter to activate
3. On the side panel pop up menu, navigate using TAB to each of the download links (Android, iOS, macOS)
4. Observe the announcements

Expected Result

Each of the app download links should be announced with an lnk role.

Actual Result

When users navigate to the list of app download links, they are announced without the role of link, and only the visual text for each element.
-"Android"
-"iOS"
-"macOS"

HTML:

Android

Area issue was found

Settings-About

Failed Checkpoint

WCAG 4.1.2 Name, Role, Value
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value

User Impact

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

Suggested Resolution

Remove role="menuitem" and implement the controls as native elements with a valid href attribute.
https://www.w3.org/WAI/ARIA/apg/patterns/link/

Environment(s)

Windows Windows 10 - Chrome

Screenshots/Videos

Bug6995297_1762370355590.App_download_links_do_not_announce_role_of_link.mp4

Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6995297
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

📣 @nbhardwaj-del! 📣
Please report bugs or suggest features in the #expensify-open-source Slack channel, don't directly open issues in this repo!
Instructions here to join the channel 📖

[mallenexpensify]

Accessibility issue, will be addressed soon.

[mallenexpensify]

Accessibility, unassigning, will be addressed in bulk once all issues are created.