Expandable searchStatusrelease

Show and hide inline search with a button.

Guidance

Use this pattern for a search form that expands and collapses in the document flow. In contrast modal search captures focus, takes over the whole screen and prevents interaction with the rest of the page. The expandable pattern does not trap tab in the same way.

Example

Open in a new tab

Dependencies and installation

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

Code

<div class="expandable-search__container"><button class="expandable-search__btn js-expandable-search__btn" aria-label="Show or hide site search"><svg class="expandable-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></button><div class="expandable-search js-expandable-search" id="expandable-search" data-toggle="js-expandable-search__btn"><form class="expandable-search__form" action="#" role="search"><label class="expandable-search__label" for="q">Input your search term</label><input class="expandable-search__input" type="search" id="q" name="q"/><button class="expandable-search__submit">search</button></form></div></div>

import toggle from '@stormid/toggle';

toggle('.js-expandable-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/close the search
An
```
aria-expanded
```
attribute should be present on the toggle
```
<button>
```
. The value of this should be 'true' when the search is visible, and 'false' when the search is hidden.
The toggle
```
<button>
```
element should have an
```
aria-controls
```
attribute. The value of this should match the ID of the element being shown/hidden.

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 be no less than 44px x 44px in size (unless any of 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 open
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 toggle 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
It should be possible to tab into the search form if the search is open
When open, the search should not trap tab - a user should be able to tab out of the menu to page content below

UI Patterns