Usage

import { Modal } from '@loomhq/lens'
<Modal title="Title">Content</Modal>

Accessibility

Please verify that your component supports the following accessibility features that come out of box and none of your modifications negate these features.

Modal should:

  • Be focusable and togglable (open and closeable) by every input device (mouse, keyboard, switch, etc).
  • Have a clear trigger to open: Focusable element (i.e., <Button type="button" ...>)
  • Have a clear trigger to close: Natively, we provide the X button. If you create your own, please ensure your close trigger supports the below features.
  • Prevent the body from scrolling in the background when it is open.

Keyboard navigability

When the Modal (dialog HTML element) is open, these are the expected behaviours:

  • Autofocus: The focus should shift from the trigger that opened the Modal to the first focusable element (usually the close button).

  • Tab: The user should be able to Tab to the next focusable element, and Shift + Tab to the previous focusable element within the Modal.

  • Close Modal: The user should be able to close the modal with Esc

  • Trap Focus: The user should not be able to focus outside of the Modal. The last focusable item should loop back around to the first focusable item.

  • Return Focus: When the Modal is closed, the focus should return to the trigger that opened the Modal (usually a button).

Screenreader support

Screenreader support is still [WIP]. In-code comments outlines the remaining work with Linear ticket references.

With dividers

With custom max-height

Bottom alignment

Best for mobile modals. Recommend setting a max width for your internal components.

Custom Modal with Bottom Drawer

With scrollable section

We should avoid this pattern and only use it when the modal is a MANDATORY, blocking flow. This should not be used for aesthetic reasons. In general, almost all modals should have an X. If you use this pattern, you MUST provide a way to progress or close the modal in some way, even if your API calls fail or other errors occur.

no close x

Props

name
type
default
maxHeight
number | string
'70vh'
maxWidth
number | string
60
placement
'center' | 'bottom'
'center'
zIndex
number
1000
children
React.ReactNode
isOpen
boolean
mainButton
React.ReactNode
secondaryButton
React.ReactNode
alternativeButton
React.ReactNode
title
React.ReactNode
onCloseClick
React.ReactEventHandler
onBackgroundClick
React.ReactEventHandler
onKeyDown
React.ReactEventHandler
hasDividers
boolean
noPadding
boolean
ariaLabel
string
name
type
default
maxWidth
number | string
60
maxHeight
number | string
'70vh'
placement
string
'center'
children
React.ReactNode
id
string
isOpen
boolean
onKeyDown
React.ReactEventHandler
onCloseClick
React.ReactEventHandler
ariaLabel
string
removeClose
boolean