Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[High]: Chrome+Jaws: Screen reader: Role are not defined for controls. #8401

Closed
SumitDiyora opened this issue Mar 31, 2022 · 1 comment
Closed

Comments

@SumitDiyora
Copy link

SumitDiyora commented Mar 31, 2022

Action Performed:

  1. Using Chrome+JAWS, open URL: staging.new.expensify.com
  2. Navigate to Settings > Workspace > Reimburse expenses.
  3. Navigate to 'back (<)' and 'Connect bank account' 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 "back (<)" and "Connect bank account" 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 r-1i6wzkk r-lrvibr" style="height: 40px; margin-right: 8px; transition-duration: 0s; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M10.8 18l-6.6-6.6c-.8-.8-.8-1.9 0-2.6l6.6-6.6c.2-.2.6-.2.9 0l.8.8c.2.2.2.6 0 .9L6.4 10l6.1 6.1c.2.2.2.6 0 .9l-.9.9c-.2.2-.6.2-.8.1z"></path></svg></div>

Other Occurrence:
Similar issue repro on PR #8253, #8832, #8831, #8980, #9046, #9138, #9118

Workaround:

Yes

Area issue was found in:

Reimburse expenses

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 "back (<)" and "Connect bank account" controls.
  • Provide aria-label value such as "back" for the 'div' element containing the "back (<)" control.

HTML:
<div role="button" aria-label="back" tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-1otgn73 r-1i6wzkk r-lrvibr" style="height: 40px; margin-right: 8px; transition-duration: 0s; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M10.8 18l-6.6-6.6c-.8-.8-.8-1.9 0-2.6l6.6-6.6c.2-.2.6-.2.9 0l.8.8c.2.2.2.6 0 .9L6.4 10l6.1 6.1c.2.2.2.6 0 .9l-.9.9c-.2.2-.6.2-.8.1z"></path></svg></div>

Platform:

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

Version Number: 1.1.49-0
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

#7931_Role and label not defined for back control

@SumitDiyora SumitDiyora changed the title [High]: Chrome+Jaws: Screen reader: Role and label are not defined for "back" control. [High]: Chrome+Jaws: Screen reader: Role are not defined for controls. Mar 31, 2022
@MelvinBot MelvinBot added the Monthly KSv2 label Apr 4, 2022
@SumitDiyora SumitDiyora changed the title [High]: Chrome+Jaws: Screen reader: Role are not defined for controls. [High]: Chrome+Jaws: Screen reader: Role and label are not defined for controls. Apr 8, 2022
@SumitDiyora SumitDiyora changed the title [High]: Chrome+Jaws: Screen reader: Role and label are not defined for controls. [High]: Chrome+Jaws: Screen reader: Role are not defined for controls. Apr 9, 2022
@melvin-bot melvin-bot bot added the Overdue label May 24, 2022
@melvin-bot
Copy link

melvin-bot bot commented Jun 17, 2022

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

@melvin-bot melvin-bot bot closed this as completed Jun 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants