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

[makandre]

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

1. Step one
2. Step two
3. Step three
4. 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]

@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]

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: