fix: skip link, contain all content by landmarks (#3646)

* fix: landmarks, skip links a11y violations * fix list a11y violations * add aria-label to controller & device checkboxes * fix landmarks * use aside element for StatusBar
canonical · Feb 28, 2022 · 5cfc7dd · 5cfc7dd
1 parent 2d99bb1
commit 5cfc7dd
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 15 deletions.
diff --git a/shared/src/components/Header/Header.tsx b/shared/src/components/Header/Header.tsx
@@ -215,7 +215,6 @@ export const Header = ({
           "u-hide--hardware-menu-threshold": link.inHardwareMenu,
         })}
         key={link.url}
-        role="presentation"
       >
         {generateLink(link, {
           "aria-current": isSelected(path, link, appendNewBase)
@@ -240,7 +239,6 @@ export const Header = ({
                   "p-navigation__link p-subnav is-dark hardware-menu",
                   { "is-active": hardwareMenuOpen }
                 )}
-                role="presentation"
               >
                 {/* eslint-disable-next-line */}
                 <a
@@ -293,7 +291,7 @@ export const Header = ({
                 )}
             </li>
           )}
-          <li className="p-navigation__link" role="presentation">
+          <li className="p-navigation__link">
             {/* eslint-disable-next-line */}
             <a
               href="#"
@@ -318,9 +316,9 @@ export const Header = ({
 
   return (
     <>
-      <span className="u-off-screen">
-        <a href="#main-content">Skip to main content</a>
-      </span>
+      <a href="#main-content" className="p-link--skip">
+        Skip to main content
+      </a>
       <header id="navigation" className="p-navigation is-dark">
         <div className="p-navigation__row row">
           <div className="p-navigation__banner">

diff --git a/shared/src/components/StatusBar/StatusBar.tsx b/shared/src/components/StatusBar/StatusBar.tsx
@@ -13,7 +13,7 @@ export const StatusBar = ({
   version,
 }: Props): JSX.Element => {
   return (
-    <div className="p-status-bar">
+    <aside className="p-status-bar" aria-label="status bar">
       <div className="row">
         <div className="col-6">
           <strong data-testid="status-bar-maas-name">{maasName} MAAS</strong>:{" "}
@@ -25,7 +25,7 @@ export const StatusBar = ({
           </div>
         )}
       </div>
-    </div>
+    </aside>
   );
 };
 

diff --git a/ui/src/app/App.tsx b/ui/src/app/App.tsx
@@ -172,7 +172,7 @@ export const App = (): JSX.Element => {
         uuid={uuid as string}
         version={version}
       />
-      {content}
+      <main id="main-content">{content}</main>
       {version && (
         <Footer
           debug={debug}

diff --git a/ui/src/app/base/components/Login/Login.tsx b/ui/src/app/base/components/Login/Login.tsx
@@ -46,7 +46,7 @@ export const Login = (): JSX.Element => {
   }, [dispatch, externalAuthURL]);
 
   return (
-    <Strip element="main">
+    <Strip>
       <Row>
         <Col size={6} emptyLarge={4}>
           {externalAuthURL && error && (

diff --git a/ui/src/app/base/components/Section/Section.tsx b/ui/src/app/base/components/Section/Section.tsx
@@ -29,7 +29,7 @@ const Section = ({
         </div>
       ) : null}
       <Strip
-        element="main"
+        element="section"
         includeCol={false}
         rowClassName="section__content-wrapper"
         shallow

diff --git a/ui/src/app/base/components/Section/__snapshots__/Section.test.tsx.snap b/ui/src/app/base/components/Section/__snapshots__/Section.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Section renders 1`] = `
     </Row>
   </div>
   <Strip
-    element="main"
+    element="section"
     includeCol={false}
     rowClassName="section__content-wrapper"
     shallow={true}

diff --git a/ui/src/app/controllers/views/ControllerList/ControllerListTable/ControllerListTable.tsx b/ui/src/app/controllers/views/ControllerList/ControllerListTable/ControllerListTable.tsx
@@ -147,6 +147,7 @@ const ControllerListTable = ({
           content: (
             <div className="u-flex">
               <GroupCheckbox
+                aria-label="all controllers"
                 data-testid="all-controllers-checkbox"
                 handleGroupCheckbox={handleGroupCheckbox}
                 items={controllerIDs}

diff --git a/ui/src/app/devices/views/DeviceList/DeviceListTable/DeviceListTable.tsx b/ui/src/app/devices/views/DeviceList/DeviceListTable/DeviceListTable.tsx
@@ -158,6 +158,7 @@ const DeviceListTable = ({
           content: (
             <div className="u-flex">
               <GroupCheckbox
+                aria-label="all devices"
                 data-testid="all-devices-checkbox"
                 handleGroupCheckbox={handleGroupCheckbox}
                 items={deviceIDs}

diff --git a/ui/src/app/intro/views/IncompleteCard/__snapshots__/IncompleteCard.test.tsx.snap b/ui/src/app/intro/views/IncompleteCard/__snapshots__/IncompleteCard.test.tsx.snap
@@ -8,12 +8,12 @@ exports[`IncompleteCard renders 1`] = `
         className="section"
       >
         <Strip
-          element="main"
+          element="section"
           includeCol={false}
           rowClassName="section__content-wrapper"
           shallow={true}
         >
-          <main
+          <section
             className="p-strip is-shallow"
           >
             <Row
@@ -137,7 +137,7 @@ exports[`IncompleteCard renders 1`] = `
                 </Col>
               </div>
             </Row>
-          </main>
+          </section>
         </Strip>
       </div>
     </Section>

diff --git a/ui/src/scss/_patterns_links.scss b/ui/src/scss/_patterns_links.scss
@@ -8,4 +8,11 @@
       color: $color-dark;
     }
   }
+
+  // Make skip link work with the custom MAAS layout
+  .p-link--skip:focus {
+    position: absolute;
+    background-color: $color-x-light;
+    padding: $sph-inner;
+  }
 }