feat(ui-shell): switch header nav role for side nav

This change allows users of `<HeaderMenu>` and `<HeaderMenuItem>` to specify their ARIA roles so the a11y structure won't be broken when they are put in side nav for narrow screen. Fixes carbon-design-system#3572.
asudoh · Dec 9, 2019 · f591d1a · f591d1a
1 parent 347a5e1
commit f591d1a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 15 deletions.
diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -37,6 +37,12 @@ class HeaderMenu extends React.Component {
      */
     focusRef: PropTypes.func,
 
+    /**
+     * Optionally supply a role for the underlying <a> node. Useful for resetting
+     * <a> semantics.
+     */
+    linkRole: PropTypes.string,
+
     /**
      * Optionally provide a tabIndex for the underlying menu button
      */
@@ -54,6 +60,7 @@ class HeaderMenu extends React.Component {
   };
 
   static defaultProps = {
+    linkRole: 'menuitem',
     renderMenuContent: defaultRenderMenuContent,
   };
 
@@ -157,6 +164,7 @@ class HeaderMenu extends React.Component {
       'aria-labelledby': ariaLabelledBy,
       className: customClassName,
       children,
+      linkRole,
       renderMenuContent: MenuContent,
       menuLinkName,
     } = this.props;
@@ -185,7 +193,7 @@ class HeaderMenu extends React.Component {
           href="#"
           onKeyDown={this.handleOnKeyDown}
           ref={this.handleMenuButtonRef}
-          role="menuitem"
+          role={linkRole}
           tabIndex={0}
           {...accessibilityLabel}>
           {menuLinkName}

diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.js b/packages/react/src/components/UIShell/HeaderMenuItem.js
@@ -13,7 +13,7 @@ import Link, { LinkPropTypes } from './Link';
 const { prefix } = settings;
 
 const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
-  { className, children, role, ...rest },
+  { className, children, role, linkRole, ...rest },
   ref
 ) {
   return (
@@ -22,7 +22,7 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
         {...rest}
         className={`${prefix}--header__menu-item`}
         ref={ref}
-        role="menuitem"
+        role={linkRole}
         tabIndex={0}>
         <span className={`${prefix}--text-truncate--end`}>{children}</span>
       </Link>
@@ -53,6 +53,16 @@ HeaderMenuItem.propTypes = {
    * <ul> semantics for menus.
    */
   role: PropTypes.string,
+
+  /**
+   * Optionally supply a role for the underlying <a> node. Useful for resetting
+   * <a> semantics.
+   */
+  linkRole: PropTypes.string,
+};
+
+HeaderMenuItem.defaultProps = {
+  linkRole: 'menuitem',
 };
 
 export default HeaderMenuItem;
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -174,10 +174,19 @@ storiesOf('UI Shell', module)
                 isPersistent={false}>
                 <SideNavItems>
                   <HeaderSideNavItems>
-                    <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-                    <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-                    <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-                    <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 1
+                    </HeaderMenuItem>
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 2
+                    </HeaderMenuItem>
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 3
+                    </HeaderMenuItem>
+                    <HeaderMenu
+                      linkRole="link"
+                      aria-label="Link 4"
+                      menuLinkName="Link 4">
                       <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
                       <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
                       <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
@@ -267,10 +276,19 @@ storiesOf('UI Shell', module)
                 isPersistent={false}>
                 <SideNavItems>
                   <HeaderSideNavItems>
-                    <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-                    <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-                    <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-                    <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 1
+                    </HeaderMenuItem>
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 2
+                    </HeaderMenuItem>
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 3
+                    </HeaderMenuItem>
+                    <HeaderMenu
+                      linkRole="link"
+                      aria-label="Link 4"
+                      menuLinkName="Link 4">
                       <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
                       <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
                       <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
@@ -332,10 +350,19 @@ storiesOf('UI Shell', module)
                 expanded={isSideNavExpanded}>
                 <SideNavItems>
                   <HeaderSideNavItems hasDivider={true}>
-                    <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
-                    <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
-                    <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
-                    <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 1
+                    </HeaderMenuItem>
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 2
+                    </HeaderMenuItem>
+                    <HeaderMenuItem linkRole="link" href="#">
+                      Link 3
+                    </HeaderMenuItem>
+                    <HeaderMenu
+                      linkRole="link"
+                      aria-label="Link 4"
+                      menuLinkName="Link 4">
                       <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
                       <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
                       <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>