adds code for checking for accessible svg

Author: lindseywild

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: 'svg must have an accessible name',
+      url: require('../url')(module),
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement: node => {
+        const elementType = getElementType(context, node)
+
+        // Check if there is a nested title element that is the first child of the `<svg>`
+        const hasNestedTitleAsFirstChild =
+          node.parent.children.length &&
+          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 accessible text. 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"`.',
+          })
+        }
+      },
+    }
+  },
+}

tests/a11y-svg-has-accessible-name.js

@@ -12,17 +12,38 @@ const ruleTester = new RuleTester({
 })
 
 const errorMessage =
-  '`<svg>` must have accessible text. 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"`.'
+  '`<svg>` must have accessible text. 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"`.'
 
-ruleTester.run('a11y-aria-label-is-well-formatted', rule, {
+ruleTester.run('a11y-svg-has-accessible-name', rule, {
   valid: [
-    {code: "<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>"},
-    {code: "<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>"},
-    {code: "<svg aria-labelledby='circle_text' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>"},
-    {code: "<svg aria-hidden='true' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>"},
-    {code: "<svg role='presentation' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>"},
+    {
+      code: "<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>",
+    },
+    {
+      code: "<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>",
+    },
+    {
+      code: "<svg aria-labelledby='circle_text' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>",
+    },
+    {
+      code: "<svg aria-hidden='true' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>",
+    },
+    {
+      code: "<svg role='presentation' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>",
+    },
   ],
   invalid: [
-    {code: "<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>;", errors: [{message: errorMessage}]},
+    {
+      code: "<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>",
+      errors: [{message: errorMessage}],
+    },
+    {
+      code: "<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>",
+      errors: [{message: errorMessage}],
+    },
+    {
+      code: "<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>",
+      errors: [{message: errorMessage}],
+    },
   ],
 })