[med] JAWS+Chrome: Many Pages: Multiple elements announced without button role

[ogumen]

Action Performed:

1. Using JAWS + Chrome, open the site https://staging.new.expensify.com/
2. Once you're on the landing page, provide an email and activate the button 'continue'.
3. Once the email verification page opens, press Tab key to focus the button 'not given email address?'.
4. Note how the element is announced.

Expected Result:

Since this is an interactive element, it should be announced with a button role.

Actual Result:

The element is announced without a button role.

HTML:
<div dir="auto" class="css-901oao" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 15px; line-height: 20px; margin-top: 12px; text-decoration-color: rgb(1, 133, 255);">Not&nbsp;[email protected]?</div>

Other Occurrences:

1. On New Chat modal the entries of recent contacts announced without a button role.
2. On Add payment method flow the "Add payment method" and "Add PayPal account" buttons do not announce their role.
3. On Landing page the "Continue" button is announced with no role.
4. On Profile overlay when trying to save the updated information, the "Save" button is announced with no role.

Workaround:

No workaround.

Area issue was found in:

Email verification page, New chat overlay, Add payment method flow, Landing page, Profile overlay

Failed WCAG checkpoints

4.1.2

User impact:

The screen reader users are not informed that these are interactive elements and are not aware of their functionality.

Suggested resolution:

Implement the mentioned elements as native buttons using tag. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:

Bug5179534_Element_not_announcing_button_role.mp4

Name.role.value.-.add.payment.method.-.payment.mp4

Name.role.value.-.add.paypal.account.-.payments.mp4

Name.role.value.-.continue.button.-.landing.page.mp4

Name.role.value.-.save.button.-.profile.mp4

Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

View all open jobs on GitHub