From d510c45ed474691277c6e29e4e09130c683119d6 Mon Sep 17 00:00:00 2001
From: Vince Malone <vince.malone@databricks.com>
Date: Fri, 15 Sep 2023 13:23:56 -0700
Subject: [PATCH] respect elements that are hidden by <details>

---
 src/utils/misc/isVisible.ts            | 25 ++++++++++++++++++++++---
 tests/utils/focus/getTabDestination.ts |  3 +++
 tests/utils/misc/isVisible.ts          | 12 ++++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/utils/misc/isVisible.ts b/src/utils/misc/isVisible.ts
index 022a45e1..1b495d0d 100644
--- a/src/utils/misc/isVisible.ts
+++ b/src/utils/misc/isVisible.ts
@@ -1,18 +1,37 @@
 import {getWindow} from './getWindow'
 
+function isAttributeVisible(element: Element, previousElement: Element | null) {
+  let detailsVisibility
+
+  if (previousElement) {
+    detailsVisibility =
+      element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
+        ? element.hasAttribute('open')
+        : true
+  } else {
+    detailsVisibility =
+      element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true
+  }
+
+  return detailsVisibility
+}
+
 export function isVisible(element: Element): boolean {
   const window = getWindow(element)
 
   for (
-    let el: Element | null = element;
+    let el: Element | null = element, prev: Element | null = null;
     el?.ownerDocument;
-    el = el.parentElement
+    prev = el, el = el.parentElement
   ) {
     const {display, visibility} = window.getComputedStyle(el)
     if (display === 'none') {
       return false
     }
-    if (visibility === 'hidden') {
+    if (visibility === 'hidden' || visibility === 'collapse') {
+      return false
+    }
+    if (!isAttributeVisible(el, prev)) {
       return false
     }
   }
diff --git a/tests/utils/focus/getTabDestination.ts b/tests/utils/focus/getTabDestination.ts
index 1f95a27b..354de8d1 100644
--- a/tests/utils/focus/getTabDestination.ts
+++ b/tests/utils/focus/getTabDestination.ts
@@ -76,6 +76,9 @@ test('exclude hidden elements', () => {
         <input hidden />
         <input style="visibility: hidden"/>
         <input style="display: none"/>
+        <details>
+          <button></button>
+        </details>
     `)
 
   assertTabOrder([elA])
diff --git a/tests/utils/misc/isVisible.ts b/tests/utils/misc/isVisible.ts
index 61ca89e5..a7afb01d 100644
--- a/tests/utils/misc/isVisible.ts
+++ b/tests/utils/misc/isVisible.ts
@@ -12,6 +12,15 @@ test('check if element is visible', async () => {
     <input data-testid="styledDisplayedInput" hidden style="display: block"/>
     <div style="display: none"><input data-testid="childInput" /></div>
     <input data-testid="styledVisibiliyHiddenInput" style="visibility: hidden">
+    <details>
+      <input data-testid="collapsedInput">
+    </details>
+    <details open>
+      <input data-testid="expandedInput">
+    </details>
+    <details>
+      <summary data-testid="summary"></summary>
+    </details>
   `)
 
   expect(isVisible(screen.getByTestId('visibleInput'))).toBe(true)
@@ -22,4 +31,7 @@ test('check if element is visible', async () => {
   expect(isVisible(screen.getByTestId('styledVisibiliyHiddenInput'))).toBe(
     false,
   )
+  expect(isVisible(screen.getByTestId('collapsedInput'))).toBe(false)
+  expect(isVisible(screen.getByTestId('expandedInput'))).toBe(true)
+  expect(isVisible(screen.getByTestId('summary'))).toBe(true)
 })