From e7f82b74182acf425b12f2defbe543c335468ff9 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 24 Oct 2019 12:43:55 +0200
Subject: [PATCH 1/4] Add benchmmark

Still has +-20% in median runtime
---
 src/__tests__/benchmark/byRole.js | 46 +++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/__tests__/benchmark/byRole.js

diff --git a/src/__tests__/benchmark/byRole.js b/src/__tests__/benchmark/byRole.js
new file mode 100644
index 00000000..50584207
--- /dev/null
+++ b/src/__tests__/benchmark/byRole.js
@@ -0,0 +1,46 @@
+import {cleanup, renderIntoDocument} from '../helpers/test-utils'
+
+test('byRole performance', () => {
+  const samples = 1000
+  const times = Array(samples)
+
+  for (let run = 0; run <= samples; run += 1) {
+    const {getAllByRole} = renderIntoDocument(`
+<main>
+  <article>
+    <h1>A list of things to do</h1>
+    <p>
+      A section describing how to do. And now a list with things
+      <div class="an-important-wrapper">
+        <ul>
+          <li>do this</li>
+          <li>do that</li>
+          <li>do it now</li>
+        </ul>
+      </div>
+    </p>
+  </article>
+</main>  
+`)
+    const start = performance.now()
+    getAllByRole('listitem')
+    times[run] = performance.now() - start
+    cleanup()
+  }
+
+  const avg = times.reduce((sum, n) => sum + n, 0) / times.length
+  const median = times.sort((a, b) => a - b)[Math.floor(times.length / 2)]
+  const percentile95 = times.sort((a, b) => a - b)[
+    Math.floor(times.length * 0.95)
+  ]
+
+  expect(`
+95th percentile: ${Math.round(percentile95 * 1000)}µs
+median:          ${Math.round(median * 1000)}µs
+avg:             ${Math.round(avg * 1000)}µs`).toMatchInlineSnapshot(`
+    "
+    95th percentile: 6045µs
+    median:          4680µs
+    avg:             4775µs"
+  `)
+})

From 29a869bd770e624389166e81f1737ee3ea3a13c0 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 24 Oct 2019 17:27:24 +0200
Subject: [PATCH 2/4] Extract isSubtreeInaccessible

Useful to inject more performant implementations
---
 src/__tests__/role-helpers.js |  2 +-
 src/__tests__/role.js         | 12 ++++---
 src/role-helpers.js           | 59 ++++++++++++++++++-----------------
 3 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
