Fix(masthead-a11y): None of the descendent elements with menuitem rol…

…e is tabbable (#10897)

### Related Ticket(s)

Closes #9691 

### Description

None of the descendent elements with menuitem role is tabbable

### Changelog

**Changed**

- Moved "menuitem" role from "li" element to "a" element


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/src/components/Masthead/MastheadL1.js

@@ -33,12 +33,6 @@ const MastheadL1 = ({ navigationL1, ...rest }) => {
     document
       .querySelector(`.${prefix}--header__menu-bar`)
       ?.setAttribute('role', 'menu');
-    document
-      .querySelectorAll(`.${prefix}--header__menu-bar li`)
-      .forEach((e) => {
-        e.setAttribute('role', 'menuitem');
-        e.querySelector('a').removeAttribute('role');
-      });
   }, []);
 
   const mastheadL1Links = navigationL1.map((link, index) => {