feat(project): add sidebar aria labels

jwplayer · Apr 30, 2021 · d8963e2 · d8963e2
1 parent df53f63
commit d8963e2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -10,10 +10,14 @@ exports[`<Layout /> renders layout 1`] = `
         class="container"
       >
         <div
+          aria-label="open menu"
           class="menu"
+          role="button"
         >
           <svg
+            aria-hidden="true"
             class="icon"
+            focusable="false"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
           >
@@ -38,6 +42,7 @@ exports[`<Layout /> renders layout 1`] = `
           />
         </div>
         <nav
+          aria-label="menu"
           class="nav"
         >
           <a
@@ -77,11 +82,15 @@ exports[`<Layout /> renders layout 1`] = `
     <div
       class="sidebar"
     >
-      <nav
+      <div
+        aria-label="close menu"
         class="group"
+        role="button"
       >
         <svg
+          aria-hidden="true"
           class="icon"
+          focusable="false"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -95,8 +104,8 @@ exports[`<Layout /> renders layout 1`] = `
             />
           </g>
         </svg>
-      </nav>
-      <div
+      </div>
+      <nav
         class="group"
       >
         <a
@@ -129,7 +138,7 @@ exports[`<Layout /> renders layout 1`] = `
             Settings
           </span>
         </a>
-      </div>
+      </nav>
     </div>
   </div>
 </div>

diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -26,15 +26,15 @@ const SideBar: React.FC<SideBarProps> = ({ sideBarOpen, closeSideBar }) => {
         })}
         onClick={closeSideBar}
       >
-        <nav className={styles.group}>
+        <div className={styles.group} aria-label="close menu" role="button">
           <Close />
-        </nav>
-        <div className={styles.group}>
+        </div>
+        <nav className={styles.group}>
           <ButtonLink label="Home" to="/" />
           <ButtonLink label="Test" to="/" />
           <hr className={styles.divider} />
           <ButtonLink label="Settings" to="/" />
-        </div>
+        </nav>
       </div>
     </Fragment>
   );

diff --git a/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap b/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
@@ -8,11 +8,15 @@ exports[`<SideBar /> renders sideBar 1`] = `
   <div
     class="sidebar open"
   >
-    <nav
+    <div
+      aria-label="close menu"
       class="group"
+      role="button"
     >
       <svg
+        aria-hidden="true"
         class="icon"
+        focusable="false"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -26,8 +30,8 @@ exports[`<SideBar /> renders sideBar 1`] = `
           />
         </g>
       </svg>
-    </nav>
-    <div
+    </div>
+    <nav
       class="group"
     >
       <a
@@ -60,7 +64,7 @@ exports[`<SideBar /> renders sideBar 1`] = `
           Settings
         </span>
       </a>
-    </div>
+    </nav>
   </div>
 </div>
 `;
diff --git a/src/icons/createIcon.tsx b/src/icons/createIcon.tsx
@@ -16,6 +16,8 @@ export default (viewBox: string, icon: JSX.Element) => ({
       className={classNames(styles.icon, className)}
       viewBox={viewBox}
       {...props}
+      focusable="false"
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
     >
       {icon}