[med] Chrome + Jaws: Role is not defined for Payment method controls. #8618

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Navigate to Setting using Tab key and press Enter to select it.
3. Navigate to payment using Tab key and press using Enter to select it.
4. Observe the screen reader announcement.

Expected Result:

Screen reader should read the role = button along with the name of the control.

Actual Result:

screen reader is only reading name of the control, role is not defined.

HTML:
<div tabindex="0" class="css-1dbjc4n r-1loqt21 r-18u37iz r-1otgn73 r-13qz1uu" style="border-radius: 0px; justify-content: space-between; padding: 12px 20px; -webkit-box-pack: justify;"><div class="css-1dbjc4n r-18u37iz r-633pao"><div class="css-1dbjc4n r-1awozwy r-1777fci" style="height: 40px; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M17.5 2.5h-15c-.7 0-1.3.5-1.3 1.3v2.5h17.5V3.8c.1-.8-.5-1.3-1.2-1.3zM1.2 15c0 .8.5 1.2 1.2 1.2h15c.8 0 1.2-.5 1.2-1.2V7.5H1.2V15z"></path></svg></div><div class="css-1dbjc4n r-1777fci" style="min-height: 40px;"><div dir="auto" class="css-901oao css-nfaoni" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; line-height: 20px; margin-left: 12px; max-width: 240px; text-align: left;">Ionatan Wiznia Fresco</div><div dir="auto" class="css-901oao" style="color: rgb(125, 139, 143); font-family: GTAmericaExp-Regular; font-size: 13px; margin-left: 12px; margin-top: 4px; text-align: left;">Card ending in 0004</div></div></div><div class="css-1dbjc4n r-18u37iz r-633pao" style="min-height: 40px;"></div></div>

Other occurrences

Same issue repro on PR #8817, #8832, #8877, #9207, #9312
Same issue repro on PR #8795, #8609 - Role is not defined for payment method, issue cards, reimburse expenses, pay bills, send invoices, book travel
Same issue repro on PR #8483, #8952 -Role is not defined for user profile.
Same issue repro on PR #8845, #8808, #8737, #8993, #8969 -Role is not defined for connect bank account and connect online with plaid.

Workaround:

Yes

Area issue was found in:

Payments

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 send 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
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: *v1.1.54-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by: Stuti