086a53ba93
* updates * updating doc * Fixed broken documentation in Storybook stories. * bring back a element * md --> mdx * c-* doc update Co-authored-by: Nick Taylor <nick@dev.to>
25 lines
1.2 KiB
Text
25 lines
1.2 KiB
Text
# Mobile Drawers
|
|
|
|
MobileDrawers are intended to be used in small screen sizes only (i.e. for
|
|
mobile UI variants), and always appear from the bottom of the viewport. The
|
|
button which triggers the MobileDrawer may be located anywhere on the page.
|
|
|
|
MobileDrawer content should always include at least one interactive item (e.g.
|
|
button, link) to make sure focus may be transferred to the new content.
|
|
|
|
## MobileDrawer accessibility
|
|
|
|
The MobileDrawer is essentially a
|
|
[modal dialog](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role).
|
|
A `title` should be passed in props to properly label the dialog, and at least
|
|
one interactive item should be present in the inner content.
|
|
|
|
The MobileDrawer component utilises the `focus-trap` library to ensure that:
|
|
|
|
- When the drawer is opened, focus is transferred to the first interactive item
|
|
in that drawer
|
|
- When the drawer is closed, focus is transferred back to the button that
|
|
activated the drawer
|
|
- While the drawer is open, focus is trapped inside so that when a user presses
|
|
the Tab key, interactive items behind the drawer are not focused
|
|
- When the drawer is open, pressing the Escape key will close it
|