respect elements that are hidden by <details>

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
     }
   }

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])

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)
 })