fix(SideNav): a11y fixes for SideNavMenu, MenuItem (#6468)

* fix(SideNav): a11y fixes for SideNavMenu, MenuItem * chore(snapshot): update snapshots
carbon-design-system · Jul 15, 2020 · efa7a9b · efa7a9b
1 parent 2485371
commit efa7a9b
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 17 deletions.
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -353,7 +353,7 @@
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > {Menu,Submenu}
   //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
+  .#{$prefix}--side-nav__submenu {
     @include button-reset($width: true);
     @include type-style('productive-heading-01');
     @include focus-outline('reset');
@@ -573,8 +573,7 @@
   // Variants - Fixed
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
-  .#{$prefix}--side-nav--fixed
-    .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
+  .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu {
     padding-left: mini-units(2);
   }
 

diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
@@ -155,7 +155,6 @@ export class SideNavMenu extends React.Component {
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       <li className={className} onKeyDown={this.handleKeyDown}>
         <button
-          aria-haspopup="true"
           aria-expanded={isExpanded}
           className={`${prefix}--side-nav__submenu`}
           onClick={this.handleToggleExpand}

diff --git a/packages/react/src/components/UIShell/SideNavMenuItem.js b/packages/react/src/components/UIShell/SideNavMenuItem.js
@@ -23,8 +23,8 @@ const SideNavMenuItem = React.forwardRef(function SideNavMenuItem(props, ref) {
   });
 
   return (
-    <li className={className} role="none">
-      <Link {...rest} className={linkClassName} role="menuitem" ref={ref}>
+    <li className={className}>
+      <Link {...rest} className={linkClassName} ref={ref}>
         <SideNavLinkText>{children}</SideNavLinkText>
       </Link>
     </li>

diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
@@ -8,7 +8,6 @@ exports[`SideNavMenu should render 1`] = `
         Array [
           <button
             aria-expanded="false"
-            aria-haspopup="true"
             class="bx--side-nav__submenu"
             type="button"
           >
@@ -66,7 +65,6 @@ exports[`SideNavMenu should render 1`] = `
   >
     <button
       aria-expanded={false}
-      aria-haspopup="true"
       className="bx--side-nav__submenu"
       onClick={[Function]}
       type="button"

diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap
@@ -8,18 +8,15 @@ exports[`SideNavMenuItem should render 1`] = `
 >
   <li
     className="bx--side-nav__menu-item custom-classname"
-    role="none"
   >
     <Link
       className="bx--side-nav__link"
       element="a"
       href="#"
-      role="menuitem"
     >
       <a
         className="bx--side-nav__link"
         href="#"
-        role="menuitem"
       >
         <SideNavLinkText>
           <span
@@ -42,18 +39,15 @@ exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria
 >
   <li
     className="bx--side-nav__menu-item custom-classname"
-    role="none"
   >
     <Link
       className="bx--side-nav__link bx--side-nav__link--current"
       element="a"
       href="#"
-      role="menuitem"
     >
       <a
         className="bx--side-nav__link bx--side-nav__link--current"
         href="#"
-        role="menuitem"
       >
         <SideNavLinkText>
           <span
@@ -77,20 +71,17 @@ exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria
 >
   <li
     className="bx--side-nav__menu-item custom-classname"
-    role="none"
   >
     <Link
       aria-current="page"
       className="bx--side-nav__link"
       element="a"
       href="#"
-      role="menuitem"
     >
       <a
         aria-current="page"
         className="bx--side-nav__link"
         href="#"
-        role="menuitem"
       >
         <SideNavLinkText>
           <span