@double-great/stylelint-a11y 2.0.0

package/src/rules/media-prefers-color-scheme/index.js

@@ -0,0 +1,115 @@
+import { utils } from 'stylelint';
+import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule';
+import isStandardSyntaxSelector from 'stylelint/lib/utils/isStandardSyntaxSelector';
+import isStandardSyntaxAtRule from 'stylelint/lib/utils/isStandardSyntaxAtRule';
+import isCustomSelector from 'stylelint/lib/utils/isCustomSelector';
+
+export const ruleName = 'a11y/media-prefers-color-scheme';
+
+export const messages = utils.ruleMessages(ruleName, {
+  expected: (selector) => `Expected ${selector} is used with @media (prefers-color-scheme)`,
+});
+const targetProperties = ['background-color', 'color'];
+
+function check(selector, node) {
+  const declarations = node.nodes;
+  const params = node.parent.params;
+  const parentNodes = node.parent.nodes;
+
+  if (!declarations) return true;
+
+  if (!isStandardSyntaxSelector(selector)) {
+    return true;
+  }
+
+  if (isCustomSelector(selector)) {
+    return true;
+  }
+
+  let currentSelector = null;
+
+  const declarationsIsMatched = declarations.some((declaration) => {
+    const noMatchedParams = !params || params.indexOf('prefers-color-scheme') === -1;
+    const index = targetProperties.indexOf(declaration.prop);
+    currentSelector = targetProperties[index];
+
+    return index >= 0 && noMatchedParams;
+  });
+
+  if (!declarationsIsMatched) return true;
+
+  if (declarationsIsMatched) {
+    const parentMatchedNode = parentNodes.some((parentNode) => {
+      if (!parentNode || !parentNode.nodes) return;
+      return parentNode.nodes.some((childrenNode) => {
+        const childrenNodes = childrenNode.nodes;
+
+        if (
+          !parentNode.params ||
+          !Array.isArray(childrenNodes) ||
+          selector !== childrenNode.selector
+        )
+          return false;
+
+        const matchedChildrenNodes = childrenNodes.some((declaration) => {
+          const index = targetProperties.indexOf(declaration.prop);
+          if (currentSelector !== targetProperties[index]) return false;
+
+          return index >= 0 && parentNode.params.indexOf('prefers-color-scheme') >= 0;
+        });
+
+        return matchedChildrenNodes;
+      });
+    });
+
+    if (!parentMatchedNode) return false;
+
+    return true;
+  }
+
+  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 === 'page' && node.params) {
+        if (!isStandardSyntaxAtRule(node)) {
+          return;
+        }
+
+        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/media-prefers-reduced-motion/README.md

@@ -0,0 +1,60 @@
+# media-prefers-reduced-motion
+
+Require certain styles if the animation or transition in media features.
+
+Safari 10.1 [introduced](https://webkit.org/blog/7551/responsive-design-for-motion/) the Reduced Motion Media Query. It is a non-vendor-prefixed declaration that allows developers to "create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences."
+
+The `--fix` option on the command line can automatically fix all of the problems reported by this rule.
+
+## Options
+
+### true
+
+The following pattern are considered violations:
+
+```css
+.foo {
+  animation: 1s ease-in;
+}
+```
+
+```css
+.bar {
+  animation-name: skew;
+}
+@media screen and (prefers-reduced-motion) {
+  .bar {
+    transition: none;
+  }
+}
+```
+
+The following patterns are _not_ considered violations:
+
+```css
+div {
+  transition: none;
+}
+```
+
+```css
+.foo {
+  transition: none;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .foo {
+    transition: none;
+  }
+}
+```
+
+```css
+.bar {
+  animation: none;
+}
+@media screen and (prefers-reduced-motion) {
+  .bar {
+    animation: none;
+  }
+}
+```

package/src/rules/media-prefers-reduced-motion/__tests__/index.js

@@ -0,0 +1,55 @@
+import { messages, ruleName } from '../index';
+
+testRule({
+  ruleName,
+  config: [true],
+  fix: true,
+
+  accept: [
+    {
+      code: 'a { }',
+    },
+    {
+      code: 'div { transition: none; }',
+    },
+    {
+      code: '.foo { transition: none } @media screen and (prefers-reduced-motion: reduce) { .foo { transition: none } }',
+    },
+    {
+      code: '.bar { animation: none } @media screen and (prefers-reduced-motion) { .bar { animation: none } }',
+    },
+    {
+      code: 'a { animation-name: skew; } @media screen and (prefers-reduced-motion) { a { animation: none } }',
+    },
+    {
+      code: '.foo { transition: all; @media (prefers-reduced-motion: reduce) { transition: none; } }',
+    },
+  ],
+
+  reject: [
+    {
+      code: 'a { animation-name: skew; }',
+      fixed:
+        '@media screen and (prefers-reduced-motion: reduce) {\na { animation: none;\n}\n}\na { animation-name: skew; }',
+      message: messages.expected('a'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: 'a { animation-name: skew; } @media screen and (prefers-reduced-motion) { a { transition: none; } }',
+      fixed:
+        '@media screen and (prefers-reduced-motion: reduce) {\na { animation: none;\n}\n} a { animation-name: skew; } @media screen and (prefers-reduced-motion) { a { transition: none; } }',
+      message: messages.expected('a'),
+      line: 1,
+      column: 3,
+    },
+    {
+      code: '.foo { animation: 1s ease-in; } @media screen and (prefers-reduced-motion) { .foo { animation: 1s ease-in; } }',
+      fixed:
+        '@media screen and (prefers-reduced-motion: reduce) {\n.foo { animation: none;\n}\n} .foo { animation: 1s ease-in; } @media screen and (prefers-reduced-motion) { .foo { animation: 1s ease-in; } }',
+      message: messages.expected('.foo'),
+      line: 1,
+      column: 3,
+    },
+  ],
+});

package/src/rules/media-prefers-reduced-motion/index.js

@@ -0,0 +1,164 @@
+import { utils } from 'stylelint';
+import { parse } from 'postcss';
+import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule';
+import isStandardSyntaxSelector from 'stylelint/lib/utils/isStandardSyntaxSelector';
+import isStandardSyntaxAtRule from 'stylelint/lib/utils/isStandardSyntaxAtRule';
+import isCustomSelector from 'stylelint/lib/utils/isCustomSelector';
+
+export const ruleName = 'a11y/media-prefers-reduced-motion';
+
+export const messages = utils.ruleMessages(ruleName, {
+  expected: (selector) => `Expected ${selector} is used with @media (prefers-reduced-motion)`,
+});
+const targetProperties = ['transition', 'animation', 'animation-name'];
+
+function checkChildrenNodes(childrenNodes, currentSelector, parentNode) {
+  return childrenNodes.some((declaration) => {
+    const index = targetProperties.indexOf(declaration.prop);
+    if (currentSelector === 'animation-name' && targetProperties[index] === 'animation')
+      return true;
+    if (currentSelector !== targetProperties[index]) return false;
+    if (declaration.value !== 'none') return false;
+
+    return index >= 0 && parentNode.params.indexOf('prefers-reduced-motion') >= 0;
+  });
+}
+
+function check(selector, node) {
+  const declarations = node.nodes;
+  const params = node.parent.params;
+  const parentNodes = node.parent.nodes;
+
+  if (!declarations) return true;
+
+  if (!isStandardSyntaxSelector(selector)) {
+    return true;
+  }
+
+  if (isCustomSelector(selector)) {
+    return true;
+  }
+
+  let currentSelector = null;
+
+  const declarationsIsMatched = declarations.some((declaration) => {
+    const noMatchedParams = !params || params.indexOf('prefers-reduced-motion') === -1;
+    const index = targetProperties.indexOf(declaration.prop);
+    currentSelector = targetProperties[index];
+    if (targetProperties.indexOf(declaration.prop) >= 0 && declaration.value === 'none') {
+      return false;
+    }
+
+    return index >= 0 && noMatchedParams;
+  });
+
+  if (!declarationsIsMatched) return true;
+
+  if (declarationsIsMatched) {
+    const parentMatchedNode = parentNodes.some((parentNode) => {
+      if (!parentNode || !parentNode.nodes) return;
+      return parentNode.nodes.some((childrenNode) => {
+        const childrenNodes = childrenNode.nodes;
+
+        if (
+          childrenNode.type === 'atrule' &&
+          childrenNode.params.indexOf('prefers-reduced-motion') >= 0
+        ) {
+          return childrenNodes.some((declaration) => {
+            const index = targetProperties.indexOf(declaration.prop);
+            if (currentSelector === 'animation-name' && targetProperties[index] === 'animation')
+              return true;
+            if (currentSelector !== targetProperties[index]) return false;
+            if (declaration.value !== 'none') return false;
+
+            return index >= 0;
+          });
+        }
+
+        if (
+          !parentNode.params ||
+          !Array.isArray(childrenNodes) ||
+          selector !== childrenNode.selector
+        )
+          return false;
+
+        return checkChildrenNodes(childrenNodes, currentSelector, parentNode);
+      });
+    });
+
+    if (!parentMatchedNode) return false;
+
+    return true;
+  }
+
+  return true;
+}
+
+export default function (actual, _, context) {
+  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 === 'page' && node.params) {
+        if (!isStandardSyntaxAtRule(node)) {
+          return;
+        }
+
+        selector = node.params;
+      }
+
+      if (!selector) {
+        return;
+      }
+
+      const isAccepted = check(selector, node);
+
+      if (context.fix && !isAccepted) {
+        const media = parse('@media screen and (prefers-reduced-motion: reduce) {}');
+        media.nodes.forEach((o) => {
+          o.raws.after = '\n';
+        });
+        const cloneRule = node.clone();
+        cloneRule.raws = {
+          ...cloneRule.raws,
+          before: '\n',
+          after: '\n',
+          semicolon: true,
+        };
+        cloneRule.nodes.forEach((o) => {
+          if (o.prop === 'animation-name') {
+            o.prop = 'animation';
+          }
+          if (targetProperties.indexOf(o.prop) >= 0) {
+            o.value = 'none';
+          }
+        });
+        media.first.append(cloneRule);
+        node.before(media);
+        return;
+      }
+
+      if (!isAccepted) {
+        utils.report({
+          index: node.lastEach,
+          message: messages.expected(selector),
+          node,
+          ruleName,
+          result,
+        });
+      }
+    });
+  };
+}

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

