chore/Issue-119: Setup project with Stylelint a11y plugin

package.json

@@ -42,6 +42,7 @@
     "@babel/eslint-parser": "^7.25.7",
     "@babel/plugin-syntax-import-assertions": "^7.25.7",
     "@chromatic-com/storybook": "^1.3.1",
+    "@double-great/stylelint-a11y": "^3.0.2",
     "@eslint/js": "^9.11.1",
     "@eslint/json": "^0.5.0",
     "@eslint/markdown": "^6.2.0",
@@ -73,7 +74,7 @@
     "rimraf": "^5.0.5",
     "storybook": "^8.0.6",
     "storybook-addon-fetch-mock": "^2.0.1",
-    "stylelint": "^16.4.0",
+    "stylelint": "^16.10.0",
     "stylelint-config-recommended": "^14.0.1",
     "vite": "^5.2.8"
   },

src/components/blog-posts-list/blog-posts-list.module.css

@@ -20,7 +20,8 @@
   text-decoration: none;
 }
 
-.postsListItemContentLink:hover {
+.postsListItemContentLink:hover,
+.postsListItemContentLink:focus {
   text-decoration: none;
 }
 

src/components/capabilities/capabilities.css

@@ -25,12 +25,14 @@
   stroke: var(--color-gray);
 }
 
-.section:hover {
+.section:hover,
+.section:focus {
   border: 2px dotted var(--color-accent);
 }
 
 .active strong,
-.section:hover strong {
+.section:hover strong,
+.section:focus strong {
   font-family: var(--font-primary-bold);
   color: var(--color-white);
 }
@@ -117,7 +119,8 @@ pre {
     margin-right: var(--size-px-4);
   }
 
-  .section:hover {
+  .section:hover,
+  .section:focus {
     padding: var(--size-px-2);
   }
 }

src/components/get-started/get-started.module.css

@@ -62,13 +62,15 @@
   text-decoration: none;
 }
 
-.buttonBlitz:hover {
+.buttonBlitz:hover,
+.buttonBlitz:focus {
   background-color: var(--color-gray);
   text-decoration: none;
   color: var(--color-black) !important;
 }
 
-.buttonStarted:hover {
+.buttonStarted:hover,
+.buttonStarted:focus {
   background-color: var(--color-accent);
   text-decoration: none;
   color: var(--color-black) !important;

src/components/header/header.module.css

@@ -50,7 +50,8 @@
   text-decoration: none;
 }
 
-.navBarMenuItem a:hover {
+.navBarMenuItem a:hover,
+.navBarMenuItem a:focus {
   text-decoration: underline;
 }
 

src/components/hero-banner/hero-banner.module.css

@@ -56,13 +56,15 @@
   text-decoration: none;
 }
 
-.buttonBlitz:hover {
+.buttonBlitz:hover,
+.buttonBlitz:focus {
   background-color: var(--color-secondary);
   color: var(--color-white) !important;
   text-decoration: none;
 }
 
-.buttonStarted:hover {
+.buttonStarted:hover,
+.buttonStarted:focus {
   background-color: var(--color-accent);
   text-decoration: none;
   color: var(--color-black) !important;

src/components/run-anywhere/run-anywhere.module.css

@@ -61,7 +61,8 @@
   color: var(--color-white);
 }
 
-.platformBox a:hover {
+.platformBox a:hover,
+.platformBox a:focus {
   color: var(--color-black);
   background-color: var(--color-white);
   text-decoration: none;

src/components/side-nav/side-nav.module.css

@@ -28,9 +28,11 @@
   box-shadow: var(--shadow-3);
   color: var(--color-black);
 
-  & #indicator {
-    display: inline-block;
-    transition: transform 1s ease;
+  @media (prefers-reduced-motion: no-preference) {
+    & #indicator {
+      display: inline-block;
+      transition: transform 1s ease;
+    }
   }
 }
 
@@ -71,7 +73,8 @@
   }
 
   & a.active,
-  & a:hover {
+  & a:hover,
+  & a:focus {
     text-decoration: underline;
     opacity: 0.7;
   }
@@ -85,7 +88,8 @@
   list-style: none;
   margin: 0 0 var(--size-6) 0;
 
-  & a:hover {
+  & a:hover,
+  & a:focus {
     opacity: 0.7;
   }
 }

src/components/table-of-contents/table-of-contents.module.css

@@ -38,9 +38,11 @@
   border-radius: var(--radius-2);
   box-shadow: var(--shadow-3);
 
-  & #indicator {
-    display: inline-block;
-    transition: transform 1s ease;
+  @media (prefers-reduced-motion: no-preference) {
+    & #indicator {
+      display: inline-block;
+      transition: transform 1s ease;
+    }
   }
 }
 
@@ -89,7 +91,8 @@
       font-size: var(--font-size-1);
     }
 
-    & a:hover {
+    & a:hover,
+    & a:focus {
       opacity: 0.7;
     }
   }

src/styles/theme.css

@@ -55,7 +55,8 @@ a:visited {
   color: var(--color-primary);
 }
 
-a:hover {
+a:hover,
+a:focus {
   text-decoration: underline;
   background-color: transparent;
 }
@@ -120,8 +121,11 @@ h4 > a > span.icon {
 }
 
 h2:hover > a > span.icon,
+h2:focus > a > span.icon,
 h3:hover > a > span.icon,
-h4:hover > a > span.icon {
+h3:focus > a > span.icon,
+h4:hover > a > span.icon,
+h4:focus > a > span.icon {
   opacity: 1;
 }
 

stylelint.config.js

@@ -1,3 +1,9 @@
 export default {
   extends: ["stylelint-config-recommended"],
+  plugins: ["@double-great/stylelint-a11y"], // -> no `extends` https://github.com/double-great/stylelint-a11y/issues/65
+  rules: {
+    "a11y/media-prefers-reduced-motion": true,
+    "a11y/no-outline-none": true,
+    "a11y/selector-pseudo-class-focus": true,
+  },
 };