React HeaderMenu does not render data-* attributes

[iamahern]

Brief description

When integrating Carbon with automated UI testing tools such as Cypress or Selenium, the recommended approach is to use data-* attributes such as data-cy to allow the UI testing framework to select the correct element for automation. The React <HeaderMenu> component does not correctly render data-* attributes.

By contrast other react components (such as <Header>) do correctly propagate data-* attributes.

What package(s) are you using?

• [x ] carbon-components
• [x ] carbon-components-react

Detailed description

Describe in detail the issue you're having.

Using the following markup

<Header aria-label="navbar" data-cy="navbar">
        <HeaderName href="/">My App</HeaderName>
        <HeaderGlobalBar>
          <HeaderNavigation aria-label="navigation">
            <HeaderMenu className="entity" aria-label="Entities" menuLinkName="Entities" data-cy="entity">
            ...
            </HeaderMenu>
         </HeaderNavigation>
        </HeaderGlobalBar>
</Header>

The expectation is that the rendered HTML for the <HeaderMenu> will contain the attribute data-cy="entity"; instead the markup is missing.

Is this issue related to a specific component?

Yes - HeaderMenu. I can see the feature working for other components (such as Header), but I have not made an explicit survey of the full toolkit.

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

See above.

What browser are you working in?

N/A - issue is visible by inspecting the raw HTML.

What version of the Carbon Design System are you using?

    "carbon-components": "^10.38.0",
    "carbon-components-react": "^7.38.0",

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

GHHS SPM AI Sept 2021.

Steps to reproduce the issue

See above.

Issue is visible by inspecting the markup generated in this code sandbox:
https://codesandbox.io/s/vibrant-gareth-m5q2g?file=/src/index.js