Deprecated as of v.2.0.0. There is no current replacement for this component. Only use along side other deprecated form fields.
Taxonomic name: O-SEARCH
Beta v1.0.0 - Updated 14/03/17.
Notes for developers
Ensure that the
aria-flowto attribute matches the id for the next element to be tabbed to eg the
aria-flowto attribute for the search input must match the id for the search filter.
Notes for testers
Ensure that when hovering over the button the style changes noticeably.
Ensure that when input or button has focus the style changes noticeably.
Ensure that the input has a correctly associated label.
Note: the elements of this form are being reordered at medium and large screens using css3 techniques that are not supported in all browsers. These older browsers will keep the elements in the same order as on small screens.
Known accessibility issues
Some browsers may re-flow the tab order to the following on medium and large screens:
search input >
search button >
However the tab order should always be:
search input >
search filter >
Aria flowto attributes have been added to help mitigate this issue for those browsers for screen reader users but they only benefit when using specific keyboard commands and support for this attribute is currently very poor.
<fieldset> <legend>...</legend> <div class="search"> <div class="form-row m-form-row--light form-row--search"> <label class="form-label" for="...">...</label> <div class="form-row__content"> <input class="form-input" type="search" name="..." id="..." value="..." aria-flowto="..." /> </div> </div> <fieldset class="form-row m-form-row--light form-row--search-filter" id="..." aria-flowto="..."> <legend>...</legend> <ul class="plain-list filter"> <li class="filter__item"><input class="filter__input" type="radio" id="..." name="..." value="..." /><label for="..." class="filter__label">...</label></li> ... </ul> </fieldset> <div class="form-row form-row--search-btn"> <div class="form-row__content"> <button class="btn btn--primary" id="..." type="submit">...</button> </div> </div> </div> </fieldset>
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style for search form||Yes||
||Must contain a form row for a search input, filter and button|
||Modifier for a form row to hide the seach field label for all screens and restrict the ultimate size of the search input||Yes||
||Modifier for a form row place this last within the search form on medium and large screens||Yes||
||Modifier for a form row place this after the search input within the search form on medium and large screens||Yes||
Tabbing to the input or button should make them clearly visually different so that the focus point on the page is obvious to the user
With focus on the button, pressing SPACE or ENTER will submit the search form