[med] Chrome + Jaws: Role is not defined for Add Payment.

[Stutikuls]

Action Performed:

1. Using Chrome + Jaws, open URL staging.new.expensify.com
2. Navigate to Setting using Tab key and press Enter to select it.
3. Navigate to payments using Tab key and press using Enter to select it.
4. Navigate to Add payments page using Tab key and press Enter to activate it.
5. Observe the screen reader announcement.

Expected Result:

Role = "Button" should define for the Add payments control and screen reader should read like "Add Payments button".

Actual Result:

Screen reader is reading only "Add payments" not reading the role.

Other occurrences

Same issue repro on PR #8817, #8832, #9093
Same issue repro on PR #8493 -Role is not defined for change password,
Same issue repro on PR #8953, #8581, #8591, #8816, #8834, #8837, #8953 -Role is not defined for Request money and Next controls.
Same issue repro on PR #8856 -Role is not defined for Reimburse expenses.

Workaround:

Yes

Area issue was found in:

Payments Page

Failed WCAG checkpoints

4.1.2

User impact:

Screen reader user might be confused without knowing the role of the interactive element, so the user is not able to take any action over the control.

Suggested resolution:

Add the role="button" for the add payments control or implement the element as a native button, so that the role can be announced by screen reader. Refer to: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

Platform:

• Web
• Mobile Web

Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Stuti

7677_Role.is.not.defined.for.the.controls.mp4

[melvin-bot]

@Stutikuls, 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.