From 30f5d807db2c84f0527672f0c074639b6647db4a Mon Sep 17 00:00:00 2001
From: Nano Miratus <nanomiratus@gmail.com>
Date: Thu, 29 Feb 2024 23:01:03 +0100
Subject: [PATCH] fix `a11y-svg-has-accessible-name` considering whitespace
 JSXText (#508)

---
 lib/rules/a11y-svg-has-accessible-name.js | 10 +++++++---
 tests/a11y-svg-has-accessible-name.js     |  6 ++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/lib/rules/a11y-svg-has-accessible-name.js b/lib/rules/a11y-svg-has-accessible-name.js
index e8c92a8f..45e675fd 100644
--- 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
index c708ee9a..62442132 100644
--- 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>",
     },