[Masthead]: QA: Voiceover does not announce whether the profile pop up menu is expanded or collapsed #8869
Closed
1 of 2 tasks
Assignees
Labels
accessibility
Has accessibility requirement
bug
Something isn't working
dev
Needs some dev work
hacktoberfest
severity 3
Affects minor functionality, has a workaround
Comments
Gopi916
added
bug
kodiakhq bot
pushed a commit
that referenced
this issue
Oct 13, 2022
### Related Ticket(s) [Masthead]: QA: Voiceover does not announce whether the profile pop up menu is expanded or collapsed #8869 ### Description In mobile, VO doesn't tell user if the profile menu is expanded or collapsed - it currently identifies that it is a popup button when focus is on the button: "user profile popup-button menu-popup double tap to activate picker" however, this same is announced when the profile menu is expanded so it is not descriptive enough to alert user if the menu has been expanded or collapsed. In researching, it seems that VO will not announce the `aria-expanded` attribute if the button element also has the `aria-haspopup` attribute. Removing the `aria-haspopup` attribute allows for VO to properly announce if the menu is expanded or not. VO then reads: "user profile button expanded" BEFORE: https://user-images.githubusercontent.com/54281166/195444988-d18f97de-2bec-4aed-8873-bf0073a03d73.mov AFTER: https://user-images.githubusercontent.com/54281166/195445097-afefd854-800e-4d8a-bc54-e30f0e90b2a8.mov ### Changelog **Removed** - remove `aria-haspopup` attribute so that VO can alert user if profile menu is expanded/collapsed <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Page Element:
Profile pop up menu
Issue:
Voice over does not announce whether the mentioned menu is expanded or collapsed
Expected:
Use aria-expanded attribute and update its value according to the toggle behavior
User Impact:
When the name, role or state of an element is not conveyed appropriately, it prevents screen reader users to interact smoothly with the page element.
Component(s) impacted
Masthead all variants
Browser
Safari
Carbon for IBM.com version
v1.34.0-rc.0
Severity
Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.
Application/website
Carbon for IBM.com
Package
@carbon/ibmdotcom-web-components
CodeSandbox example
https://www.ibm.com/standards/carbon/web-components/?path=/story/
Steps to reproduce the issue (if applicable)
No response
Release date (if applicable)
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: