[web-components]: Blue border on hamburger menu first element

[NicoletaBordea]

Description

the first item in the hamburger menu is highlighted with a blue border

In our project this is visible from the first click on the hamburger menu, but on the codepen example and in the demo links for masthead, in the documentation, it can be reproduced only on the second time you open the hamburger menu.

Component(s) impacted

masthead hamburger menu

Browser

Chrome

Carbon for IBM.com version

v2.1.0-rc.0

Severity

Severity 4 = The problem is not visible to or noticeable to an average user. Affects minor functionality, no workaround needed.

Application/website

ibm docs

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://codepen.io/jakaeser/pen/gOqErGE

Steps to reproduce the issue (if applicable)

1. resize the window for a smaller resolution, until you have the hamburger menu visible in the masthead.
2. open the hamburger menu: nothing is highlighted
3. Close the hamburger menu and reopen it again: first item in the menu has a blue border

In our project, this highlight is visible from the first time the hamburger menu is opened

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[annawen1]

This is a accessibility feature where when the menu is open, focus should be applied to the first menu item to make the menu keyboard accessible. This is intended, so this ticket does reveal an issue where the first menu item isn't being focused on open consistently

https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/