@double-great/stylelint-a11y 2.0.0

package/src/rules/no-obsolete-attribute/obsoleteAttributes.js

@@ -0,0 +1,204 @@
+export const obsoleteAttributes = new Set([
+  '[dropzone]',
+  'a[charset]',
+  'link[charset]',
+  'a[coords]',
+  'a[shape]',
+  'a[methods]',
+  'link[methods]',
+  'a[name]',
+  'option[name]',
+  'embed[name]',
+  'img[name]',
+  'a[rev]',
+  'link[rev]',
+  'a[urn]',
+  'link[urn]',
+  'form[accept]',
+  'head[profile]',
+  'html[version]',
+  'link[target]',
+  'param[type]',
+  'param[valuetype]',
+  'script[language]',
+  'script[event]',
+  'script[for]',
+  'table[datapagesize]',
+  'table[summary]',
+  'td[axis]',
+  'th[axis]',
+  'td[scope]',
+  'td[abbr]',
+  'a[datasrc]',
+  'applet[datasrc]',
+  'button[datasrc]',
+  'div[datasrc]',
+  'frame[datasrc]',
+  'label[datasrc]',
+  'legend[datasrc]',
+  'marquee[datasrc]',
+  'option[datasrc]',
+  'span[datasrc]',
+  'table[datasrc]',
+  'a[datafld]',
+  'applet[datafld]',
+  'button[datafld]',
+  'div[datafld]',
+  'fieldset[datafld]',
+  'frame[datafld]',
+  'label[datafld]',
+  'legend[datafld]',
+  'marquee[datafld]',
+  'param[datafld]',
+  'span[datafld]',
+  'button[dataformatas]',
+  'div[dataformatas]',
+  'label[dataformatas]',
+  'legend[dataformatas]',
+  'marquee[dataformatas]',
+  'option[dataformatas]',
+  'span[dataformatas]',
+  'table[dataformatas]',
+  'body[alink]',
+  'body[bgcolor]',
+  'table[bgcolor]',
+  'td[bgcolor]',
+  'th[bgcolor]',
+  'tr[bgcolor]',
+  'body[link]',
+  'body[marginbottom]',
+  'body[marginheight]',
+  'body[marginleft]',
+  'body[marginright]',
+  'body[margintop]',
+  'body[marginwidth]',
+  'body[text]',
+  'body[vlink]',
+  'col[char]',
+  'tbody[char]',
+  'thead[char]',
+  'tfoot[char]',
+  'td[char]',
+  'th[char]',
+  'tr[char]',
+  'col[charoff]',
+  'tbody[charoff]',
+  'thead[charoff]',
+  'tfoot[charoff]',
+  'td[charoff]',
+  'th[charoff]',
+  'tr[charoff]',
+  'col[valign]',
+  'tbody[valign]',
+  'thead[valign]',
+  'tfoot[valign]',
+  'td[valign]',
+  'th[valign]',
+  'tr[valign]',
+  'col[width]',
+  'pre[width]',
+  'table[width]',
+  'td[width]',
+  'th[width]',
+  'dl[compact]',
+  'ol[compact]',
+  'ul[compact]',
+  'h1[align]',
+  'h2[align]',
+  'h3[align]',
+  'h4[align]',
+  'h5[align]',
+  'h6[align]',
+  'caption[align]',
+  'col[align]',
+  'div[align]',
+  'legend[align]',
+  'p[align]',
+  'table[align]',
+  'tbody[align]',
+  'thead[align]',
+  'tfoot[align]',
+  'td[align]',
+  'th[align]',
+  'tr[align]',
+  'li[type]',
+  'ul[type]',
+  'table[cellpadding]',
+  'table[cellspacing]',
+  'table[frame]',
+  'table[rules]',
+  'td[height]',
+  'th[height]',
+  'td[nowrap]',
+  'th[nowrap]',
+  'body[background]',
+  'table[background]',
+  'thead[background]',
+  'tbody[background]',
+  'tfoot[background]',
+  'tr[background]',
+  'td[background]',
+  'th[background]',
+  'embed[name]',
+  'img[name]',
+  'area[nohref]',
+  'area[type]',
+  'area[hreflang]',
+  'input[ismap]',
+  'input[usemap]',
+  'iframe[longdesc]',
+  'img[longdesc]',
+  'img[lowsrc]',
+  'object[archive]',
+  'object[classid]',
+  'object[code]',
+  'object[codebase]',
+  'object[codetype]',
+  'object[declare]',
+  'object[standby]',
+  'iframe[datasrc]',
+  'img[datasrc]',
+  'input[datasrc]',
+  'object[datasrc]',
+  'select[datasrc]',
+  'textarea[datasrc]',
+  'iframe[datafld]',
+  'img[datafld]',
+  'input[datafld]',
+  'object[datafld]',
+  'select[datafld]',
+  'textarea[datafld]',
+  'input[dataformatas]',
+  'object[dataformatas]',
+  'select[dataformatas]',
+  'iframe[marginheight]',
+  'iframe[marginwidth]',
+  'br[clear]',
+  'hr[width]',
+  'embed[hspace]',
+  'iframe[hspace]',
+  'input[hspace]',
+  'img[hspace]',
+  'object[hspace]',
+  'embed[vspace]',
+  'iframe[vspace]',
+  'input[vspace]',
+  'img[vspace]',
+  'object[vspace]',
+  'hr[color]',
+  'hr[noshade]',
+  'hr[size]',
+  'iframe[align]',
+  'embed[align]',
+  'hr[align]',
+  'input[align]',
+  'img[align]',
+  'object[align]',
+  'iframe[allowtransparency]',
+  'iframe[frameborder]',
+  'iframe[framespacing]',
+  'iframe[scrolling]',
+  'img[border]',
+  'object[border]',
+  'input[inputmode]',
+]);

