Enforce accessibility-related rules with stylelint-a11y (#2) (#3)

Author: thibaudcolas

CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## Unreleased
 
+### Features
+
+- Enforce accessibility-related rules with [stylelint-a11y](https://github.com/YozhikM/stylelint-a11y) ([#2](https://github.com/torchbox/stylelint-config-torchbox/issues/2)).
+
+### BREAKING CHANGES
+
+- Most if not all of the rules changes in this release are breaking changes. Expect breakage on every minor release until the config reaches v1.0.0.
+
 ## [0.3.0](https://github.com/torchbox/stylelint-config-torchbox/compare/v0.2.0...v0.3.0) (2019-09-23)
 
 ### Features

README.md

@@ -39,6 +39,7 @@ To get the most out of this config, it is assumed that projects have the followi
 >
 > - [`stylelint-scss`](https://github.com/kristerkari/stylelint-scss)
 > - [`stylelint-order`](https://github.com/hudochenkov/stylelint-order)
+> - [`stylelint-a11y`](https://github.com/YozhikM/stylelint-a11y)
 > - [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard)
 > - [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier)
 
@@ -69,6 +70,11 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`scss/dollar-variable-no-missing-interpolation`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/at-mixin-argumentless-call-parentheses`](https://github.com/kristerkari/stylelint-scss#readme): `always`
 - [`order/order`](https://github.com/hudochenkov/stylelint-order): `dollar-variables, custom-properties, type: at-rule, hasBlock: false, declarations`
+- [`a11y/content-property-no-static-value`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/no-obsolete-attribute`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/no-obsolete-element`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/no-text-align-justify`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/no-outline-none`](https://github.com/YozhikM/stylelint-a11y#readme)
 
 #### Rules of `stylelint-config-standard`
 

config.js

@@ -3,7 +3,7 @@
 // See https://stylelint.io/user-guide/rules/.
 module.exports = {
     extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
-    plugins: ['stylelint-scss', 'stylelint-order'],
+    plugins: ['stylelint-scss', 'stylelint-order', 'stylelint-a11y'],
     rules: {
         'color-named': 'never',
         'number-leading-zero': 'always',
@@ -38,5 +38,10 @@ module.exports = {
             { type: 'at-rule', hasBlock: false },
             'declarations',
         ],
+        'a11y/content-property-no-static-value': true,
+        'a11y/no-obsolete-attribute': true,
+        'a11y/no-obsolete-element': true,
+        'a11y/no-text-align-justify': true,
+        'a11y/no-outline-none': true,
     },
 };

package-lock.json

@@ -33,6 +33,7 @@
     "stylelint-find-new-rules": "1.0.2"
   },
   "dependencies": {
+    "stylelint-a11y": "^1.2.1",
     "stylelint-config-prettier": "^5.2.0",
     "stylelint-config-standard": "^18.3.0",
     "stylelint-order": "^3.1.1",

package.json

@@ -2,6 +2,21 @@
 
 exports[`semver - should those tests break, consider releasing a new major version of the package config contents 1`] = `
 Object {
+  "a11y/content-property-no-static-value": Array [
+    true,
+  ],
+  "a11y/no-obsolete-attribute": Array [
+    true,
+  ],
+  "a11y/no-obsolete-element": Array [
+    true,
+  ],
+  "a11y/no-outline-none": Array [
+    true,
+  ],
+  "a11y/no-text-align-justify": Array [
+    true,
+  ],
   "at-rule-empty-line-before": null,
   "at-rule-name-case": null,
   "at-rule-name-newline-after": null,

src/__snapshots__/semver.test.js.snap

@@ -7,6 +7,7 @@ describe('semver - should those tests break, consider releasing a new major vers
     it('dependencies', () => {
         expect(pkg.dependencies).toMatchInlineSnapshot(`
             Object {
+              "stylelint-a11y": "^1.2.1",
               "stylelint-config-prettier": "^5.2.0",
               "stylelint-config-standard": "^18.3.0",
               "stylelint-order": "^3.1.1",

src/semver.test.js

@@ -62,6 +62,13 @@ const tooOpinionated = [
     'scss/dollar-variable-default',
     'scss/no-dollar-variables',
     'order/properties-alphabetical-order',
+    'a11y/font-size-is-readable',
+    'a11y/line-height-is-vertical-rhythmed',
+    'a11y/media-prefers-color-scheme',
+    'a11y/media-prefers-reduced-motion',
+    'a11y/no-display-none',
+    'a11y/no-spread-text',
+    'a11y/selector-pseudo-class-focus',
 ];
 
 const overridenByOtherRule = [