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
Version Number:
**Reproducible in staging?:**Yes Reproducible in production?: Notes/Photos/Videos: Any additional supporting documentation Issue reported by:
Action Performed:
Prerequisite: the user is logged in.
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?
Version Number:
![Bug5184987_labels_-dropdown-_profile](https://user-images.githubusercontent.com/88733897/136041224-685f333e-d783-45b7-8528-5f8deccab826.png)
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
Bug5184987_labels_-_dropdown_-_profile.mp4
View all open jobs on GitHub
The text was updated successfully, but these errors were encountered: