Fix A11y in Navigation (#344)

kitconcept · Feb 13, 2024 · 7fca59f · 7fca59f
1 parent 54aca2d
commit 7fca59f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 59 deletions.
diff --git a/acceptance/cypress/tests/main/nav.cy.js b/acceptance/cypress/tests/main/nav.cy.js
@@ -27,7 +27,6 @@ context('Navigation Acceptance Tests', () => {
       path: '/level-1/level-2',
     });
 
-
     cy.visit('/');
     cy.viewport('macbook-16');
   });
@@ -44,17 +43,12 @@ context('Navigation Acceptance Tests', () => {
     cy.get('ul.desktop-menu button').contains('Level 1').click();
     cy.get('.subitem-wrapper').findByText('Level 2').click();
     cy.get('.documentFirstHeading').should('have.text', 'Level 2');
-
   });
 
   it('Open 3rd level', function () {
     cy.wait('@content');
     cy.get('ul.desktop-menu button').contains('Level 1').click();
-    cy.get('.subsubitem-wrapper li').findByText('Level 3').click();
+    cy.get('.subsubitem-wrapper').findByText('Level 3').click();
     cy.get('.documentFirstHeading').should('have.text', 'Level 3');
-
   });
 });
-
-
-
diff --git a/news/289.bugfix b/news/289.bugfix
@@ -0,0 +1 @@
+Fix Navigation fails html validator due to use of divs inside ul tag @iRohitSingh
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
@@ -141,58 +141,48 @@ const Navigation = ({ pathname }) => {
                           {item.items &&
                             item.items.length > 0 &&
                             item.items.map((subitem) => (
-                              <div
-                                className="subitem-wrapper"
-                                key={subitem.url}
-                              >
-                                <li key={subitem.url}>
-                                  <NavLink
-                                    to={subitem.url}
-                                    onClick={() => closeMenu()}
-                                    className={cx({
-                                      current: isActive(subitem.url),
-                                    })}
-                                  >
-                                    <span className="left-arrow">&#8212;</span>
-                                    <span>
-                                      {subitem.nav_title || subitem.title}
-                                    </span>
-                                  </NavLink>
-                                </li>
+                              <li className="subitem-wrapper" key={subitem.url}>
+                                <NavLink
+                                  to={subitem.url}
+                                  onClick={() => closeMenu()}
+                                  className={cx({
+                                    current: isActive(subitem.url),
+                                  })}
+                                >
+                                  <span className="left-arrow">&#8212;</span>
+                                  <span>
+                                    {subitem.nav_title || subitem.title}
+                                  </span>
+                                </NavLink>
                                 <div className="sub-submenu">
                                   <ul>
                                     {subitem.items &&
                                       subitem.items.length > 0 &&
                                       subitem.items.map((subsubitem) => (
-                                        <div
+                                        <li
                                           className="subsubitem-wrapper"
                                           key={subsubitem.url}
                                         >
-                                          <li key={subsubitem.url}>
-                                            <NavLink
-                                              to={subsubitem.url}
-                                              onClick={() => closeMenu()}
-                                              className={cx({
-                                                current: isActive(
-                                                  subsubitem.url,
-                                                ),
-                                              })}
-                                            >
-                                              <span className="left-arrow">
-                                                &#8212;
-                                              </span>
-
-                                              <span>
-                                                {subsubitem.nav_title ||
-                                                  subsubitem.title}
-                                              </span>
-                                            </NavLink>
-                                          </li>
-                                        </div>
+                                          <NavLink
+                                            to={subsubitem.url}
+                                            onClick={() => closeMenu()}
+                                            className={cx({
+                                              current: isActive(subsubitem.url),
+                                            })}
+                                          >
+                                            <span className="left-arrow">
+                                              &#8212;
+                                            </span>
+                                            <span>
+                                              {subsubitem.nav_title ||
+                                                subsubitem.title}
+                                            </span>
+                                          </NavLink>
+                                        </li>
                                       ))}
                                   </ul>
                                 </div>
-                              </div>
+                              </li>
                             ))}
                         </ul>
                       </div>

diff --git a/src/theme/_header.scss b/src/theme/_header.scss
@@ -409,6 +409,7 @@ body.has-toolbar.has-sidebar {
             color: $white;
 
             a {
+              padding-bottom: 0;
               font-size: 14px;
               font-weight: 400;
               line-height: 18px;
@@ -490,12 +491,7 @@ body.has-toolbar.has-sidebar {
             }
           }
 
-          li {
-            position: relative;
-            padding-top: 0;
-          }
-
-          li a.current {
+          a.current {
             .left-arrow {
               visibility: visible;
             }
@@ -513,14 +509,13 @@ body.has-toolbar.has-sidebar {
         display: flex;
       }
 
-      li {
-        padding: 8px 0;
-      }
-
-      li a {
+      a {
+        position: relative;
         display: inline-flex;
         align-items: flex-start;
+        padding-bottom: 8px;
         color: $black;
+
         @include body-text-bold();
 
         span {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fix Navigation fails html validator due to use of divs inside ul tag @iRohitSingh