Masthead overflow – overflow button not appearing/disappearing on tab

Detailed description

Describe in detail the issue you’re having.

• Included the sprint must have label as this overflow feature is committed for the Nov release When using the keyboard to tab through the masthead items, the left overflow button does not appear after the items shift to the right and the first item is partially hidden.

The left overflow button should appear, and the right overflow button should disappear.

Link to functional specs Link to visual specssee page 32–35 for visual reference

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

bug

Is this issue related to a specific component?

masthead

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

What browser are you working in?

Chrome Version 85.0.4183.121 (Official Build) (64-bit)

What version of the IBM.com Library are you using?

Canary

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

October release

Steps to reproduce the issue

1. use keyboard to tab through items in masthead
2. Step two
3. Step three
4. etc.

Additional information

• Screenshots or code
• Notes

[Praveen-sr]

@oliviaflory @RobertaJHahn We re tested this on React Checked on: iPad 8th, iPad mini and iPad Pro [IOS 13, 14] Samsung Tab S7 and Tab S6 [Android 9, 10] Browser re sizing- Firefox, chrome and Safari

1. User using keyboard to tab through the masthead menu items, the left overflow button does appear after the items shift to the right
2. User using keyboard to tab through the masthead menu items, right overflow button disappears once user reaches last item
3. User using keyboard to Shift + tab through the masthead menu items, left overflow button disappears once user reaches first item.

Working as expected.

[RobertaJHahn]

@Praveen-sr Thanks for your help. Closing.

cc: @oliviaflory @ariellalgilmore