fix(tab): skip elements with visibility:hidden (#799)

Author: Dennis273

src/utils/misc/isVisible.ts

@@ -8,10 +8,13 @@ export function isVisible(element: Element): boolean {
     el?.ownerDocument;
     el = el.parentElement
   ) {
-    const display = window.getComputedStyle(el).display
+    const {display, visibility} = window.getComputedStyle(el)
     if (display === 'none') {
       return false
     }
+    if (visibility === 'hidden') {
+      return false
+    }
   }
 
   return true

tests/tab.ts

@@ -564,3 +564,19 @@ test('calls FocusEvents with relatedTarget', async () => {
       ?.relatedTarget,
   ).toBe(element0)
 })
+
+test('should not focus on children of element with style `visiblity: hidden`', () => {
+  const {
+    elements: [inputA, , inputB],
+  } = setup(`
+    <input/>
+    <div style="visibility: hidden;">
+      <input/>
+    </div>
+    <input/>
+  `)
+
+  inputA.focus()
+  userEvent.tab()
+  expect(inputB).toHaveFocus()
+})

tests/utils/misc/isVisible.ts

@@ -9,11 +9,15 @@ test('check if element is visible', async () => {
     <input data-testid="styledHiddenInput" style="display: none">
     <input data-testid="styledDisplayedInput" hidden style="display: block"/>
     <div style="display: none"><input data-testid="childInput" /></div>
+    <input data-testid="styledVisibiliyHiddenInput" style="visibility: hidden">
   `)
 
   expect(isVisible(screen.getByTestId('visibleInput'))).toBe(true)
   expect(isVisible(screen.getByTestId('styledDisplayedInput'))).toBe(true)
   expect(isVisible(screen.getByTestId('styledHiddenInput'))).toBe(false)
   expect(isVisible(screen.getByTestId('childInput'))).toBe(false)
   expect(isVisible(screen.getByTestId('hiddenInput'))).toBe(false)
+  expect(isVisible(screen.getByTestId('styledVisibiliyHiddenInput'))).toBe(
+    false,
+  )
 })