a11y: adopt pa11y wcag2aaa preset

pa11y.mjs

@@ -12,15 +12,19 @@ import puppeteer from 'puppeteer';
 const SITEMAP_URL = 'http://localhost:3000/sitemap.xml';
 const PAGE_PATTERN = /(?<=https:\/\/svgo.dev).*?(?=<)/g;
 
-/**
- * Issues that we're ignoring from our accessibility testing for now. If the
- * context is a partial match for any pattern, it is ignored.
- */
-const IGNORED_ISSUES = [
+const IGNORED_SELECTORS = [
   // Prism code blocks.
-  /<span class="token /,
-  // Caused by an underlying bug in the Docusaurus theme.
-  /<p>Cannot read properties of undef/,
+  'pre span.token',
+  'div[class*=theme-code-block]',
+  // Doesn't expose custom CSS property to override.
+  'div[class*=playgroundHeader]',
+  // Caused by an underlying bug in the Docusaurus theme… I think!
+  'div[class^=errorBoundaryFallback]',
+];
+
+const IGNORED_MESSAGES = [
+  // Pa11y doesn't handle opacity/alpha well.
+  /contrast ratio of NaN:1/,
 ];
 
 /** @type {TestCase[]} */
@@ -50,13 +54,14 @@ const pa11yRunner = async (browser, testCase, urls) => {
 
   for (const url of urls) {
     const result = await pa11y(url, {
-      standard: 'WCAG2AA',
+      standard: 'WCAG2AAA',
       browser,
       page,
+      hideElements: IGNORED_SELECTORS.join(', '),
     });
 
     result.issues = result.issues.filter(i => {
-      return !IGNORED_ISSUES.some(re => re.test(i.context));
+      return !IGNORED_MESSAGES.some(re => re.test(i.message));
     });
 
     results.push(result);
@@ -93,7 +98,7 @@ for (const { name, result } of results) {
 
   for (const issue of issues) {
     console.error(
-      '%s > %s\n%s %s\n%s %s\n%s %s\n',
+      '%s > %s\n%s %s\n%s %s\n%s %s\n%s %s\n',
       styleText(['blue', 'bold'], name),
       styleText(['red', 'bold'], issue.code),
       styleText('yellow', 'Page URL:'),

package.json

@@ -38,7 +38,7 @@
     "typecheck": "tsc",
     "a11y": "node ./pa11y.mjs",
     "a11y:ci": "start-server-and-test 'serve build -l 3000' 'http://localhost:3000' 'yarn run a11y'",
-    "qa": "yarn run lint && yarn run typecheck",
+    "qa": "yarn run lint && yarn run typecheck && yarn run a11y",
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",

src/components/HomepageFeatures/index.module.css

@@ -31,11 +31,15 @@
   height: 100%;
   width: calc(100vw - (100vw - 100%));
   position: absolute;
-  background: linear-gradient(to bottom, #367fc126, #39aee400);
+  background: linear-gradient(to bottom,
+      hsl(208 56% 48% / 0.15),
+      hsl(199 76% 56% / 0));
   clip-path: url(#featureMobilePath);
 
   @media (prefers-color-scheme: dark) {
-    background: linear-gradient(to bottom, #39aee440, #39aee400);
+    background: linear-gradient(to bottom,
+        hsl(199 76% 56% / 0.25),
+        hsl(199 76% 56% / 0));
   }
 }
 

src/components/SvgoPreview/index.module.css

@@ -3,9 +3,9 @@
 }
 
 .highlight {
-  color: #165b37;
+  color: hsl(149 61% 22%);
 
   @media (prefers-color-scheme: dark) {
-    color: #00f174;
+    color: hsl(149 100% 47%);
   }
 }

src/css/custom.css

@@ -1,42 +1,46 @@
 :root {
   --svgo-global-width: 1200px;
-  --svgo-pill-bg-color: #cbe2f9;
-  --svgo-pill-fg-color: #0b5cad;
-  --svgo-pri-bg-color: #fff;
-  --svgo-pri-fg-color: #153243;
+  --svgo-pill-bg-color: var(--ifm-color-primary);
+  --svgo-pill-fg-color: hsl(0 0% 100%);
+  --svgo-pri-bg-color: hsl(0 0% 100%);
+  --svgo-pri-fg-color: hsl(202 52% 17%);
   --svgo-search-bg-color: var(--svgo-tir-bg-color);
-  --svgo-search-bg-hover: #dbdbdb;
-  --svgo-sec-bg-color: #f6f5f4;
-  --svgo-tir-bg-color: #e8e8e8;
-  --svgo-logo-fg-color: #1d1d1b;
-  --svgo-button-hover-background-color: #1b4055;
+  --svgo-search-bg-hover: hsl(0 0% 86%);
+  --svgo-sec-bg-color: hsl(30 10% 96%);
+  --svgo-tir-bg-color: hsl(0 0% 91%);
+  --svgo-logo-fg-color: hsl(60 4% 11%);
+  --svgo-button-hover-background-color: hsl(202 52% 22%);
+
   --ifm-background-color: var(--svgo-pri-bg-color) !important;
-  --ifm-code-font-size: 95%;
-  --ifm-color-primary: #216be2;
-  --ifm-container-width-xl: var(--svgo-global-width);
-  --ifm-footer-padding-horizontal: 1rem;
-  --ifm-navbar-background-color: var(--svgo-pri-bg-color);
-  --ifm-navbar-search-input-placeholder-color: #4e555e;
-  --ifm-navbar-shadow: 0 .5rem .5rem 0 #0a1e291a;
-  --ifm-spacing-horizontal: 1rem;
-  --search-local-hit-background: var(--svgo-sec-bg-color);
+  --ifm-code-font-size: 95% !important;
+  --ifm-color-primary: hsl(217 77% 38%) !important;
+  --ifm-container-width-xl: var(--svgo-global-width) !important;
+  --ifm-footer-padding-horizontal: 1rem !important;
+  --ifm-menu-color: hsl(214 8% 31%) !important;
+  --ifm-navbar-background-color: var(--svgo-pri-bg-color) !important;
+  --ifm-navbar-search-input-placeholder-color: var(--ifm-menu-color) !important;
+  --ifm-navbar-shadow: 0 .5rem .5rem 0 hsl(201 61% 10% / 0.1) !important;
+  --ifm-tabs-color: var(--ifm-menu-color) !important;
+  --ifm-spacing-horizontal: 1rem !important;
+  --search-local-hit-background: var(--svgo-sec-bg-color) !important;
 
   color: var(--svgo-pri-fg-color);
 
   @media (prefers-color-scheme: dark) {
-    --svgo-pill-bg-color: #0b5cad;
-    --svgo-pill-fg-color: #cbe2f9;
-    --svgo-pri-bg-color: #142631;
-    --svgo-pri-fg-color: #fff;
-    --svgo-search-bg-color: #5a6a74;
-    --svgo-search-bg-hover: #647682;
-    --svgo-sec-bg-color: #1b3241;
-    --svgo-tir-bg-color: #5a6a74;
-    --svgo-logo-fg-color: #fff;
-    --svgo-button-hover-background-color: #e6e6e6;
-    --ifm-color-primary: #389fff;
-    --ifm-navbar-search-input-placeholder-color: #bec3c9;
-    --ifm-navbar-shadow: 0 .5rem .5rem 0 #0a1e29;
+    --svgo-pill-bg-color: hsl(210 88% 29%);
+    --svgo-pill-fg-color: hsl(210 79% 95%);
+    --svgo-pri-bg-color: hsl(203 42% 12%);
+    --svgo-pri-fg-color: hsl(0 0% 100%);
+    --svgo-search-bg-hover: hsl(204 13% 45%);
+    --svgo-sec-bg-color: hsl(204 41% 18%);
+    --svgo-tir-bg-color: hsl(203 13% 40%);
+    --svgo-logo-fg-color: hsl(0 0% 100%);
+    --svgo-button-hover-background-color: hsl(0 0% 90%);
+
+    --ifm-color-primary: hsl(205 100% 67%) !important;
+    --ifm-menu-color: hsl(214 10% 87%) !important;
+    --ifm-navbar-shadow: 0 .5rem .5rem 0 hsl(201 61% 10%) !important;
+    --ifm-tabs-color: var(--svgo-pri-fg-color) !important;
   }
 }
 
@@ -46,13 +50,13 @@
 
 /* Button overrides */
 .button {
-  --ifm-button-color: var(--svgo-pri-bg-color);
-  --ifm-button-background-color: var(--svgo-pri-fg-color);
+  --ifm-button-color: var(--svgo-pri-bg-color) !important;
+  --ifm-button-background-color: var(--svgo-pri-fg-color) !important;
 }
 
 .button:hover,
 .button:focus {
-  --ifm-button-background-color: var(--svgo-button-hover-background-color);
+  --ifm-button-background-color: var(--svgo-button-hover-background-color) !important;
 }
 
 /* Navbar overrides */
@@ -93,14 +97,13 @@ nav div kbd {
 
 /* Footer overrides */
 footer {
-  --ifm-link-color: #fff;
-  --ifm-link-hover-color: #cac4ce;
-  --ifm-link-hover-decoration: none;
-  --ifm-footer-background-color: none;
-  --ifm-footer-color: #fff;
-  --ifm-footer-link-color: #fff;
-  --ifm-footer-link-hover-color: #cac4ce;
-  --ifm-footer-title-color: #fff;
+  --ifm-link-color: var(--ifm-footer-color) !important;
+  --ifm-link-hover-color: hsl(276 9% 79%) !important;
+  --ifm-link-hover-decoration: none !important;
+  --ifm-footer-color: hsl(0 0% 100%) !important;
+  --ifm-footer-link-color: var(--ifm-footer-color) !important;
+  --ifm-footer-link-hover-color: var(--ifm-link-hover-color) !important;
+  --ifm-footer-title-color: var(--ifm-footer-color) !important;
 }
 
 .designer-attribution {

src/pages/index.jsx

@@ -20,9 +20,9 @@ function HomepageHeader() {
     <header className={styles.hero}>
       <div className={clsx(styles.heroSplit, 'container')}>
         <div className={styles.infoSection}>
-          <p className={styles.tagline}>
+          <h1 className={styles.tagline}>
             SVG Optimizer for Node.js and CLI
-          </p>
+          </h1>
           <p className={styles.subtitle}>
             SVGO and its various integrations will enable you to optimize
             SVGs and serve your web applications faster.

src/pages/index.module.css

@@ -28,10 +28,14 @@
   width: 80%;
   border-radius: 100%;
   z-index: -1;
-  background: linear-gradient(to bottom, #e0ebf6, #39aee410);
+  background: linear-gradient(to bottom,
+      hsl(210 55% 92%),
+      hsl(199 76% 56% / 0.06));
 
   @media (prefers-color-scheme: dark) {
-    background: linear-gradient(to bottom, #39aee440, #39aee410);
+    background: linear-gradient(to bottom,
+        hsl(199 76% 56% / 0.25),
+        hsl(199 76% 56% / 0.06));
   }
 }
 

src/theme/DocRoot/Layout/Sidebar/styles.module.css

@@ -1,6 +1,6 @@
 :root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
+  --doc-sidebar-width: 300px !important;
+  --doc-sidebar-hidden-width: 30px !important;
 }
 
 .docSidebarContainer {

src/theme/Footer/Layout/index.module.css

@@ -7,7 +7,9 @@
 .wrapper {
   position: relative;
   padding: 6rem 1rem 2rem 1rem;
-  background: linear-gradient(to right, #0771d5, #27489f);
+  background: linear-gradient(90deg,
+      hsl(209 94% 32%),
+      hsl(224 61% 39%));
   clip-path: url(#footerMobilePath);
   overflow: hidden;
 }
@@ -38,7 +40,6 @@
 
 @media (min-width: 997px) {
   .wrapper {
-    background: linear-gradient(to right, #0771d5, #27489f);
     clip-path: url(#footerDesktopPath);
   }