index 728e0d00..9563b66c 100644
--- a/src/__tests__/role-helpers.js
+++ b/src/__tests__/role-helpers.js
@@ -171,7 +171,7 @@ test.each([
   ['<div style="visibility: visible" />', false],
   ['<div hidden />', true],
   ['<div style="display: none;"/>', true],
-  ['<div style="visibility: hidden;"/>', true],
+  ['<div style="visibility: hidden;"/>', false], // bug in jsdom < 15.2
   ['<div aria-hidden="true" />', true],
 ])('shouldExcludeFromA11yTree for %s returns %p', (html, expected) => {
   const {container} = render(html)
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index 407e1662..a372a1c9 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -115,7 +115,9 @@ There are no accessible roles. But there might be some inaccessible roles. If yo
 })
 
 test('by default excludes elements which have visibility hidden', () => {
-  const {getByRole} = render('<div style="visibility: hidden;"><ul /></div>')
+  // works in jsdom < 15.2 only when the actual element in question has this
+  // css property. only jsdom@^15.2 implements inheritance for `visibility`
+  const {getByRole} = render('<div><ul style="visibility: hidden;" /></div>')
 
   expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(`
 "Unable to find an accessible element with the role "list"
@@ -123,10 +125,10 @@ test('by default excludes elements which have visibility hidden', () => {
 There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
 <div>
-  <div
-    style="visibility: hidden;"
-  >
-    <ul />
+  <div>
+    <ul
+      style="visibility: hidden;"
+    />
   </div>
 </div>"
 `)
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 961c3186..2d49d646 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -3,6 +3,27 @@ import {prettyDOM} from './pretty-dom'
 
 const elementRoleList = buildElementRoleList(elementRoles)
 
+/**
+ * @param {Element} element -
+ * @returns {boolean} - `true` if `element` and its subtree are inaccessible
+ */
+function isSubtreeInaccessible(element) {
+  if (element.hidden === true) {
+    return true
+  }
+
+  if (element.getAttribute('aria-hidden') === 'true') {
+    return true
+  }
+
+  const window = element.ownerDocument.defaultView
+  if (window.getComputedStyle(element).display === 'none') {
+    return true
+  }
+
+  return false
+}
+
 /**
  * Partial implementation https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion
  * which should only be used for elements with a non-presentational role i.e.
@@ -12,47 +33,27 @@ const elementRoleList = buildElementRoleList(elementRoles)
  * Ignores "Child Presentational: True" characteristics
  *
  * @param {Element} element -
+ * @param {object} [options] -
+ * @param {function (element: Element): boolean} options.isSubtreeInaccessible -
+ * can be used to return cached results from previous isSubtreeInaccessible calls
  * @returns {boolean} true if excluded, otherwise false
  */
-function isInaccessible(element) {
+function isInaccessible(element, options = {}) {
+  const {
+    isSubtreeInaccessible: isSubtreeInaccessibleImpl = isSubtreeInaccessible,
+  } = options
   const window = element.ownerDocument.defaultView
-  const computedStyle = window.getComputedStyle(element)
   // since visibility is inherited we can exit early
-  if (computedStyle.visibility === 'hidden') {
+  if (window.getComputedStyle(element).visibility === 'hidden') {
     return true
   }
 
-  // Remove once https://github.com/jsdom/jsdom/issues/2616 is fixed
-  const supportsStyleInheritance = computedStyle.visibility !== ''
-  let visibility = computedStyle.visibility
-
   let currentElement = element
   while (currentElement) {
-    if (currentElement.hidden === true) {
-      return true
-    }
-
-    if (currentElement.getAttribute('aria-hidden') === 'true') {
+    if (isSubtreeInaccessibleImpl(currentElement)) {
       return true
     }
 
-    const currentComputedStyle = window.getComputedStyle(currentElement)
-
-    if (currentComputedStyle.display === 'none') {
-      return true
-    }
-
-    // this branch is temporary code until jsdom fixes a bug
-    // istanbul ignore else
-    if (supportsStyleInheritance === false) {
-      // we go bottom-up for an inheritable property so we can only set it
-      // if it wasn't set already i.e. the parent can't overwrite the child
-      if (visibility === '') visibility = currentComputedStyle.visibility
-      if (visibility === 'hidden') {
-        return true
-      }
-    }
-
     currentElement = currentElement.parentElement
   }
 

From 2b954e2b02ad4044def6f7939f12e1e3385f9915 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 24 Oct 2019 17:49:08 +0200
Subject: [PATCH 3/4] Cache isSubtreeInaccessible calls

---
 src/__tests__/benchmark/byRole.js |  6 +++---
 src/queries/role.js               | 16 +++++++++++++++-
 src/role-helpers.js               |  9 ++++++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/benchmark/byRole.js b/src/__tests__/benchmark/byRole.js
index 50584207..74e59ccd 100644
--- a/src/__tests__/benchmark/byRole.js
+++ b/src/__tests__/benchmark/byRole.js
@@ -39,8 +39,8 @@ test('byRole performance', () => {
 median:          ${Math.round(median * 1000)}µs
 avg:             ${Math.round(avg * 1000)}µs`).toMatchInlineSnapshot(`
     "
-    95th percentile: 6045µs
-    median:          4680µs
-    avg:             4775µs"
+    95th percentile: 3341µs
+    median:          2481µs
+    avg:             2666µs"
   `)
 })
diff --git a/src/queries/role.js b/src/queries/role.js
index be031475..b84c4993 100644
--- a/src/queries/role.js
+++ b/src/queries/role.js
@@ -2,6 +2,7 @@ import {
   getImplicitAriaRoles,
   prettyRoles,
   isInaccessible,
+  isSubtreeInaccessible,
 } from '../role-helpers'
 import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils'
 
@@ -13,6 +14,15 @@ function queryAllByRole(
   const matcher = exact ? matches : fuzzyMatches
   const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
 
+  const subtreeIsInaccessibleCache = new WeakMap()
+  function cachedIsSubtreeInaccessible(element) {
+    if (!subtreeIsInaccessibleCache.has(element)) {
+      subtreeIsInaccessibleCache.set(element, isSubtreeInaccessible(element))
+    }
+
+    return subtreeIsInaccessibleCache.get(element)
+  }
+
   return Array.from(container.querySelectorAll('*'))
     .filter(node => {
       const isRoleSpecifiedExplicitly = node.hasAttribute('role')
@@ -28,7 +38,11 @@ function queryAllByRole(
       )
     })
     .filter(element => {
-      return hidden === false ? isInaccessible(element) === false : true
+      return hidden === false
+        ? isInaccessible(element, {
+            isSubtreeInaccessible: cachedIsSubtreeInaccessible,
+          }) === false
+        : true
     })
 }
 
diff --git a/src/role-helpers.js b/src/role-helpers.js
index 2d49d646..6218461d 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -156,6 +156,13 @@ function prettyRoles(dom, {hidden}) {
 const logRoles = (dom, {hidden = false} = {}) =>
   console.log(prettyRoles(dom, {hidden}))
 
-export {getRoles, logRoles, getImplicitAriaRoles, prettyRoles, isInaccessible}
+export {
+  getRoles,
+  logRoles,
+  getImplicitAriaRoles,
+  isSubtreeInaccessible,
+  prettyRoles,
+  isInaccessible,
+}
 
 /* eslint no-console:0 */

From ca81c9d668f79a98263a7a0d2759e83fd8704214 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 28 Oct 2019 19:54:42 +0100
Subject: [PATCH 4/4] Remove benchmark

---
 src/__tests__/benchmark/byRole.js | 46 -------------------------------
 1 file changed, 46 deletions(-)
 delete mode 100644 src/__tests__/benchmark/byRole.js

diff --git a/src/__tests__/benchmark/byRole.js b/src/__tests__/benchmark/byRole.js
deleted file mode 100644
index 74e59ccd..00000000
--- a/src/__tests__/benchmark/byRole.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {cleanup, renderIntoDocument} from '../helpers/test-utils'
-
-test('byRole performance', () => {
-  const samples = 1000
-  const times = Array(samples)
-
-  for (let run = 0; run <= samples; run += 1) {
-    const {getAllByRole} = renderIntoDocument(`
-<main>
-  <article>
-    <h1>A list of things to do</h1>
-    <p>
-      A section describing how to do. And now a list with things
-      <div class="an-important-wrapper">
-        <ul>
-          <li>do this</li>
-          <li>do that</li>
-          <li>do it now</li>
-        </ul>
-      </div>
-    </p>
-  </article>
-</main>  
-`)
-    const start = performance.now()
-    getAllByRole('listitem')
-    times[run] = performance.now() - start
-    cleanup()
-  }
-
-  const avg = times.reduce((sum, n) => sum + n, 0) / times.length
-  const median = times.sort((a, b) => a - b)[Math.floor(times.length / 2)]
-  const percentile95 = times.sort((a, b) => a - b)[
-    Math.floor(times.length * 0.95)
-  ]
-
-  expect(`
-95th percentile: ${Math.round(percentile95 * 1000)}µs
-median:          ${Math.round(median * 1000)}µs
-avg:             ${Math.round(avg * 1000)}µs`).toMatchInlineSnapshot(`
-    "
-    95th percentile: 3341µs
-    median:          2481µs
-    avg:             2666µs"
-  `)
-})