Modal searchStatusrelease

Show and hide a modal search form.

Guidance

Use this pattern for search forms that should capture focus, take over the whole screen and prevent interaction with the rest of the page until they are closed.

Example

Open in a new tab

Dependencies and installation

Package	Installation
@stormid/modal	`npm i -S @stormid/modal`

Code

<button type="button" class="modal-search__btn js-modal-search__btn" aria-label="Show or hide site search" aria-haspopup="dialog"><svg class="modal-search__btn-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"></path><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>search</button><div role="region" id="modal-search" aria-labelledby="modal-title" class="js-modal-search modal-container" data-modal-toggle="js-modal-search__btn" hidden><div class="modal" role="dialog" aria-labelledby="modal-title"><h2 id="modal-title" class="modal__title">Search this site</h2><form class="modal__form" action="#" role="search"><label class="modal__label" for="q">Input your search term</label><input class="modal__input" type="search" id="q" name="q"/><button class="modal__search-btn">search</button></form><button type="button" class="modal__close js-modal-search__btn" aria-label="Close search"><svg class="modal__close-icon" focusable="false" aria-hidden="true" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg></button></div></div>

import modal from '@stormid/modal';

modal('.js-modal-search');

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the search behaves visually and functionally as expected.

For validation in developer tools / web inspector

An HTML
```
<button>
```
element is used to open the search
An HTML
```
<button>
```
element is used to close the search
The search modal should be an HTML element with a
```
role="dialog"
```
attribute. This element must contain everything that's visible within the modal when it opens
The search modal element should either have an
```
aria-label
```
attribute which titles the content, or an
```
aria-labelledby
```
attribute that points to a visible
```
<h2>
```
element with a matching ID
The element containing the modal should have a role="region" attribute (or be another valid landmark element), so that the modal can be contained within a valid page landmark when moved into position

For visual validation

Search toggle buttons should have a clearly visible focus style which meets accessibility contrast requirements
Search toggle buttons should be appropriately labelled to describe their functionality. If the design requires no visible text, a label should be added as an
```
aria-label
```
attribute on the
```
<button>
```
element
Search toggle buttons should have an
```
aria-haspopup="dialog"
```
attribute on the
```
<button>
```
element
Search toggle buttons should be no less than 44px x 44px in size (unless any of the the allowed WCAG exceptions apply)
The search form should be hidden visually, hidden from keyboard access, and not read by screen readers when the search is closed
The search form should be visible, available for keyboard access and read by screen readers when the search is opened
The search modal should be an HTML element with a
```
role="dialog"
```
attribute. This element must contain everything that's visible within the modal when it opens
Any form inputs within the search form should have a matching label describing its functionality. If the design does not use a visible label (for example, it may only ask for a placholder in the input itself) then the input should still be labelled either with an
```
aria-label
```
attribute, or a visually hidden label
Any form inputs within the search form should have a clearly visible focus style which meets accessibility contrast requirements

For functional validation

Search open and close buttons should be available to be tabbed to and activated via keyboard
The first available form input, button or link within the search form should receive visible focus when the search is opened
When the search is open, it should not be possible to access the page content beneath via mouse, keyboard, or any other means
When the search is open, the page behind must not be scrollable. The original scroll position must be restored when the search is closed
When the search is open, the user's tab should be 'trapped'. Tabbing should loop within the search until the search is closed
Pressing the 'escape' key on the keyboard should close the modal
When the search is closed, visible focus should return to the button which opened the search

UI Patterns