From efa7a9bb124d42c2fdfe53e1c8968353f20f8ce6 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 15 Jul 2020 12:00:02 -0700
Subject: [PATCH] fix(SideNav): a11y fixes for SideNavMenu, MenuItem (#6468)

* fix(SideNav): a11y fixes for SideNavMenu, MenuItem

* chore(snapshot): update snapshots
---
 .../components/src/components/ui-shell/_side-nav.scss    | 5 ++---
 packages/react/src/components/UIShell/SideNavMenu.js     | 1 -
 packages/react/src/components/UIShell/SideNavMenuItem.js | 4 ++--
 .../__tests__/__snapshots__/SideNavMenu-test.js.snap     | 2 --
 .../__tests__/__snapshots__/SideNavMenuItem-test.js.snap | 9 ---------
 5 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index d51d53f45743..b4f502e7b41f 100644
--- 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
index c5292dd31cab..901af742cd82 100644
--- 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
index 2ad279363c9b..22cef2cfd778 100644
--- 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
index 0d0fd476b9f9..7571d4f470f3 100644
--- 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
index ace0d43c96f6..2b1ae57cde64 100644
--- 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