[High]: Chrome+JAWS: Screen reader: Role is not defined for controls. #8575

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Payments and activate the 'PayPal.me ...' control.
3. Navigate to the 'Ionatan Wiznia Fresco ...', 'Make default payment method', 'PayPal.me ...' and 'Delete' controls using the screen reader.
4. Observe the screen reader announcement.

Expected Result:

When a role is defined appropriately for the interactive element, the screen reader user will interact with the element effectively.

Actual Result:

Role is not defined for the 'Ionatan Wiznia Fresco ...', 'Make default payment method', 'PayPal.me ...' and 'Delete' controls. This made it difficult for screen reader users to access the functionality associated with it.

Other Occurrences:

Similar issue repro on PR #8173, #8832, #9118, #9207, #9210

Workaround:

Yes

Area issue was found in:

PayPal.me

Failed WCAG checkpoints

4.1.2

User impact:

Screen reader users will not be made aware that these elements are buttons.

Suggested resolution:

Ensure that all the page functionality is available for all users irrespective of the device being used.
Apply the following changes:

• Specify role="button" for the 'div' element containing the 'Ionatan Wiznia Fresco ...', 'Make default payment method', 'Paypal.me ...' and 'Delete' controls.

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Issue reported by: Sumit