fix: porting of v2 accessibility for megamenu

RedTurtle · Dec 29, 2023 · 8edf259 · 8edf259
1 parent 373b80b
commit 8edf259
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx b/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx
@@ -112,17 +112,18 @@ const MegaMenu = ({ item, pathname }) => {
 
   if (item.mode === 'simpleLink') {
     return item.linkUrl?.length > 0 ? (
-      <NavItem tag="li">
+      <NavItem tag="li" active={isItemActive} role="none">
         <NavLink
           href={item.linkUrl === '' ? '/' : null}
           item={item.linkUrl[0]?.['@id'] ? item.linkUrl[0] : '#'}
           tag={UniversalLink}
           active={isItemActive}
           data-element={item.id_lighthouse}
+          role="menuitem"
         >
           <span dangerouslySetInnerHTML={{ __html: item.title }}></span>
           {isItemActive && (
-            <span className="visually-hidden">
+            <span className="sr-only">
               {intl.formatMessage(messages.menu_selected)}
             </span>
           )}
@@ -238,7 +239,7 @@ const MegaMenu = ({ item, pathname }) => {
     }
 
     return (
-      <NavItem tag="li" className="megamenu" active={isItemActive}>
+      <NavItem tag="li" className="megamenu" active={isItemActive} role="none">
         <UncontrolledDropdown
           nav
           inNavbar
@@ -269,6 +270,9 @@ const MegaMenu = ({ item, pathname }) => {
                   }
                 }}
                 title={intl.formatMessage(messages.closeMenu)}
+                // APG spec: on Tab menu closes, so remove it from focusable elements
+                // https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
+                tabIndex="-1"
               >
                 <Icon icon="it-close" />
               </Button>
@@ -278,10 +282,14 @@ const MegaMenu = ({ item, pathname }) => {
                 <Row>
                   {childrenGroups.map((group, index) => (
                     <Col lg={12 / max_cols} key={'group_' + index}>
-                      <LinkList className="bordered">
+                      <LinkList
+                        className="bordered"
+                        role="menu"
+                        aria-label={item.title ?? ''}
+                      >
                         {group.map((child, idx) => {
                           return (
-                            <li key={child['@id'] + idx}>
+                            <li key={child['@id'] + idx} role="none">
                               {child.showAsHeader ? (
                                 <h3
                                   className={cx('list-item', {
@@ -298,6 +306,7 @@ const MegaMenu = ({ item, pathname }) => {
                                     key={child['@id']}
                                     onClick={() => setMenuStatus(false)}
                                     role="menuitem"
+                                    aria-current="page"
                                   >
                                     <span>{child.title}</span>
                                   </ConditionalLink>
@@ -362,12 +371,13 @@ const MegaMenu = ({ item, pathname }) => {
                 <Row>
                   <Col lg={8} />
                   <Col lg={4}>
-                    <LinkList>
-                      <li className="it-more text-end">
+                    <LinkList role="menu" aria-label={item.showMoreText ?? ''}>
+                      <li className="it-more text-end" role="none">
                         <UniversalLink
                           className="list-item medium"
                           item={item.showMoreLink[0]}
                           onClick={() => setMenuStatus(false)}
+                          role="menuitem"
                         >
                           <span>
                             {item.showMoreText?.length > 0

diff --git a/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx b/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx
@@ -44,17 +44,18 @@ const MenuSecondary = ({ pathname }) => {
 
   return (
     items?.length > 0 && (
-      <Nav navbar className="navbar-secondary" role="navigation">
+      <Nav navbar className="navbar-secondary" role="menubar">
         {items.map((item, i) => {
           let url = item.href || item.linkUrl?.[0]?.['@id'] || '';
 
           return (
-            <NavItem tag="li" key={i}>
+            <NavItem tag="li" active={isMenuActive(url)} key={i} role="none">
               <NavLink
                 href={url === '' ? '/' : flattenToAppURL(url)}
                 tag={UniversalLink}
                 active={isMenuActive(url)}
                 data-element={item.id_lighthouse}
+                role="menuitem"
               >
                 <span
                   className={item.inEvidence ? 'fw-bold' : ''}

diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -123,7 +123,7 @@ const Navigation = ({ pathname }) => {
                   </UniversalLink>
                 </div>
                 {/* Main Menu */}
-                <Nav data-element="main-navigation" navbar>
+                <Nav data-element="main-navigation" navbar role="menubar">
                   {menu
                     ?.filter((item) => item.visible)
                     ?.map((item, index) => (