Merge pull request #718 from City-of-Helsinki/fix/sidenavigation-mobi…

…le-keyboard-navigation Fix/sidenavigation mobile keyboard navigation
City-of-Helsinki · May 30, 2022 · 2917791 · 2917791
2 parents fcc316a + 6fed30a
commit 2917791
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/packages/react/src/components/sideNavigation/SideNavigation.tsx b/packages/react/src/components/sideNavigation/SideNavigation.tsx
@@ -73,6 +73,7 @@ export const SideNavigation = ({
   const [activeParentLevel, setActiveParentLevel] = React.useState<number>();
   const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
   const isMobile = useMobile();
+  const shouldRenderMenu = !(isMobile && !mobileMenuOpen);
 
   const mainLevels = React.Children.map(children, (child, index) => {
     if (isValidElement(child) && (child.type as FCWithName).componentName === 'MainLevel') {
@@ -143,16 +144,17 @@ export const SideNavigation = ({
         >
           {toggleButtonLabel}
         </Button>
-        <ul
-          {...{
-            className: classNames(styles.mainLevelList, mobileMenuOpen && styles.open),
-            'aria-label': toggleButtonLabel,
-            'aria-hidden': isMobile && !mobileMenuOpen,
-          }}
-          id={menuId}
-        >
-          {mainLevels}
-        </ul>
+        {shouldRenderMenu && (
+          <ul
+            {...{
+              className: classNames(styles.mainLevelList, mobileMenuOpen && styles.open),
+              'aria-label': toggleButtonLabel,
+            }}
+            id={menuId}
+          >
+            {mainLevels}
+          </ul>
+        )}
       </nav>
     </SideNavigationContext.Provider>
   );

diff --git a/packages/react/src/components/sideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/react/src/components/sideNavigation/__snapshots__/SideNavigation.test.tsx.snap
@@ -45,7 +45,6 @@ exports[`<SideNavigation /> spec renders the component 1`] = `
       </div>
     </button>
     <ul
-      aria-hidden="false"
       aria-label="Navigate to page"
       class="mainLevelList"
       id="sideNavigation-menu"