commit 24b72cd60403f6d84b6df2da6676b1e1eee51c9b · kitten.sh/use-interactions

Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.

Fix visibility check for non-HTMLElements

When SVGElements are checked for visibility, they'll fail the check
since `offsetWidth` and `offsetHeight` aren't present on them. The
`clientWidth` and `clientHeight` properties may not be used as they
refer to the inset size of potentially hidden but scrollable elements.

Instead, we can only rely on the bounding check and add an exception for
hidden inputs.

See: https://github.com/focus-trap/tabbable/blob/b9c50fea90d392a409c8055001567c4b5d0cac54/src/index.js#L143-L161

kitten.sh 3 years ago 24b72cd6 8b244c11

options

unified split

Changed files

+2 -2

src

utils

element.ts

+2 -2

src/utils/element.ts

···

       9
       9
        
       /** Returns whether an element is visible in the context of focusability. */

     

       10
       10
        
       export const isVisible = (node: Element): boolean =>

     

       11
       11
        
         !!(

     

       12
       12
       -
           (node as HTMLElement).offsetWidth &&

     

       13
       13
       -
           (node as HTMLElement).offsetHeight &&

     

       12
       12
       +
           (node.tagName !== 'INPUT' ||

     

       13
       13
       +
             (node as HTMLInputElement).type !== 'hidden') &&

     

       14
       14
        
           node.getClientRects().length &&

     

       15
       15
        
           getComputedStyle(node).visibility !== 'hidden'

     

       16
       16
        
         );