fix(HeaderMenu): spread extra props into root element (#9139)

* fix(HeaderMenu): spread extra props into root element

* test(HeaderMenu): update test description

* fix(HeaderMenu): destructure focusRef

* chore: update snapshots

Author: emyarod

packages/react/src/components/UIShell/HeaderMenu.js

@@ -173,6 +173,8 @@ class HeaderMenu extends React.Component {
       children,
       renderMenuContent: MenuContent,
       menuLinkName,
+      focusRef, // eslint-disable-line no-unused-vars
+      ...rest
     } = this.props;
     const accessibilityLabel = {
       'aria-label': ariaLabel,
@@ -188,6 +190,7 @@ class HeaderMenu extends React.Component {
     // - href can be set to javascript:void(0), ideally this will be a button
     return (
       <li // eslint-disable-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+        {...rest}
         className={className}
         onKeyDown={this.handleMenuClose}
         onClick={this.handleOnClick}

packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js

@@ -95,7 +95,7 @@ describe('HeaderMenu', () => {
   });
 
   describe('menu button interactions', () => {
-    it('should should open and close', () => {
+    it('should open and close', () => {
       const wrapper = mount(
         <HeaderMenu {...mockProps}>
           <HeaderMenuItem href="/a">A</HeaderMenuItem>

packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap

@@ -58,6 +58,7 @@ exports[`HeaderMenu should render 1`] = `
       onBlur={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
+      tabIndex={-1}
     >
       <a
         aria-expanded={false}