Merge remote-tracking branch 'origin' into add-a11y-no-title-attribute

Author: kendallgassner

README.md

@@ -85,8 +85,9 @@ This config will be interpreted in the following way:
 | :------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :- | :- | :- |
 | [a11y-aria-label-is-well-formatted](docs/rules/a11y-aria-label-is-well-formatted.md)                     | [aria-label] text should be formatted as you would visual text.                                                          | ⚛️ |    |    |
 | [a11y-no-generic-link-text](docs/rules/a11y-no-generic-link-text.md)                                     | disallow generic link text                                                                                               |    |    | ❌  |
-| [a11y-no-title-attribute](docs/rules/a11y-no-title-attribute.md)                                         | Guards against developers using the title attribute                                                                      |    |    |    |
+| [a11y-no-title-attribute](docs/rules/a11y-no-title-attribute.md)                                         | Guards against developers using the title attribute                                                                      | ⚛️ |    |    |
 | [a11y-no-visually-hidden-interactive-element](docs/rules/a11y-no-visually-hidden-interactive-element.md) | Ensures that interactive elements are not visually hidden                                                                | ⚛️ |    |    |
+| [a11y-svg-has-accessible-name](docs/rules/a11y-svg-has-accessible-name.md)                               | SVGs must have an accessible name                                                                                        | ⚛️ |    |    |
 | [array-foreach](docs/rules/array-foreach.md)                                                             | enforce `for..of` loops over `Array.forEach`                                                                             | ✅  |    |    |
 | [async-currenttarget](docs/rules/async-currenttarget.md)                                                 | disallow `event.currentTarget` calls inside of async functions                                                           | 🔍 |    |    |
 | [async-preventdefault](docs/rules/async-preventdefault.md)                                               | disallow `event.preventDefault` calls inside of async functions                                                          | 🔍 |    |    |

docs/rules/a11y-no-title-attribute.md

@@ -1,5 +1,7 @@
 # Guards against developers using the title attribute (`github/a11y-no-title-attribute`)
 
+💼 This rule is enabled in the ⚛️ `react` config.
+
 <!-- end auto-generated rule header -->
 
 The title attribute is strongly discouraged. The only exception is on an `<iframe>` element. It is hardly useful and cannot be accessed by multiple groups of users including keyboard-only users and mobile users.

docs/rules/a11y-svg-has-accessible-name.md

@@ -0,0 +1,73 @@
+# SVGs must have an accessible name (`github/a11y-svg-has-accessible-name`)
+
+💼 This rule is enabled in the ⚛️ `react` config.
+
+<!-- end auto-generated rule header -->
+
+## Rule Details
+
+An `<svg>` must have an accessible name. Set `aria-label` or `aria-labelledby`, or nest a `<title>` element as the first child of the `<svg>` element.
+
+However, if the `<svg>` is purely decorative, hide it with `aria-hidden="true"` or `role="presentation"`.
+
+## Resources
+
+- [Accessible SVGs](https://css-tricks.com/accessible-svgs/)
+
+## Examples
+
+### **Incorrect** code for this rule 👎
+
+```html
+<svg height='100' width='100'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+```html
+<svg height='100' width='100' title='Circle with a black outline and red fill'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+```html
+<svg height='100' width='100'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+  <title>Circle with a black outline and red fill</title>
+</svg>
+```
+
+### **Correct** code for this rule 👍
+
+```html
+<svg height='100' width='100'>
+  <title>Circle with a black outline and red fill</title>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+```html
+<svg aria-label='Circle with a black outline and red fill' height='100' width='100'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+```html
+<svg aria-labelledby='circle_text' height='100' width='100'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+```html
+<svg aria-hidden='true' height='100' width='100'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+```html
+<svg role='presentation' height='100' width='100'>
+  <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>
+</svg>
+```
+
+## Version

lib/configs/react.js

@@ -12,6 +12,7 @@ module.exports = {
     'github/a11y-aria-label-is-well-formatted': 'error',
     'github/a11y-no-visually-hidden-interactive-element': 'error',
     'github/a11y-no-title-attribute': 'error',
+    'github/a11y-svg-has-accessible-name': 'error',
     'github/role-supports-aria-props': 'error',
     'jsx-a11y/no-aria-hidden-on-focusable': 'error',
     'jsx-a11y/no-autofocus': 'off',

lib/index.js

@@ -4,6 +4,7 @@ module.exports = {
     'a11y-no-generic-link-text': require('./rules/a11y-no-generic-link-text'),
     'a11y-no-title-attribute': require('./rules/a11y-no-title-attribute'),
     'a11y-aria-label-is-well-formatted': require('./rules/a11y-aria-label-is-well-formatted'),
+    'a11y-svg-has-accessible-name': require('./rules/a11y-svg-has-accessible-name'),
     'array-foreach': require('./rules/array-foreach'),
     'async-currenttarget': require('./rules/async-currenttarget'),
     'async-preventdefault': require('./rules/async-preventdefault'),

lib/rules/a11y-svg-has-accessible-name.js

@@ -0,0 +1,41 @@
+const {hasProp} = require('jsx-ast-utils')
+const {getElementType} = require('../utils/get-element-type')
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'SVGs must have an accessible name',
+      url: require('../url')(module),
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement: node => {
+        const elementType = getElementType(context, node)
+        if (elementType !== 'svg') return
+
+        // Check if there is a nested title element that is the first child of the `<svg>`
+        const hasNestedTitleAsFirstChild =
+          node.parent.children?.[0]?.type === 'JSXElement' &&
+          node.parent.children?.[0]?.openingElement?.name?.name === 'title'
+
+        // Check if `aria-label` or `aria-labelledby` is set
+        const hasAccessibleName = hasProp(node.attributes, 'aria-label') || hasProp(node.attributes, 'aria-labelledby')
+
+        // Check if SVG is decorative
+        const isDecorative =
+          hasProp(node.attributes, 'role', 'presentation') || hasProp(node.attributes, 'aria-hidden', 'true')
+
+        if (elementType === 'svg' && !hasAccessibleName && !isDecorative && !hasNestedTitleAsFirstChild) {
+          context.report({
+            node,
+            message:
+              '`<svg>` must have an accessible name. Set `aria-label` or `aria-labelledby`, or nest a `<title>` element. However, if the `<svg>` is purely decorative, hide it with `aria-hidden="true"` or `role="presentation"`.',
+          })
+        }
+      },
+    }
+  },
+}