maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
docbrown/app/javascript/crayons/MobileDrawer/__stories__/drawers.md
Suzanne Aitchison a6b4d8e91d
Create crayons mobile drawer components (#14495) 
* add MobileDrawer component

* WIP begin navigation component

* rough working version complete

* update story to allow for actual navigation

* add component tests

* add docs

* add HTML variants

* add a max width to the drawer
2021-08-16 08:41:26 +01:00

1.2 KiB
Raw Blame History

MobileDrawers

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. 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