Fix nested SVG title queries

Author: Deepak kudi

src/__tests__/element-queries.js

@@ -642,6 +642,23 @@ test('query/get title element of SVG', () => {
   expect(queryByTitle('Close').id).toEqual('svg-title')
 })
 
+test('query/get nested title element of SVG graphics element', () => {
+  const {getByTitle, queryByTitle} = render(`
+    <div>
+        <svg>
+            <g>
+              <path id="svg-path">
+                <title>Close</title>
+              </path>
+            </g>
+        </svg>
+    </div>
+  `)
+
+  expect(getByTitle('Close').id).toEqual('svg-path')
+  expect(queryByTitle('Close').id).toEqual('svg-path')
+})
+
 test('queryByTitle matches case with non-string matcher', () => {
   const {queryByTitle} = render(`<span title="1" />`)
   expect(queryByTitle(1)).toBeTruthy()

src/queries/title.ts

@@ -14,9 +14,21 @@ import {
   buildQueries,
 } from './all-utils'
 
-const isSvgTitle = (node: HTMLElement) =>
-  node.tagName.toLowerCase() === 'title' &&
-  node.parentElement?.tagName.toLowerCase() === 'svg'
+const getSvgTitleOwner = (node: HTMLElement) => {
+  if (
+    node.tagName.toLowerCase() !== 'title' ||
+    node.namespaceURI !== 'http://www.w3.org/2000/svg'
+  ) {
+    return null
+  }
+
+  const parent = node.parentElement
+  if (!parent || parent.tagName.toLowerCase() === 'svg') {
+    return node
+  }
+
+  return parent
+}
 
 const queryAllByTitle: AllByBoundAttribute = (
   container,
@@ -27,13 +39,28 @@ const queryAllByTitle: AllByBoundAttribute = (
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
   return Array.from(
-    container.querySelectorAll<HTMLElement>('[title], svg > title'),
-  ).filter(
-    node =>
-      matcher(node.getAttribute('title'), node, text, matchNormalizer) ||
-      (isSvgTitle(node) &&
-        matcher(getNodeText(node), node, text, matchNormalizer)),
-  )
+    container.querySelectorAll<HTMLElement>('[title], svg title'),
+  ).reduce<HTMLElement[]>((elements, node) => {
+    const addElement = (element: HTMLElement) => {
+      if (!elements.includes(element)) {
+        elements.push(element)
+      }
+    }
+
+    if (matcher(node.getAttribute('title'), node, text, matchNormalizer)) {
+      addElement(node)
+    }
+
+    const svgTitleOwner = getSvgTitleOwner(node)
+    if (
+      svgTitleOwner &&
+      matcher(getNodeText(node), svgTitleOwner, text, matchNormalizer)
+    ) {
+      addElement(svgTitleOwner)
+    }
+
+    return elements
+  }, [])
 }
 
 const getMultipleError: GetErrorFunction<[unknown]> = (c, title) =>