feat: Add strictVisibility check option to ByRole queries

Author: benlesh

src/__tests__/element-queries.js

@@ -813,6 +813,37 @@ test('queryAllByRole returns semantic html elements', () => {
   expect(queryAllByRole('listbox')).toHaveLength(1)
 })
 
+test('getAllByRole matchers with strictVisibility enabled and disabled', () => {
+  const {getAllByRole} = render(`
+    <div aria-hidden="true">
+      <button>Aria Hidden Button</button>
+    </div>
+    <div style="display: none;">
+      <button>Display None Button</button>
+    </div>
+    <div style="visibility: hidden;">
+      <button>Visibility Hidden Button</button>
+    </div>
+    <div style="visibility: hidden;">
+      <div>
+        <button>Deep Visibility Hidden Button</button>
+      </div>
+    </div>
+    <div>
+      <button>Visible Button</button>
+    </div>
+  `)
+
+  const defaultResults = getAllByRole('button')
+  expect(defaultResults).toHaveLength(1)
+
+  const strictResults = getAllByRole('button', {strictVisibilityCheck: true})
+  expect(strictResults).toHaveLength(1)
+
+  const looseResults = getAllByRole('button', {strictVisibilityCheck: false})
+  expect(looseResults).toHaveLength(1)
+})
+
 test('getAll* matchers return an array', () => {
   const {
     getAllByAltText,

src/queries/role.ts

@@ -24,6 +24,7 @@ import {
   prettyRoles,
   isInaccessible,
   isSubtreeInaccessible,
+  isInaccessibleLoose,
 } from '../role-helpers'
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {checkContainerType} from '../helpers'
@@ -54,6 +55,7 @@ const queryAllByRole: AllByRole = (
     current,
     level,
     expanded,
+    strictVisibilityCheck = true,
     value: {
       now: valueNow,
       min: valueMin,
@@ -297,9 +299,11 @@ const queryAllByRole: AllByRole = (
     })
     .filter(element => {
       return hidden === false
-        ? isInaccessible(element, {
-            isSubtreeInaccessible: cachedIsSubtreeInaccessible,
-          }) === false
+        ? strictVisibilityCheck
+          ? isInaccessible(element, {
+              isSubtreeInaccessible: cachedIsSubtreeInaccessible,
+            }) === false
+          : isInaccessibleLoose(element) === false
         : true
     })
 }

src/role-helpers.js

@@ -65,6 +65,28 @@ function isInaccessible(element, options = {}) {
   return false
 }
 
+/**
+ * A fast check to see if an element is inaccessible.
+ * @param {Element} element
+ * @returns {boolean} true if exluded, otherwise false
+ */
+function isInaccessibleLoose(element) {
+  do {
+    const explictlyHidden =
+      element.style.visibility === 'hidden' || element.style.display === 'none'
+    if (explictlyHidden) {
+      return true
+    }
+
+    const ariaHidden = element.getAttribute('aria-hidden') === 'true'
+    if (ariaHidden) {
+      return true
+    }
+  } while ((element = element.parentElement))
+
+  return false
+}
+
 function getImplicitAriaRoles(currentNode) {
   // eslint bug here:
   // eslint-disable-next-line no-unused-vars
@@ -382,6 +404,7 @@ export {
   isSubtreeInaccessible,
   prettyRoles,
   isInaccessible,
+  isInaccessibleLoose,
   computeAriaSelected,
   computeAriaBusy,
   computeAriaChecked,

types/queries.d.ts

@@ -110,6 +110,17 @@ export interface ByRoleOptions {
    * the `aria-level` attribute.
    */
   level?: number
+
+  /**
+   * Whether or not to strictly check the visibliity of the element. Doing so
+   * can cause issues with the performance of tests, because it requires the DOM tree
+   * is traversed, and the `getComputedStyle` function is called on each element.
+   *
+   * If you're finding that your tests are slow, you may want to disable this option.
+   * @default true
+   */
+  strictVisibilityCheck?: boolean
+
   value?: {
     now?: number
     min?: number