adds docs

lindseywild · lindseywild · commit ce88c1998bb9 · 2023-07-11T11:17:08.000-04:00
diff --git a/docs/rules/a11y-svg-has-accessible-name.md b/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
diff --git a/lib/rules/a11y-svg-has-accessible-name.js b/lib/rules/a11y-svg-has-accessible-name.js
@@ -4,7 +4,7 @@ const {getElementType} = require('../utils/get-element-type')
 module.exports = {
   meta: {
     docs: {
-      description: 'svg must have an accessible name',
+      description: 'SVGs must have an accessible name',
       url: require('../url')(module),
     },
     schema: [],
@@ -32,7 +32,7 @@ module.exports = {
           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"`.',
+              '`<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"`.',
           })
         }
       },
diff --git a/tests/a11y-svg-has-accessible-name.js b/tests/a11y-svg-has-accessible-name.js
@@ -12,7 +12,7 @@ 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 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"`.'
 
 ruleTester.run('a11y-svg-has-accessible-name', rule, {
   valid: [
