[Floating Menu] Focus wrap should work without having to put in extra elements

@asudoh @dakahn @snidersd

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Demos are deceiving because there is a visually hidden input that is not part of the “demo” code but this input is required in order to have the a11y focus wrap feature work. I understand that any “focusable” element following a floating menu would work and it does not have to be this specific input but we should not assume that of our users’ use-cases. Focus wrap should work without having to add in extra elements, especially if it’s something like this input which is visually hidden but is visible to screen reader users, making it really confusing as to why they are reaching a text input.

Is this issue related to a specific component?

Any component that uses Floating Menu

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

Focus wrap should work with the code provided on the website’s demo code. The focus wrap does not work if you copy and paste the code in to another system and even the Carbon code pen demo does not work as expected.

What browser are you working in?

Chrome, Safari, Firefox

What version of the Carbon Design System are you using?

v10.4.1

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

Watson Health Design Pattern & Asset Library; Release date coming up is end of Q3

Steps to reproduce the issue

1. Open the overflow menu and navigate to the last item in the list
2. press Tab
3. focus is moved outside of the menu and menu remains open

Please create a reduced test case in CodeSandbox

Doesn’t work as expected https://codepen.io/team/carbon/pen/PgNGop

Works once I add in extra incorrect element https://codepen.io/elizabethsjudd/pen/mNmZdR

[asudoh]

I did, but I’d say, don’t wait for assignment - Carbon is open source!

[elizabethsjudd]

I can definitely make the change to the hbs templates. Unfortunately, I don’t have time allocated to work on the react codebase at this time. We are trying to release our carbon 10 version of WH PAL and are blocked by these a11y updates to Carbon. My team has allowed me to work on the Carbon Vanilla work since this is blocking us from helping our users and moving forward with our projects especially since the Carbon core team has deprioritized most Carbon Vanilla work for the time being.