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

nnmrts · web-flow · commit 30f5d807db2c · 2024-02-29T14:01:03.000-08:00
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>",
     },

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,12 @@ ruleTester.run('a11y-svg-has-accessible-name', rule, {`
`19`	`19`	`{`
`20`	`20`	`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>",`
`21`	`21`	`},`
	`22`	`+ {`
	`23`	+ code: `<svg height='100' width='100'>
	`24`	`+ <title>Circle with a black outline and red fill</title>`
	`25`	`+ <circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/>`
	`26`	+ </svg>`,
	`27`	`+ },`
`22`	`28`	`{`
`23`	`29`	`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>",`
`24`	`30`	`},`