[Accessibility]: The element with role "button" contains descendants with roles "menu" which are ignored by browsers

makandre commented 1 year ago

Detailed description

Describe in detail the issue you're having.

After #2213 was fixed, new accessibility violations are exposed with the use of ibm-overflow-menu-option

Is this a feature request (new component, new icon), a bug, or a general issue?

Accessibility bug

Is this issue related to a specific component?

Overflow menu

What did you expect to happen? What happened instead? What would you like to see changed?

Expect to have no accessibility violations

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

"carbon-components-angular": "^4.59.17"

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM ADDI

Steps to reproduce the issue

Step one
Step two
Step three
etc.

Additional information

Screenshots or code
Notes

It's possible to workaround this problem using custom menu option instead of ibm-overflow-menu-option

<li class="bx--overflow-menu-options__option">
    <button class="bx--overflow-menu-options__btn">Option 1</button>
</li>

Akshat55 commented 1 year ago

@makandre Could you provide a codesand box with this error? Can't seem to reproduce this in storybook.

<ul> element should only have li elements or the custom element should have a role of listitem from my understanding. Additionally, the menuitem role on the button should be on the host, so that would be ibm-overflow-menu-option.

makandre commented 1 year ago

https://codesandbox.io/s/carbon-components-angular-forked-kvqhl7?file=/src/app/app.component.html

I can't seem to reproduce the same violation either, it has been replaced by this:

carbon-design-system / carbon-components-angular