From 5f1a4bee3539b92c22262bb36c580557d78d8c10 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 16 Oct 2019 18:28:11 +0530
Subject: [PATCH] remove menubar role from EuiSideNav (#2429)

* remove menubar role from EuiSideNav
---
 CHANGELOG.md                                  |  1 +
 .../__snapshots__/side_nav.test.js.snap       | 24 -------------------
 .../__snapshots__/side_nav_item.test.js.snap  |  4 ----
 src/components/side_nav/side_nav.js           |  4 +---
 src/components/side_nav/side_nav_item.js      | 16 +++----------
 5 files changed, 5 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e64635ee99d..db389058e9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed missing misc. button and link type definition exports ([#2434](https://github.com/elastic/eui/pull/2434))
+- Strip custom semantics from `EuiSideNav` ([#2429](https://github.com/elastic/eui/pull/2429))
 
 ## [`14.5.0`](https://github.com/elastic/eui/tree/v14.5.0)
 
diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
index 519677befca..94935728d9b 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
@@ -29,7 +29,6 @@ exports[`EuiSideNav is rendered 1`] = `
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   />
 </nav>
 `;
@@ -61,7 +60,6 @@ exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = `
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   />
 </nav>
 `;
@@ -93,7 +91,6 @@ exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`]
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   />
 </nav>
 `;
@@ -125,13 +122,11 @@ exports[`EuiSideNav props items is rendered 1`] = `
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
     >
       <div
-        aria-label="[object Object]"
         class="euiSideNavItemButton"
       >
         <span
@@ -151,7 +146,6 @@ exports[`EuiSideNav props items is rendered 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -169,7 +163,6 @@ exports[`EuiSideNav props items is rendered 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -224,13 +217,11 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
     >
       <div
-        aria-label="[object Object]"
         class="euiSideNavItemButton"
       >
         <span
@@ -250,7 +241,6 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -268,7 +258,6 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
           class="euiSideNavItem euiSideNavItem--trunk euiSideNavItem--hasChildItems"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton euiSideNavItemButton-isOpen"
           >
             <span
@@ -288,7 +277,6 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
               class="euiSideNavItem euiSideNavItem--branch euiSideNavItem--hasChildItems"
             >
               <div
-                aria-label="[object Object]"
                 class="euiSideNavItemButton euiSideNavItemButton-isOpen"
               >
                 <span
@@ -308,7 +296,6 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
                   class="euiSideNavItem euiSideNavItem--branch"
                 >
                   <div
-                    aria-label="[object Object]"
                     class="euiSideNavItemButton"
                   >
                     <span
@@ -359,7 +346,6 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = `
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
@@ -433,7 +419,6 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
@@ -441,7 +426,6 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
       <a
         class="euiSideNavItemButton euiSideNavItemButton--isClickable"
         href="http://www.elastic.co"
-        role="menuitem"
       >
         <span
           class="euiSideNavItemButton__content"
@@ -460,7 +444,6 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -478,7 +461,6 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -533,13 +515,11 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
   </button>
   <div
     class="euiSideNav__content"
-    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
     >
       <div
-        aria-label="[object Object]"
         class="euiSideNavItemButton"
       >
         <span
@@ -559,7 +539,6 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -577,7 +556,6 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
           class="euiSideNavItem euiSideNavItem--trunk euiSideNavItem--hasChildItems"
         >
           <div
-            aria-label="[object Object]"
             class="euiSideNavItemButton euiSideNavItemButton-isOpen"
           >
             <span
@@ -597,7 +575,6 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
               class="euiSideNavItem euiSideNavItem--branch"
             >
               <div
-                aria-label="[object Object]"
                 class="euiSideNavItemButton euiSideNavItemButton-isSelected"
               >
                 <span
@@ -615,7 +592,6 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
               class="euiSideNavItem euiSideNavItem--branch"
             >
               <div
-                aria-label="[object Object]"
                 class="euiSideNavItemButton"
               >
                 <span
diff --git a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
index a0a88b50435..fbd52c9f2f5 100644
--- a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
@@ -5,7 +5,6 @@ exports[`EuiSideNavItem is rendered 1`] = `
   class="euiSideNavItem"
 >
   <div
-    aria-label="[object Object]"
     class="euiSideNavItemButton"
   >
     <span
@@ -30,7 +29,6 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
   class="euiSideNavItem"
 >
   <div
-    aria-label="[object Object]"
     class="euiSideNavItemButton"
   >
     <span
@@ -51,7 +49,6 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
   class="euiSideNavItem"
 >
   <div
-    aria-label="[object Object]"
     class="euiSideNavItemButton euiSideNavItemButton-isSelected"
   >
     <span
@@ -72,7 +69,6 @@ exports[`EuiSideNavItem preserves child's classes 1`] = `
   class="euiSideNavItem"
 >
   <div
-    aria-label="[object Object]"
     class="euiSideNavItemButton"
   >
     <span
diff --git a/src/components/side_nav/side_nav.js b/src/components/side_nav/side_nav.js
index ddeea9a9114..060bb4ff797 100644
--- a/src/components/side_nav/side_nav.js
+++ b/src/components/side_nav/side_nav.js
@@ -106,9 +106,7 @@ export class EuiSideNav extends Component {
         </button>
 
         {/* Hidden from view in mobile, but toggled from the button above */}
-        <div className="euiSideNav__content" role="menubar">
-          {nav}
-        </div>
+        <div className="euiSideNav__content">{nav}</div>
       </nav>
     );
   }
diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js
index 3cc3709580f..e006c774643 100644
--- a/src/components/side_nav/side_nav_item.js
+++ b/src/components/side_nav/side_nav_item.js
@@ -7,12 +7,7 @@ import { EuiIcon } from '../icon';
 const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
   if (href) {
     return (
-      <a
-        className={className}
-        href={href}
-        onClick={onClick}
-        role="menuitem"
-        {...rest}>
+      <a className={className} href={href} onClick={onClick} {...rest}>
         {children}
       </a>
     );
@@ -20,19 +15,14 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
 
   if (onClick) {
     return (
-      <button
-        type="button"
-        className={className}
-        onClick={onClick}
-        role="menuitem"
-        {...rest}>
+      <button type="button" className={className} onClick={onClick} {...rest}>
         {children}
       </button>
     );
   }
 
   return (
-    <div className={className} aria-label={children} {...rest}>
+    <div className={className} {...rest}>
       {children}
     </div>
   );