fix a11y-svg-has-accessible-name considering whitespace JSXText (#508)

github · Feb 29, 2024 · 30f5d80 · 30f5d80
1 parent adea305
commit 30f5d80
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/lib/rules/a11y-svg-has-accessible-name.js b/lib/rules/a11y-svg-has-accessible-name.js
@@ -16,10 +16,14 @@ module.exports = {
         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>`
+        // Check if there is a nested title element that is the first non-whitespace child of the `<svg>`
+        const childrenWithoutWhitespace = node.parent.children?.filter(({type, value}) =>
+          type === 'JSXText' ? value.trim() !== '' : type !== 'JSXText',
+        )
+
         const hasNestedTitleAsFirstChild =
-          node.parent.children?.[0]?.type === 'JSXElement' &&
-          node.parent.children?.[0]?.openingElement?.name?.name === 'title'
+          childrenWithoutWhitespace?.[0]?.type === 'JSXElement' &&
+          childrenWithoutWhitespace?.[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')

diff --git a/tests/a11y-svg-has-accessible-name.js b/tests/a11y-svg-has-accessible-name.js
@@ -19,6 +19,12 @@ ruleTester.run('a11y-svg-has-accessible-name', rule, {
     {
       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 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>",
     },