refactor(website): Improve navigation on menu and submenu rendering (#…

…1480) * refactor(website): Make the submenus always rendered but hidden * refactor(website): improve keyboard navigating on the menu
contentful · Nov 4, 2021 · 5362019 · 5362019
1 parent 08ccb57
commit 5362019
Showing 1 changed file with 26 additions and 9 deletions.
diff --git a/packages/forma-36-website/src/components/Navigation.js b/packages/forma-36-website/src/components/Navigation.js
@@ -36,6 +36,10 @@ const styles = {
     margin-top: 0;
   `,
 
+  hidden: css`
+    display: none;
+  `,
+
   link: css`
     display: flex;
     justify-content: space-between;
@@ -100,6 +104,12 @@ const MenuListItem = React.forwardRef(
       setIsExpanded(!isExpanded);
     };
 
+    const handleKeyDown = (event) => {
+      if (event.nativeEvent.code === 'Enter') {
+        handleToggle(event);
+      }
+    };
+
     const itemOffset = { paddingLeft: `${1 + hierarchyLevel}rem` };
 
     return (
@@ -109,6 +119,9 @@ const MenuListItem = React.forwardRef(
             <div
               css={[styles.link, styles.linkGroup, itemOffset]}
               onClick={handleToggle}
+              onKeyDown={handleKeyDown}
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+              tabIndex={0}
             >
               {isCategory ? (
                 <SectionHeading>{item.name}</SectionHeading>
@@ -123,13 +136,12 @@ const MenuListItem = React.forwardRef(
                 icon={isExpanded ? 'ChevronDown' : 'ChevronRight'}
               />
             </div>
-            {isExpanded && (
-              <MenuList
-                menuItems={item.menuLinks}
-                currentPath={currentPath}
-                hierarchyLevel={hierarchyLevel + 1}
-              />
-            )}
+            <MenuList
+              isHidden={!isExpanded}
+              menuItems={item.menuLinks}
+              currentPath={currentPath}
+              hierarchyLevel={hierarchyLevel + 1}
+            />
           </>
         ) : (
           <Link
@@ -161,15 +173,20 @@ MenuListItem.defaultProps = {
   hierarchyLevel: 0,
 };
 
-const MenuList = ({ menuItems, currentPath, hierarchyLevel }) => {
+const MenuList = ({
+  menuItems,
+  currentPath,
+  hierarchyLevel,
+  isHidden = false,
+}) => {
   const activeRef = useRef(null);
   useEffect(() => {
     if (activeRef.current) {
       activeRef.current.scrollIntoView({ block: 'center' });
     }
   }, []);
   return (
-    <ul css={styles.list}>
+    <ul css={[styles.list, isHidden && styles.hidden]}>
       {menuItems.map((item, index) => {
         const active = checkActive(item, currentPath);
         return (