Screen Reader: Many Pages: Non-interactive texts focused with Tab, have redundant semantics applied

[nbhardwaj-del]

Action Performed:

Prerequisite:

• User has an account and is logged in.

1. Using Windows Chrome + JAWS, open the page: [https://new.expensify.com/](https://new.expensify.com//)
2. Tab to focus the Workspaces tab and press enter to activate.
3. Select any workspace and press enter to activate.
4. Tab to the 'Expensify Card' button and press enter to activate.
5. Tab through the resulting content and note what receives focus and is announced.

Other Occurrences:

1. On Book Travel

Expected Result:

Only interactive elements should be focusable and assigned ARIA roles. Static text should not receive focus or use interactive semantics.

Actual Result:

Static text “Unlimited virtual cards”, "Cash back on every US purchase", and "Spend controls and custom limits", receives keyboard focus and is exposed as a menuitem role element with an aria-label. This implies interactivity even though the element does not respond to any action.

HTML:

<style>.simple-illustration__credit-cards_svg__st1{fill:#2140}.simple-illustration__credit-cards_svg__st2{fill:#e96df2}</style>

Unlimited virtual cards

Area issue was found in:

Workspace Expensify Card

Failed WCAG checkpoints

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 unnecessary interactive attributes such as tabindex="0", role="menuitem", and aria-label from non-interactive elements. If these are meant to be actionable, ensure they have a proper interactive role and corresponding functionality.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label

Environment(s)

Windows 10 - Chrome

Screenshots/Videos

Bug7000159_1762834167662.non-interactive-text-elements-tab-focusable.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/7000159
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[rushatgabhane]

done in #79232