Carbon: Hidden menu items in banner should not take focus

[carmacleod]

Please see Bluemix #6571 for background.

Steps (I am using Chrome on Windows, but this probably happens in all browsers on all platforms):

1. Go to any IBM Cloud page that has a banner. For example, this dashboard page.

1. Important: Refresh the page (F5 or ctrl+r on Windows, cmd+r on Mac).

2. Starting with focus in the URL address bar (ctrl+L on Windows, cmd+L on Mac), type the tab key through the following elements: Skip to Content, Menu, IBM Cloud, Catalog, Docs, Support.

3. Now type the tab key several more times. Where is the focus? It is going through the invisible menu items in the Support menu.

4. After typing 6 "invisible" tabs, you will see focus finally go to the Manage menu. It takes 5 more "invisible" tabs to finally get to the Search field.

Expected: Typing tab always gives focus to visible elements.

The fix is to give tabindex="-1" to all hidden menu item anchors, even right after the page is refreshed, as in the following screen snapshot:

[alisonjoseph]

Hi, what component is this issue referring to? I don't believe this is anything that Carbon controls but maybe I am mistaken?

[flannanl]

It's https://github.com/IBM/carbon-components/blob/master/src/components/dropdown/dropdown.js. We need to fix in both carbon v8 and v9.

[carbon-bot]

:tada: This issue has been resolved in version 9.15.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[carmacleod]

Thank-you! :)