fix(ui-shell): remove role='menu' from ui-shell (#5235)

carbon-design-system · Jan 31, 2020 · eb9412f · eb9412f
1 parent 0000bb2
commit eb9412f
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 79 deletions.
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -167,7 +167,7 @@
     }
   }
 
-  .#{$prefix}--header__menu-bar[role='menubar'] {
+  .#{$prefix}--header__menu-bar {
     display: flex;
     height: 100%;
     list-style: none;
@@ -240,7 +240,7 @@
     transform: rotate(180deg);
   }
 
-  .#{$prefix}--header__menu[role='menu'] {
+  .#{$prefix}--header__menu {
     display: none;
     list-style: none;
     padding: 0;

diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -328,8 +328,8 @@
     > .#{$prefix}--side-nav__submenu:hover,
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
     > .#{$prefix}--side-nav__link:hover,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
+  .#{$prefix}--side-nav__menu
+    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
   .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
@@ -433,34 +433,31 @@
     color: $ibm-color__gray-100;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu'] {
+  .#{$prefix}--side-nav__menu {
     display: block;
     visibility: hidden;
     max-height: 0;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
-    + .#{$prefix}--side-nav__menu[role='menu'] {
+    + .#{$prefix}--side-nav__menu {
     max-height: rem(1500px);
     visibility: inherit;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
     height: mini-units(4);
     min-height: mini-units(4);
     padding-left: mini-units(4);
     font-weight: 400;
   }
 
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+    a.#{$prefix}--side-nav__link {
     padding-left: mini-units(9);
   }
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link--current,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[aria-current='page'],
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
     background-color: $ibm-color__gray-20;
 
@@ -584,7 +581,7 @@
   }
 
   .#{$prefix}--side-nav--fixed
-    .#{$prefix}--side-nav__menu[role='menu']
+    .#{$prefix}--side-nav__menu
     a.#{$prefix}--side-nav__link {
     padding-left: mini-units(4);
   }

diff --git a/packages/components/src/components/ui-shell/header-nav.hbs b/packages/components/src/components/ui-shell/header-nav.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -17,27 +17,27 @@
   "0", while the rest should get "-1"
 -->
 <nav class="{{@root.prefix}}--header__nav" aria-label="Platform Name" data-header-nav>
-  <ul class="{{@root.prefix}}--header__menu-bar" role="menubar" aria-label="Platform Name">
+  <ul class="{{@root.prefix}}--header__menu-bar" aria-label="Platform Name">
     {{#each header.navLinks}}
     {{#if href}}
     <li>
-      <a class="{{@root.prefix}}--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
+      <a class="{{@root.prefix}}--header__menu-item" href="javascript:void(0)" tabindex="0">
         {{this.title}}
       </a>
     </li>
     {{else}}
     <li class="{{@root.prefix}}--header__submenu" data-header-submenu>
-      <a class="{{@root.prefix}}--header__menu-item {{@root.prefix}}--header__menu-title" role="menuitem" aria-haspopup="true"
+      <a class="{{@root.prefix}}--header__menu-item {{@root.prefix}}--header__menu-title" aria-haspopup="true"
         aria-expanded="{{this.state.expanded}}" href="javascript:void(0)" tabindex="0">
         {{this.title}}
         <svg class="{{@root.prefix}}--header__menu-arrow" width="12" height="7" aria-hidden="true">
           <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
         </svg>
       </a>
-      <ul class="{{@root.prefix}}--header__menu" role="menu" aria-label="{{this.title}}">
+      <ul class="{{@root.prefix}}--header__menu" aria-label="{{this.title}}">
         {{#each this.items}}
         <li role="none">
-          <a class="{{@root.prefix}}--header__menu-item" role="menuitem" href="{{this.href}}" tabindex="-1">
+          <a class="{{@root.prefix}}--header__menu-item" href="{{this.href}}" tabindex="-1">
             <span class="{{@root.prefix}}--text-truncate--end">
               {{this.title}}
             </span>

diff --git a/packages/components/src/components/ui-shell/navigation-menu.hbs b/packages/components/src/components/ui-shell/navigation-menu.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -12,7 +12,8 @@
       {{#each this.items}}
       {{#if this.active}}
       {{#if this.hasIcon}}
-      <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
+      <li
+        class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
         {{else}}
       <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active">
         {{/if}}
@@ -28,7 +29,8 @@
           {{#if this.hasIcon}}
           <div class="{{@root.prefix}}--navigation-icon">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           {{/if}}
@@ -47,7 +49,8 @@
               <div class="{{@root.prefix}}--navigation-icon">
 
                 <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+                  <path
+                    d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
                 </svg>
               </div>
               {{/if}}
@@ -58,14 +61,15 @@
                 </svg>
               </div>
             </button>
-            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items" role="menu">
+            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items">
               {{#each this.links}}
               {{#if this.active}}
-              <li class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
+              <li
+                class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
                 {{else}}
               <li class="{{@root.prefix}}--navigation__category-item">
                 {{/if}}
-                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}" role="menuitem">
+                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}">
                   {{ this.title }}
                 </a>
               </li>

diff --git a/packages/components/src/components/ui-shell/side-nav-fixed.hbs b/packages/components/src/components/ui-shell/side-nav-fixed.hbs
@@ -20,19 +20,19 @@
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu" hidden="">
+        <ul class="{{@root.prefix}}--side-nav__menu" hidden="">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
-          <li class="{{@root.prefix}}--side-nav__menu-item" role="menuitem">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+          <li class="{{@root.prefix}}--side-nav__menu-item">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
@@ -50,28 +50,28 @@
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+        <ul class="{{@root.prefix}}--side-nav__menu">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 L0 menu item
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 L0 menu item
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>

diff --git a/packages/components/src/components/ui-shell/side-nav.hbs b/packages/components/src/components/ui-shell/side-nav.hbs
@@ -13,7 +13,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
@@ -23,7 +24,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">Link - active</span>
@@ -33,7 +35,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">
@@ -46,7 +49,8 @@
           aria-current="page">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__link-text">
@@ -58,40 +62,42 @@
         <button class="{{@root.prefix}}--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
           <div class="{{@root.prefix}}--side-nav__icon">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           <span class="{{@root.prefix}}--side-nav__submenu-title">
             Category title that is really long and probably should overflow
           </span>
-          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
             <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+        <ul class="{{@root.prefix}}--side-nav__menu">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>