search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.72k stars 1.79k forks source link

Overflow voiceover accessibility issue #7388

Closed andysherman2121 closed 1 year ago

andysherman2121 commented 3 years ago
When clicking the overflow menu there is no label for menu options. So the Voiceover on iPhone announces only as “menu item” and not what the item is ## Environment > Operating system iOS > Browser Safari and Chome > Assistive technology used to verify Voiceover on iPhone ## Detailed description > What did you expect to happen? Expecting for the voice over to read out the menu options for the overflow menu > What happened instead? It only reads out “menu item” instead of the actual description of what it is ## Steps to reproduce the issue 1. Step one Turn on the voice over feature on iPhone 2. Step two Click on the overflow component from carbon > Please create a reduced test case in CodeSandbox > - React: > https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/react/examples/codesandbox/components/Masthead ## Additional information - Screenshots or code - Notes
dakahn commented 3 years ago

@carbon-design-system/developers-system can somebody with an iPhone confirm this behavior?

tw15egan commented 3 years ago

Checking on my iPhone, I am hearing Dropdown label, button, list box pop up, collapsed, double-tap to expand

When I open the menu, I hear Option 1

So, unable to reproduce. If you can link to a CodeSandbox example that would be helpful, but the Dropdown in our storybook is working as expected 👍

https://youtu.be/heASeb5Q61c

andysherman2121 commented 3 years ago

@tw15egan Can you check the CodeSandbox example that I have in the original comment. When you cycle through the menu options, it reads out "menu item" instead of the actual content

tw15egan commented 3 years ago

It looks like it is coming from this is using the Masthead component from @carbon/ibmdotcom-react which I'm unfamiliar with. If this is consuming a Carbon component that is not working properly, can you reduce the test scenario to properly show which Carbon component may be causing this?

andysherman2121 commented 3 years ago

It looks like it is coming from this is using the Masthead component from @carbon/ibmdotcom-react which I'm unfamiliar with. If this is consuming a Carbon component that is not working properly, can you reduce the test scenario to properly show which Carbon component may be causing this?

Yup! will do. thanks @tw15egan

andysherman2121 commented 3 years ago

Hi @tw15egan the accessibility issue i’m seeing is actually coming from the Overflow menu not the dropdown component. Sorry for the confusion. Can you test the accessibility for that and let me know your results?

dakahn commented 3 years ago

@tw15egan mind checking Overflow to confirm 🏄🏽

tw15egan commented 3 years ago

@dakahn confirmed, voiceover only announces menu item when tapping an individual item in the Overflow Menu

tw15egan commented 1 year ago

I tested this again with the latest example on storybook, and iOS seems to be reading each menu item properly using iOS voiceover. Please let us know if there is another issue that needs to be fixed 👍🏻

KishorePosa commented 1 year ago

Still, am facing the issue in iphone. OverflowMenu options are reading as 'Menuitem', except the first focused option while voiceover is on.