test(stylelint): add a11y rules to stylelint (#10780)

* test(stylelint): add a11y rules to stylelint * chore(stylelint): fix lint violations Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Josh Black <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Feb 28, 2022 · 2c28ad3 · 2c28ad3
1 parent 53413ac
commit 2c28ad3
Show file tree

Hide file tree

Showing 25 changed files with 155 additions and 0 deletions.
diff --git a/.yarn/cache/stylelint-a11y-npm-1.2.3-ecffc7ded5-e6548c53ed.zip b/.yarn/cache/stylelint-a11y-npm-1.2.3-ecffc7ded5-e6548c53ed.zip
diff --git a/config/stylelint-config-carbon/index.js b/config/stylelint-config-carbon/index.js
@@ -16,6 +16,7 @@ module.exports = {
     require.resolve('./rules/possible-errors'),
     require.resolve('./rules/limit-language-features'),
     require.resolve('./rules/stylistic-issues'),
+    require.resolve('./plugins/a11y'),
     require.resolve('./plugins/prettier'),
     require.resolve('./plugins/scss'),
   ],

diff --git a/config/stylelint-config-carbon/package.json b/config/stylelint-config-carbon/package.json
@@ -26,6 +26,7 @@
     "stylelint": "^14.3.0"
   },
   "dependencies": {
+    "stylelint-a11y": "^1.2.3",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^24.0.0",

diff --git a/config/stylelint-config-carbon/plugins/a11y.js b/config/stylelint-config-carbon/plugins/a11y.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['stylelint-a11y'],
+  rules: {
+    'a11y/media-prefers-reduced-motion': true,
+  },
+};
diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -98,6 +98,10 @@
       content: '';
       opacity: 0;
       transition: opacity $duration--fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

diff --git a/packages/components/src/components/loading/_mixins.scss b/packages/components/src/components/loading/_mixins.scss
@@ -25,6 +25,10 @@
     animation-duration: 10ms;
     animation-name: init-stroke;
     animation-timing-function: $carbon--standard-easing;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
@@ -42,5 +46,9 @@
     animation-fill-mode: forwards;
     animation-name: stroke-end;
     animation-timing-function: $carbon--ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
@@ -43,6 +43,10 @@
       transition: opacity $duration--moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?

diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -110,6 +110,10 @@
       content: '';
       transition: background-color $duration--fast-02
         motion(entrance, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

diff --git a/packages/components/src/components/pagination-nav/_pagination-nav.scss b/packages/components/src/components/pagination-nav/_pagination-nav.scss
@@ -33,6 +33,10 @@
       content: '';
       opacity: 0;
       transition: width $duration--fast-02 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
@@ -147,6 +147,10 @@
       content: '';
       transition: background-color $duration--fast-02
         motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover {

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -148,6 +148,10 @@
       transform-origin: center;
       transition: $duration--fast-02 motion(standard, productive);
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
         screen and (prefers-contrast) {

diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
@@ -62,6 +62,10 @@
         border-radius: 50%;
         content: '';
         transition: transform $duration--fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -197,6 +201,10 @@
         transition: box-shadow $duration--fast-01 motion(exit, productive),
           background-color $duration--fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -311,6 +319,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration--fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -430,6 +442,10 @@
         transition: box-shadow $duration--fast-01 motion(exit, productive),
           background-color $duration--fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -529,6 +545,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration--fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -38,6 +38,10 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity $duration--fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &::before {

diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -123,6 +123,10 @@
   &::before,
   &::after {
     transition: opacity $duration--fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &.#{$prefix}--tooltip--a11y::before,

diff --git a/packages/styles/scss/components/breadcrumb/_breadcrumb.scss b/packages/styles/scss/components/breadcrumb/_breadcrumb.scss
@@ -97,6 +97,10 @@
       content: '';
       opacity: 0;
       transition: opacity $duration-fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss
@@ -138,6 +138,10 @@
 
   .flatpickr-calendar.animate.open {
     animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 
   .flatpickr-calendar.inline {
@@ -230,6 +234,10 @@
     // Windows HCM fix
     @include high-contrast-mode('icon-fill');
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     &:hover {
       background-color: $background-hover;
     }

diff --git a/packages/styles/scss/components/loading/_animation.scss b/packages/styles/scss/components/loading/_animation.scss
@@ -20,6 +20,10 @@
     animation-duration: 10ms;
     animation-name: init-stroke;
     animation-timing-function: motion.$standard-easing;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
@@ -35,5 +39,9 @@
     animation-fill-mode: forwards;
     animation-name: stroke-end;
     animation-timing-function: motion.$ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -45,6 +45,10 @@
       transition: opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?

diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
@@ -111,6 +111,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(entrance, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

diff --git a/packages/styles/scss/components/pagination-nav/_mixins.scss b/packages/styles/scss/components/pagination-nav/_mixins.scss
@@ -26,6 +26,10 @@
       content: '';
       opacity: 0;
       transition: width $duration-fast-02 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss
@@ -151,6 +151,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover {

diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
@@ -144,6 +144,10 @@
       transform-origin: center;
       transition: $duration-fast-02 motion(standard, productive);
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
         screen and (prefers-contrast) {

diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss
@@ -64,6 +64,10 @@
         border-radius: 50%;
         content: '';
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -199,6 +203,10 @@
         transition: box-shadow $duration-fast-01 motion(exit, productive),
           background-color $duration-fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -215,6 +223,10 @@
         content: '';
         cursor: pointer;
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -313,6 +325,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -432,6 +448,10 @@
         transition: box-shadow $duration-fast-01 motion(exit, productive),
           background-color $duration-fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -531,6 +551,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 

diff --git a/packages/styles/scss/utilities/_tooltip.scss b/packages/styles/scss/utilities/_tooltip.scss
@@ -127,6 +127,10 @@
   &::before,
   &::after {
     transition: opacity $duration-fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &.#{$prefix}--tooltip--a11y::before,