We have also added some styling for indicating which part of the result has been matched. Simply surround the characters with a <b>
tag.
<div class="form-item form-item--autosuggest">
<input type="text">
<ul class="autosuggest" autosuggest-state="hidden">
<li class="autosuggest__result">Q<b>uia</b> voluptatibus</li>
<li class="autosuggest__result">Dolor aper<b>uia</b>m</li>
<li class="autosuggest__result">Eos repell<b>uia</b>t ipsum</li>
</ul>
</div>
Accessibility
In addition to the functional styling markup above. To ensure the autosuggest box remains accessible to the visually impaired or those using other input methods, please follow the following guidelines.
<div class="form-item form-item--autosuggest">
<input type="text" aria-autocomplete="list" aria-label="autosuggest" role="combobox" aria-owns="autosuggest-result" aria-activedescendant="selected-option">
<ul role="listbox" autosuggest-state="hidden" id="autosuggest-results" class="autosuggest" aria-expanded="false" tabindex="-1">
<li role="option" class="autosuggest__result" id="alpha">Alpha</li>
<li role="option" class="autosuggest__result" id="beta">Beta</li>
<li role="option" class="autosuggest__result" id="gamma">Gamma</li>
// and so on...
</ul>
</div>
When displaying the suggestions by changing the autosuggest-state
attribute to visible
. You should also change the aria-expanded
attribute to true
and back to false again when hidden.
You must also handle shifting focus to the <ul>
containing the suggestions and allow selection of the <li>
elements using the keyboard arrows. In addition to this you will need to update the aria-activedescendant
attribute on the input tag with the value of the currently selected option.
If in any doubt about these requirements please review the specification
Behaviour
@todo add behaviour guidelines DF-539
Please consult the UX team regarding behviour in the meantime.