You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using Chrome+JAWS, open URL: staging.new.expensify.com
Navigate to Settings > Workspace > Reimburse expenses.
Navigate to 'back (<)' and 'Connect bank account' controls using the screen reader.
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.
The text was updated successfully, but these errors were encountered:
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
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
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
Action Performed:
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:
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:
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
The text was updated successfully, but these errors were encountered: