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

@@ -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 */

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

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: