change(mega-menu): use lists for navigation, enhance voice over suppo…

…rt for better accessibility
eea · Mar 6, 2023 · d13137f · d13137f
1 parent c7d35b9
commit d13137f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
@@ -265,7 +265,7 @@ const Main = ({
           <Grid.Column mobile={4} tablet={4} computer={8}>
             <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
               {menuItems && (
-                <div
+                <ul
                   className="ui text eea-main-menu tablet or lower hidden menu"
                   ref={desktopMenuRef}
                   id={'navigation'}
@@ -274,18 +274,18 @@ const Main = ({
                     <Menu.Item
                       name={item['@id'] || item.url}
                       key={item['@id'] || item.url}
+                      as={'li'}
                       active={
                         activeItem.indexOf(item['@id']) !== -1 ||
                         activeItem.indexOf(item.url) !== -1
                       }
-                      tabIndex="0"
                     >
                       {renderGlobalMenuItem(item, {
                         onClick: menuOnClick,
                       })}
                     </Menu.Item>
                   ))}
-                </div>
+                </ul>
               )}
               {!hideSearch && (
                 <button

diff --git a/src/ui/Header/HeaderMenuPopUp.js b/src/ui/Header/HeaderMenuPopUp.js
@@ -20,7 +20,6 @@ const createColumns = (item, length, renderMenuItem) => {
           <React.Fragment key={idx}>
             {renderMenuItem(arrayItem, {
               className: 'item',
-              role: 'listitem',
               key: idx,
             })}
           </React.Fragment>
@@ -34,7 +33,7 @@ const createColumns = (item, length, renderMenuItem) => {
 
 const ItemGrid = ({ item, columns, length, renderMenuItem }) => (
   <>
-    {renderMenuItem(item, { className: 'sub-title' })}
+    {renderMenuItem(item, { className: 'sub-title', id: 'david' })}
     {item.items.length ? (
       <Grid columns={columns}>
         {createColumns(item, length, renderMenuItem)}
@@ -43,26 +42,31 @@ const ItemGrid = ({ item, columns, length, renderMenuItem }) => (
   </>
 );
 
-const Item = ({ item, icon = false, iconName, renderMenuItem }) => (
-  <>
-    {renderMenuItem(item, { className: 'sub-title' })}
-    <List className="menu-list">
-      {item.items.map((listItem, index) => (
-        <React.Fragment key={index}>
-          {renderMenuItem(
-            listItem,
-            {
-              className: 'item',
-              key: index,
-              role: 'listitem',
-            },
-            { children: icon && <Icon className={iconName} /> },
-          )}
-        </React.Fragment>
-      ))}
-    </List>
-  </>
-);
+const Item = ({ item, icon = false, iconName, renderMenuItem }) => {
+  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  return (
+    <>
+      {renderMenuItem(item, {
+        className: 'sub-title',
+        id: item_id,
+      })}
+      <List className="menu-list" aria-labelledby={item_id}>
+        {item.items.map((listItem, index) => (
+          <React.Fragment key={index}>
+            {renderMenuItem(
+              listItem,
+              {
+                className: 'item',
+                key: index,
+              },
+              { children: icon && <Icon className={iconName} /> },
+            )}
+          </React.Fragment>
+        ))}
+      </List>
+    </>
+  );
+};
 
 const Topics = ({ menuItem, renderMenuItem }) => (
   <Grid>