feat: ally plugin

.stylelintrc.js

@@ -10,6 +10,7 @@ module.exports = {
 
   extends: [
     'stylelint-config-standard',
+    require.resolve('./plugins/a11y.js'),
     require.resolve('./plugins/scss.js'),
     require.resolve('./plugins/order.js'),
     require.resolve('./plugins/prettier.js'),

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "stylelint": "^13.9.0",
+    "stylelint-a11y": "^1.2.3",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",

plugins/a11y.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: ['stylelint-a11y'],
+
+  rules: {
+    'a11y/media-prefers-reduced-motion': true,
+    'a11y/no-obsolete-element': true,
+    'a11y/no-outline-none': true,
+    'a11y/no-text-align-justify': true,
+    'a11y/selector-pseudo-class-focus': true,
+  },
+};

test/scss.scss

@@ -18,6 +18,26 @@
   font-size: 16px;
 }
 
+@media screen and (prefers-reduced-motion: reduce) {
+  .sdf {
+    animation: none;
+  }
+}
+
+.sdf {
+  animation-name: skew;
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+a {
+  &:hover,
+  &:focus {
+  }
+}
+
 .ui-button {
   @include variables;
 
@@ -94,7 +114,8 @@
         );
       }
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: var(
           --ui-button-color--h,
           var(--ui-icon-default-background-color)
@@ -116,8 +137,7 @@
   & ::v-deep {
   }
 
-  &:active,
-  &:focus {
+  &:active {
     background-color: var(
       --ui-button-color--p,
       var(--ui-icon-default-background-color)
@@ -130,12 +150,14 @@
     opacity: 0.5;
 
     &:hover,
+    &:focus,
     &:active {
       background-color: var(--ui-button-color);
     }
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     background-color: var(
       --ui-button-color--h,
       var(--ui-icon-default-background-color)