From c41a3ee54d024fdcc942cf7049821ee61e897018 Mon Sep 17 00:00:00 2001
From: Matyas Forian-Szabo <matyas.szabo@instructure.com>
Date: Fri, 21 Jul 2023 12:24:13 +0200
Subject: [PATCH] fix(ui-dom-utils): findFocusable only treats an element as
 hidden if display is 'none'

The code of findFocusable was lifted from some ancient JQuery UI helper. For some unknown reason it
treats an element as non-focusable if its CSS display prop is not inline and its size is 0 or less.
It seems to work fine without this criteria, and we could not find any reason why this clause was
added in the first place.
---
 packages/ui-dom-utils/src/__tests__/findTabbable.test.tsx | 3 ---
 packages/ui-dom-utils/src/findFocusable.ts                | 7 +------
 yarn.lock                                                 | 2 +-
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/ui-dom-utils/src/__tests__/findTabbable.test.tsx b/packages/ui-dom-utils/src/__tests__/findTabbable.test.tsx
index b0d6860dbf..5694bc0d35 100644
--- a/packages/ui-dom-utils/src/__tests__/findTabbable.test.tsx
+++ b/packages/ui-dom-utils/src/__tests__/findTabbable.test.tsx
@@ -43,9 +43,6 @@ describe('findTabbable', async () => {
             <button>Yep</button>
             <button style={{ display: 'none' }}>Nope</button>
           </div>
-          <div style={{ width: 0, height: 0 }}>
-            <button>Nope</button>
-          </div>
         </div>
       )
       /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
diff --git a/packages/ui-dom-utils/src/findFocusable.ts b/packages/ui-dom-utils/src/findFocusable.ts
index a4dbdb8624..7fd7e6a54d 100644
--- a/packages/ui-dom-utils/src/findFocusable.ts
+++ b/packages/ui-dom-utils/src/findFocusable.ts
@@ -83,12 +83,7 @@ function findFocusable(
 
 function hidden(element: Element | Node) {
   const cs = getComputedStyle(element)
-  return (
-    (cs.display !== 'inline' &&
-      (element as HTMLElement).offsetWidth <= 0 &&
-      (element as HTMLElement).offsetHeight <= 0) ||
-    cs.display === 'none'
-  )
+  return cs.display === 'none'
 }
 
 function positioned(element: Element | Node) {
diff --git a/yarn.lock b/yarn.lock
index 1a94550a5a..c4026e58fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3029,7 +3029,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.22.6":
+"@babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6":
   version: 7.22.6
   resolution: "@babel/runtime@npm:7.22.6"
   dependencies: