Fix accessibility issue with list so that it's properly nested

mapbox · Sep 22, 2021 · 6eb9fbf · 6eb9fbf
1 parent bd575f0
commit 6eb9fbf
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 44 deletions.
diff --git a/src/components/navigation-accordion/navigation-accordion.js b/src/components/navigation-accordion/navigation-accordion.js
@@ -123,28 +123,27 @@ export default class NavigationAccordion extends React.Component {
     const subItemEls = subItems
       .filter((page) => !page.groupOrder || page.groupOrder === undefined)
       .map((page) => (
-        <React.Fragment key={page.title}>
-          <li
-            // Required on parents containing tags to prevent unwanted scrollbars on IE
-            className={classnames('mb3', {
-              'scroll-hidden': page.tag
+        <li
+          key={page.title}
+          // Required on parents containing tags to prevent unwanted scrollbars on IE
+          className={classnames('mb3', {
+            'scroll-hidden': page.tag
+          })}
+        >
+          <a
+            className={classnames('inline-block w-full color-blue-on-hover', {
+              'color-blue': activeItem === page.path
             })}
+            href={page.path}
           >
-            <a
-              className={classnames('inline-block w-full color-blue-on-hover', {
-                'color-blue': activeItem === page.path
-              })}
-              href={page.path}
-            >
-              {page.title}
-              {page.tag && this.renderTag(page)}
-            </a>
-          </li>
+            {page.title}
+            {page.tag && this.renderTag(page)}
+          </a>
           {activeItem &&
             activeItem.includes(page.path) &&
             page.subPages &&
             this.renderSubPages(page.subPages, activeItem)}
-        </React.Fragment>
+        </li>
       ));
 
     return (

diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
@@ -1984,35 +1984,35 @@ Array [
                       >
                         Worldview
                       </a>
+                      <ul
+                        className="mb6 ml3"
+                      >
+                        <li>
+                          <a
+                            className="pl12 inline-block w-full color-blue-on-hover border-l border--gray-light border-l--2"
+                            href="/PageLayout/guides/worldview/avilable-worldviews/"
+                          >
+                            Available worldviews
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="pl12 inline-block w-full color-blue-on-hover border-l border--gray-light border-l--2"
+                            href="/PageLayout/guides/worldview/border-styling/"
+                          >
+                            Border styling
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="pl12 inline-block w-full color-blue-on-hover border-l border--gray-light border-l--2"
+                            href="/PageLayout/guides/worldview/data-sources/"
+                          >
+                            Data sources
+                          </a>
+                        </li>
+                      </ul>
                     </li>
-                    <ul
-                      className="mb6 ml3"
-                    >
-                      <li>
-                        <a
-                          className="pl12 inline-block w-full color-blue-on-hover border-l border--gray-light border-l--2"
-                          href="/PageLayout/guides/worldview/avilable-worldviews/"
-                        >
-                          Available worldviews
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          className="pl12 inline-block w-full color-blue-on-hover border-l border--gray-light border-l--2"
-                          href="/PageLayout/guides/worldview/border-styling/"
-                        >
-                          Border styling
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          className="pl12 inline-block w-full color-blue-on-hover border-l border--gray-light border-l--2"
-                          href="/PageLayout/guides/worldview/data-sources/"
-                        >
-                          Data sources
-                        </a>
-                      </li>
-                    </ul>
                     <li
                       className="mb3"
                     >

diff --git a/src/components/page-layout/__tests__/page-layout.test.js b/src/components/page-layout/__tests__/page-layout.test.js
@@ -88,6 +88,7 @@ describe('page-layout', () => {
     let tree;
 
     beforeEach(() => {
+      /* Force snapshot at desktop view, so we can capture the NavigationAccordion for grouped guides */
       Object.defineProperty(document, 'body', {
         value: {
           clientWidth: 1000