fix(a11y): enhance navigation and fix ds nav mobile focus

src/components/nav-sidebar/nav-sidebar.js

@@ -45,12 +45,14 @@ function NavSidebar({
     ariaLabel: " (Link esterno)",
   };
 
+  // XXX We are currently using and repurposing the "navscroll" component of BSI, there may be some improvements to be made in a11y
+
   if (list) {
     links = list.map((item, index) => {
       expandSublinks = false;
 
       linksStyle =
-        "list-item text-uppercase right-icon" +
+        "list-item text-uppercase right-icon nav-link dropdown" +
         `${item.label === page ? " active" : ""}` +
         `${item.disabled ? " disabled" : ""}`;
 
@@ -61,10 +63,10 @@ function NavSidebar({
             linksStyle += " contains-active";
           }
 
-          let subLiStyle;
+          let subLiStyle = "nav-link";
 
           if (subItem.disabled) {
-            subLiStyle = "disabled";
+            subLiStyle += "disabled";
           }
 
           return (
@@ -182,7 +184,7 @@ function NavSidebar({
     >
       <div className="nav-sidebar">
         <nav
-          className="navbar it-navscroll-wrapper navbar-expand-lg it-bottom-navscroll it-right-side border-end-0"
+          className="navbar it-navscroll-wrapper navbar-expand-lg it-bottom-navscroll it-right-side border-end-0 megamenu"
           aria-label={ariaLabel}
         >
           <button
@@ -200,16 +202,11 @@ function NavSidebar({
           </button>
           <div className="navbar-collapsable" id={id} ref={navCollRef}>
             <div className="overlay" />
-            <div className="close-div visually-hidden">
-              <button className="btn close-menu" type="button">
-                <span className="it-close" />
-                {buttonCloseAriaLabel}
-              </button>
-            </div>
             <div className="menu-wrapper">
               <button
-                className="it-back-button btn w-100 text-start"
+                className="it-back-button btn w-100 text-start rounded-0"
                 type="button"
+                aria-label={buttonCloseAriaLabel}
               >
                 <svg role="img" className="icon icon-sm icon-primary align-top">
                   <use href="/svg/sprites.svg#it-chevron-left" />

src/data/dsnav.yaml

@@ -6,9 +6,9 @@ img: /images/design-system-menu.svg
 alt: ""
 ariaLabel: Menu design system
 toggleLabel: Menu design system
-toggleAriaLabel: Apri/Chiudi menu navigazione design System
+toggleAriaLabel: Apri Menu design system
 backLabel: Chiudi
-buttonCloseAriaLabel: Chiudi navigazione
+buttonCloseAriaLabel: Chiudi Menu design system
 tag:
   label: v1.0.0-alpha.15
   addonClasses: bg-primary mt-2 text-white text-decoration-underline

src/data/header.yaml

@@ -64,7 +64,7 @@ navbar:
   theme: theme-dark-desk
   ariaLabel: Menu principale
   toggler:
-    ariaLabel: Mostra o nascondi il menu
+    ariaLabel: Apri il menu
   close:
     ariaLabel: Chiudi il menu
   nav:

src/data/skiplinks.yaml

@@ -1,6 +1,6 @@
 skiplinks:
   - label: Vai al menu
-    url: "#menuA" # xxx TO DEVELOP EXCEPTION FOR DESIGN SYSTEM PAGES... WE NEED A SECOND MENU LINK!
+    url: "#menuA" # xxx this approach is ok on desktop, doesn't work on mobile
   - label: Vai al contenuto
     url: "#main"
   - label: Questa pagina è stata utile?