[High]: Chrome+Jaws : Screen reader: Role and label are not defined for "Start a call", "Pin", "Actions", "Emoji" and "Send" controls.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Workspace > More > Create a New Workspace and activate it.
3. Navigate to "Start a call", "Pin", "Actions", "Emoji" and "Send" 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 "Start a call", "Pin", "Actions", "Emoji" and "Send" controls. This made it difficult for screen reader users to access the functionality associated with it. Additionally, the label is not defined for the mentioned interactive element in the source code of the page.

HTML:
<div tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-1otgn73" style="height: 40px; margin-right: 0px; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M16.8 13c-1-1-2.1-1.4-3.4-.1-.1.1-.4.4-.5.6-1-.5-2.4-1.5-3.9-3-1.6-1.6-2.6-3.1-3.1-4 .1-.1.3-.3.5-.4 1.2-1.2.9-2.4-.1-3.4-.9-1-2.1-1.4-3.4-.1-.3.2-.4.5-.5.8-.8.9-1.1 2.5.2 5 .8 1.5 2.1 3.1 3.8 4.8 1.2 1.2 4.9 4.6 7.9 4.6.9 0 1.6-.2 2.2-.9.1-.1.2-.2.5-.4 1.1-1.3.8-2.5-.2-3.5z"></path></svg></div>

Other Occurrence

Same issue repro on PRs #8117, #8340, #8443, #8585, #8672, #8896, #8804, #9025, #9026, #9082, #9147, #9095, #9206, #9284, #9315, #9201, #8569, #9031, #9492, #9534

Workaround:

Yes

Area issue was found in:

All pages of the Expensify application were "Start a call", "Pin", "Actions", "Emoji", and "Send" controls appearing.

Failed WCAG checkpoints

4.1.2, 1.1.1

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 "Start a call", "Pin", "Actions", "Emoji" and "Send" controls.
• Provide aria-label value such as "Start a call", "Pin", "Actions", "Emoji" and "Send" for the 'div' element containing the "Start a call", "Pin", "Actions", "Emoji" and "Send" controls.

HTML:
<div role="button" aria-label="Start a call" tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-1otgn73" style="height: 40px; margin-right: 0px; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M16.8 13c-1-1-2.1-1.4-3.4-.1-.1.1-.4.4-.5.6-1-.5-2.4-1.5-3.9-3-1.6-1.6-2.6-3.1-3.1-4 .1-.1.3-.3.5-.4 1.2-1.2.9-2.4-.1-3.4-.9-1-2.1-1.4-3.4-.1-.3.2-.4.5-.5.8-.8.9-1.1 2.5.2 5 .8 1.5 2.1 3.1 3.8 4.8 1.2 1.2 4.9 4.6 7.9 4.6.9 0 1.6-.2 2.2-.9.1-.1.2-.2.5-.4 1.1-1.3.8-2.5-.2-3.5z"></path></svg></div>

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

[melvin-bot]

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