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] JAWS+Chrome: Profile: Dropdown "Preferred Pronouns" does not announce its label #5649

Closed
ogumen opened this issue Oct 5, 2021 · 0 comments

Comments

@ogumen
Copy link

ogumen commented Oct 5, 2021

Action Performed:

Prerequisite: the user is logged in.

  1. Using JAWS+Chrome, open https://staging.new.expensify.com/
  2. Navigate to Settings > Profile.
  3. Press Tab key to focus the "Preferred Pronouns" dropdown and select any option.
  4. Press Tab key to focus the dropdown again and listen to the announcement.

Expected Result:

The element should announce its label along with the selected option.

Actual Result:

Only the currently selected option is announced, while the visible label "Preferred Pronouns" is not announced.

HTML:
<div class="css-1dbjc4n r-1777fci" style="background-color: rgb(255, 255, 255); border-color: rgb(236, 236, 236); border-radius: 8px; border-width: 1px;"><div dir="auto" class="css-901oao r-u8s1d" style="color: rgb(125, 139, 143); font-family: GTAmericaExp-Regular; font-size: 13px; left: 12px; top: 8px;">Preferred Pronouns</div><div class="css-1dbjc4n r-1pz39u2"><select class="r-1niwhzg r-1loqt21" data-testid="web_picker" style="appearance: none; border: none; border-radius: 8px; color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; height: 52px; padding: 24px 12px 8px;"><option value="" label="Select your pronouns">Select your pronouns</option><option value="He/him" label="He/him">He/him</option><option value="She/her" label="She/her">She/her</option><option value="They/them" label="They/them">They/them</option><option value="Ze/hir" label="Ze/hir">Ze/hir</option><option value="Self-select" label="Self-select">Self-select</option><option value="Call me by my name" label="Call me by my name">Call me by my name</option></select><div class="css-1dbjc4n r-u8s1d" data-testid="icon_container" style="right: 12px; top: 16px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="..."></path></svg></div></div></div>

Workaround:

No workaround

Area issue was found in:

Profile overlay

Failed WCAG checkpoints

4.1.2

User impact:

The screen reader user might not understand the purpose of button if its label does not announce.

Suggested resolution:

Use the aria-labelledby attribute to announce the visible label once the dropdown is focused.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

Platform:

Where is this issue occurring?

  • Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
Bug5184987_labels_-dropdown-_profile

Bug5184987_labels_-_dropdown_-_profile.mp4

View all open jobs on GitHub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants