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

[med] : Many pages: Chrome + Jaws : Role, State & incorrect Name is defined for 'Checkbox'. #8555

Closed
Stutikuls opened this issue Apr 8, 2022 · 1 comment

Comments

@Stutikuls
Copy link

Stutikuls commented Apr 8, 2022

Action Performed:

  1. Using Chrome, open URL staging.new.expensify.com
  2. Navigate to Setting using Tab key and press Enter to select it.
  3. Navigate to any workspace using Tab key and press using Enter to select it.
  4. Navigate to Connect bank account using Tab key and press Enter on it.
  5. Navigate to connect manually control using Tab key and press Enter on it.
  6. Navigate to I accept check box using Tab key and press Enter on it.
  7. Observe the screen reader announcement.

Expected Result:

Valid Name, Role and State should be defined for 'Checkbox'. Screen reader should announce like "I accept...Checkbox checked/unchecked".

Actual Result:

Incorrect Name, Role and State is defined for 'Checkbox'. Screen reader announces "account number"

Note-
Screen reader is silent on iOS, MAC & Android.

Other Occurrence:

Same issue repro on PRs #8452, #7362, #8695, #8682, #8712#8758, #8826, #8845, #9093
Same issue repro on PRs #8581, #9055 -Role, State & incorrect Name is announced for profile picture.
Same issue repro on PRs #8739 -Role, State & incorrect Name is announced for download control.
Same issue repro on PRs #8733,#8957 -Role, State & incorrect Name is announced for close.
Same issue repro on PRs #8790, #8948 -Role, State & incorrect Name is announced for send.
Same issue repro on PR #9193

Workaround:

Yes

Area issue was found in:

Connect bank account

Failed WCAG checkpoints

4.1.2

User impact:

Without an accessible Name, Role and State, screen reader user will not be able to understand the purpose of the control.

Suggested resolution:

Make sure to define a valid Name, Role and State for the checkbox, so that the screen reader announces both the Name, Role and State of the button. Eg: Name: Terms of service, Role: Checkbox and State: Not Checked/Checked.

Refer to:
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Platform:

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

Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by: Stuti

7978_.Incorrect.name.and.role.and.state.is.not.defined.for.check.box.mp4
@melvin-bot
Copy link

melvin-bot bot commented Jun 24, 2022

@Stutikuls, 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 24, 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

1 participant