Focus order for overflow menu is not working.

[kavyanekkalapu]

Our team is working on accessibility testing(AVT) issues and we noticed issue with overflow menu component.

Issue: On tabbing to Overflow menu and pressing enter, the list of options are displayed. On tabbing to last option , when user tabs further, the focus moves to title of the page. This focus order is not meaningful. On tabbing, either the focus should move to the next interactive element on the page or the focus should keep moving within the same section of the list item

I observed same issue http://www.carbondesignsystem.com/components/overflow-menu/code and
http://www.carbondesignsystem.com/components/data-table/code.

Note: Issue does not exist in http://react.carbondesignsystem.com/?selectedKind=OverflowMenu&selectedStory=basic&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel.

For more info : https://ibm.enterprise.slack.com/files/W4FRVREA1/FB9LQG9C2/overflowmenu-focus.mov

[kavyanekkalapu]

One observation is, when i inspect options in overflow menu, ul and li elements are displaying at bottom of the page, so even if i keep tab order, it is not useful as it seems , that is the end of the page.
Where as in react components, ul and li elements are displaying along overflow component div.

react screenshot:

Hope this helps in fixing the issue, thanks.

[asudoh]

Thank you @kavyanekkalapu for reporting. Looks a good one and we’ll see what we can do.