package/src/rules/no-obsolete-element/README.md

@@ -0,0 +1,20 @@
+# no-obsolete-element
+
+Disallow obsolete selectors using.
+
+**Sources:**
+
+- [W3G Obsolete features](https://www.w3.org/TR/html5/obsolete.html#obsolete)
+- [W3G Features removed](https://www.w3.org/TR/html52/changes.html#features-removed)
+
+## Options
+
+### true
+
+The following pattern are considered violations:
+
+```css
+blink {
+  color: pink;
+}
+```

package/src/rules/no-obsolete-element/__tests__/index.js

@@ -0,0 +1,33 @@
+import { ruleName, messages } from '../index';
+
+testRule({
+  ruleName,
+  config: [true],
+
+  accept: [
+    {
+      code: '.foo { color: pink; }',
+    },
+  ],
+
+  reject: [
+    {
+      code: 'blink { color: pink; }',
+      message: messages.expected('blink'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: 'applet, a { color: pink; }',
+      message: messages.expected('applet, a'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: 'applet, blink { color: pink; }',
+      message: messages.expected('applet, blink'),
+      line: 1,
+      column: 3,
+    },
+  ],
+});

package/src/rules/no-obsolete-element/index.js

@@ -0,0 +1,57 @@
+import { utils } from 'stylelint';
+import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule';
+import { obsoleteElements } from './obsoleteElements';
+
+export const ruleName = 'a11y/no-obsolete-element';
+
+export const messages = utils.ruleMessages(ruleName, {
+  expected: (selector) => `Unexpected using obsolete selector "${selector}"`,
+});
+
+function check(selector, node) {
+  if (node.type !== 'rule') {
+    return true;
+  }
+  return !node.selectors.some((sel) => {
+    return obsoleteElements.has(sel);
+  });
+}
+
+export default function (actual) {
+  return (root, result) => {
+    const validOptions = utils.validateOptions(result, ruleName, { actual });
+
+    if (!validOptions || !actual) {
+      return;
+    }
+
+    root.walk((node) => {
+      let selector = null;
+
+      if (node.type === 'rule') {
+        if (!isStandardSyntaxRule(node)) {
+          return;
+        }
+        selector = node.selector;
+      } else if (node.type === 'atrule' && node.name.toLowerCase() === 'page' && node.params) {
+        selector = node.params;
+      }
+
+      if (!selector) {
+        return;
+      }
+
+      const isAccepted = check(selector, node);
+
+      if (!isAccepted) {
+        utils.report({
+          index: node.lastEach,
+          message: messages.expected(selector),
+          node,
+          ruleName,
+          result,
+        });
+      }
+    });
+  };
+}

package/src/rules/no-obsolete-element/obsoleteElements.js

@@ -0,0 +1,32 @@
+export const obsoleteElements = new Set([
+  'applet',
+  'acronym',
+  'bgsound',
+  'dir',
+  'frame',
+  'frameset',
+  'noframes',
+  'hgroup',
+  'isindex',
+  'listing',
+  'nextid',
+  'noembed',
+  'plaintext',
+  'rb',
+  'rtc',
+  'strike',
+  'xmp',
+  'basefont',
+  'big',
+  'blink',
+  'center',
+  'font',
+  'marquee',
+  'multicol',
+  'nobr',
+  'spacer',
+  'tt',
+  'keygen',
+  'menu',
+  'menuitem',
+]);

package/src/rules/no-outline-none/README.md

@@ -0,0 +1,84 @@
+# no-outline-none
+
+Disallow outline clearing.
+
+Why? [Because](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible)
+
+**Sources:**
+
+- [DON'T DO IT!](http://www.outlinenone.com/)
+- [a11yproject](https://a11yproject.com/posts/never-remove-css-outlines/)
+- [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
+
+## Options
+
+### true
+
+The following pattern are considered violations:
+
+```css
+.foo:focus {
+  outline: 0;
+}
+```
+
+```css
+.bar:focus {
+  outline: none;
+}
+```
+
+```css
+.baz:focus {
+  outline: none;
+  border: transparent;
+}
+```
+
+```scss
+.quux {
+  .quuux:focus {
+    outline: 0;
+  }
+}
+```
+
+The following patterns are _not_ considered violations:
+
+```css
+.foo {
+  outline: 0;
+}
+```
+
+```scss
+$primary-color: #333;
+.bar:focus {
+  outline: 1px solid $primary-color;
+}
+```
+
+```css
+.baz:focus {
+  outline: 1px solid #333;
+}
+```
+
+```css
+.quux:focus {
+  outline: 0;
+  border: 1px solid #000;
+}
+```
+
+## Note
+
+[Similar rule](https://github.com/stylelint/stylelint/blob/master/lib/rules/declaration-property-value-blacklist/README.md) is in [Stylelint](https://github.com/stylelint/stylelint), but it triggers another error message and does not check for `:focus` selector and `border` property.
+
+```json
+{
+  "declaration-property-value-blacklist": {
+    "outline": ["none", "0"]
+  }
+}
+```

package/src/rules/no-outline-none/__tests__/index.js

@@ -0,0 +1,51 @@
+import { messages, ruleName } from '../index';
+
+testRule({
+  ruleName,
+  config: [true],
+
+  accept: [
+    {
+      code: '.foo { outline: 0; }',
+    },
+    {
+      code: '$primary-color: #333; .bar:focus { outline: 1px solid $primary-color; }',
+    },
+    {
+      code: '.baz:focus { outline: none; border-color: #333; }',
+    },
+    {
+      code: '.quux:focus { outline: 0; border: 1px solid #000; }',
+    },
+    {
+      code: '.quuux:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }',
+    },
+  ],
+
+  reject: [
+    {
+      code: '.foo1:focus { outline: none; } .foo2:focus { outline: 1px solid red; }',
+      message: messages.expected('.foo1:focus'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: '.bar:focus { outline: none; }',
+      message: messages.expected('.bar:focus'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: '.baz:focus { outline: none; border: transparent; }',
+      message: messages.expected('.baz:focus'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: '.quux { .quuux:focus { outline: 0; } }',
+      message: messages.expected('.quuux:focus'),
+      line: 1,
+      column: 11,
+    },
+  ],
+});

package/src/rules/no-outline-none/index.js

@@ -0,0 +1,75 @@
+import { utils } from 'stylelint';
+import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule';
+
+export const ruleName = 'a11y/no-outline-none';
+
+export const messages = utils.ruleMessages(ruleName, {
+  expected: (selector) => `Unexpected using "outline" property in ${selector}`,
+});
+
+function check(selector, node) {
+  if (node.type !== 'rule') {
+    return true;
+  }
+
+  if (!selector.match(/:focus/gi)) {
+    return true;
+  }
+
+  const hasEmptyOutline = node.nodes.some(
+    (o) =>
+      o.type === 'decl' &&
+      o.prop.toLowerCase() === 'outline' &&
+      ['0', 'none'].indexOf(o.value.toLowerCase()) >= 0
+  );
+
+  if (hasEmptyOutline) {
+    return node.nodes.some(
+      (o) =>
+        o.type === 'decl' &&
+        ['border', 'border-color', 'box-shadow'].indexOf(o.prop.toLowerCase()) >= 0 &&
+        !o.value.toLowerCase().match(/transparent/gi)
+    );
+  }
+
+  return true;
+}
+
+export default function (actual) {
+  return (root, result) => {
+    const validOptions = utils.validateOptions(result, ruleName, { actual });
+
+    if (!validOptions || !actual) {
+      return;
+    }
+
+    root.walk((node) => {
+      let selector = null;
+
+      if (node.type === 'rule') {
+        if (!isStandardSyntaxRule(node)) {
+          return;
+        }
+        selector = node.selector;
+      } else if (node.type === 'atrule' && node.name.toLowerCase() === 'page' && node.params) {
+        selector = node.params;
+      }
+
+      if (!selector) {
+        return;
+      }
+
+      const isAccepted = check(selector, node);
+
+      if (!isAccepted) {
+        utils.report({
+          index: node.lastEach,
+          message: messages.expected(selector),
+          node,
+          ruleName,
+          result,
+        });
+      }
+    });
+  };
+}

package/src/rules/no-spread-text/README.md

@@ -0,0 +1,50 @@
+# no-spread-text
+
+Require width of text greater than 45 characters and less than 80 characters.
+
+**Sources:**
+
+- [Ryan Mack](https://ryanmack.me/quick-measure)
+- [Manuel Matuzovic](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939)
+
+> Warning! This rule use some heuristics for define css node with styles for text. It may be unstable.
+
+## Options
+
+### true
+
+The following pattern are considered violations:
+
+```css
+.foo {
+  text-transform: lowercase;
+  max-width: 40ch;
+}
+```
+
+```css
+.foo {
+  line-height: 1.8;
+  max-width: 82ch;
+}
+```
+
+The following patterns are _not_ considered violations:
+
+```css
+.foo {
+  max-width: 65ch;
+}
+```
+
+```css
+.foo {
+  max-width: 82ch;
+}
+```
+
+```css
+.foo {
+  max-width: 100px;
+}
+```

package/src/rules/no-spread-text/__tests__/index.js

@@ -0,0 +1,42 @@
+import { messages, ruleName } from '../index';
+
+testRule({
+  ruleName,
+  config: [true],
+
+  accept: [
+    {
+      code: '.foo { }',
+    },
+    {
+      code: '.foo { display: flex; max-width: 82ch; }',
+    },
+    {
+      code: '.foo { height: 100%; max-width: 82ch; }',
+    },
+    {
+      code: '.foo { text-transform: lowercase; max-width: 65ch; }',
+    },
+    {
+      code: '.bar { word-spacing: -5px; max-width: 100px; }',
+    },
+    {
+      code: '.baz { MAX-WIDTH: 63CH; }',
+    },
+  ],
+
+  reject: [
+    {
+      code: '.foo { text-transform: lowercase; max-width: 40ch; }',
+      message: messages.expected('.foo'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: '.bar { LINE-HEIGHT: 1.8; MAX-WIDTH: 81CH; }',
+      message: messages.expected('.bar'),
+      line: 1,
+      column: 3,
+    },
+  ],
+});