feat: ignore element that is children of aria-hidden="true"

Author: simcha90

src/__tests__/element-queries.js

@@ -22,6 +22,26 @@ test('query can return null', () => {
   expect(queryByAltText('LucyRicardo')).toBeNull()
 })
 
+test('query by text outside `aria-hidden` tags', () => {
+  const {queryByText} = render('<div><div>LucyRicardo</div></div>')
+  expect(queryByText('LucyRicardo')).not.toBeNull()
+  const {queryByText: queryByTextRoot} = render(
+    '<div aria-hidden="false">LucyRicardo</div>',
+  )
+  expect(queryByTextRoot('LucyRicardo')).not.toBeNull()
+})
+
+test('query by text inside `aria-hidden` tags', () => {
+  const {queryByText} = render(
+    '<div aria-hidden="true"><div>LucyRicardo</div></div>',
+  )
+  expect(queryByText('LucyRicardo')).toBeNull()
+  const {queryByText: queryByTextRoot} = render(
+    '<div aria-hidden="true">LucyRicardo</div>',
+  )
+  expect(queryByTextRoot('LucyRicardo')).toBeNull()
+})
+
 test('get throws a useful error message', () => {
   const {
     getByLabelText,

src/queries/text.js

@@ -9,6 +9,31 @@ import {
   buildQueries,
 } from './all-utils'
 
+function ignoreHiddenElements(container, selector, baseArray) {
+  const hiddenElements = [
+    ...Array.from(container.querySelectorAll("[aria-hidden='true']")),
+  ]
+  baseArray.forEach(base => {
+    if (base.getAttribute('aria-hidden') === 'true') {
+      hiddenElements.push(base)
+    }
+  })
+  let foundHiddenChildren = [...hiddenElements]
+  hiddenElements.forEach(hiddenElement => {
+    foundHiddenChildren = [
+      ...foundHiddenChildren,
+      ...Array.from(hiddenElement.querySelectorAll(selector)),
+    ]
+  })
+  const findSameNode = foundElement =>
+    !foundHiddenChildren.find(foundHiddenElement =>
+      foundElement.isSameNode(foundHiddenElement),
+    )
+  return [...baseArray, ...container.querySelectorAll(selector)].filter(
+    findSameNode,
+  )
+}
+
 function queryAllByText(
   container,
   text,
@@ -28,7 +53,10 @@ function queryAllByText(
   if (typeof container.matches === 'function' && container.matches(selector)) {
     baseArray = [container]
   }
-  return [...baseArray, ...Array.from(container.querySelectorAll(selector))]
+
+  const foundElements = ignoreHiddenElements(container, selector, baseArray)
+
+  return foundElements
     .filter(node => !ignore || !node.matches(ignore))
     .filter(node => matcher(getNodeText(node), node, text, matchNormalizer))
 }