@@ -0,0 +1,27 @@
+# no-display-none
+
+Sources that will help you do without `{ display: none; }` and hide the content:
+
+- [CSS Tricks](https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/)
+- [A11Y Project](https://a11yproject.com/posts/how-to-hide-content/)
+- [WebAIM](https://webaim.org/techniques/css/invisiblecontent/)
+
+## Options
+
+### true
+
+The following pattern are considered violations:
+
+```css
+.foo {
+  display: none;
+}
+```
+
+The following patterns are _not_ considered violations:
+
+```css
+.foo {
+  display: flex;
+}
+```

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

@@ -0,0 +1,21 @@
+import { messages, ruleName } from '../index';
+
+testRule({
+  ruleName,
+  config: [true],
+
+  accept: [
+    {
+      code: '.foo { display: flex; }',
+    },
+  ],
+
+  reject: [
+    {
+      code: '.foo { display: none; }',
+      message: messages.expected('.foo'),
+      line: 1,
+      column: 3,
+    },
+  ],
+});

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

@@ -0,0 +1,58 @@
+import { utils } from 'stylelint';
+import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule';
+
+export const ruleName = 'a11y/no-display-none';
+
+export const messages = utils.ruleMessages(ruleName, {
+  expected: (selector) => `Unexpected using "{ display: none; }" in ${selector}`,
+});
+
+function check(selector, node) {
+  if (node.type !== 'rule') {
+    return true;
+  }
+
+  return !node.nodes.some(
+    (o) =>
+      o.type === 'decl' && o.prop.toLowerCase() === 'display' && o.value.toLowerCase() === 'none'
+  );
+}
+
+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-attribute/README.md

@@ -0,0 +1,35 @@
+# no-obsolete-attribute
+
+Disallow obsolete attribute using.
+
+**Sources:**
+
+- [W3G Obsolete features](https://www.w3.org/TR/html5/obsolete.html#obsolete)
+- [W3C Non-conforming features](https://w3c.github.io/html/obsolete.html#non-conforming-features)
+- [W3G Features removed](https://www.w3.org/TR/html52/changes.html#features-removed)
+
+## Options
+
+### true
+
+The following pattern are considered violations:
+
+```css
+body[link] {
+  background-color: pink;
+}
+```
+
+```css
+a,
+img[datasrc] {
+  color: pink;
+}
+```
+
+```css
+img[align],
+a[name] {
+  color: pink;
+}
+```

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

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

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

@@ -0,0 +1,58 @@
+import { utils } from 'stylelint';
+import isStandardSyntaxRule from 'stylelint/lib/utils/isStandardSyntaxRule';
+import { obsoleteAttributes } from './obsoleteAttributes';
+
+export const ruleName = 'a11y/no-obsolete-attribute';
+
+export const messages = utils.ruleMessages(ruleName, {
+  expected: (selector) => `Unexpected using obsolete attribute "${selector}"`,
+});
+
+function check(selector, node) {
+  if (node.type !== 'rule') {
+    return true;
+  }
+
+  return !node.selectors.some((sel) => {
+    return obsoleteAttributes.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,
+        });
+      }
+    });
+  };
+}