Accessible autocomplete (Type ahead)

[kelliedesigner]

Existing

Published components and patterns

• Accessible autocomplete on GOV.UK's GitHub repo
• IMS has a JS typeahead solution
• Autocomplete in DVSA Design System

GitHub discussions and blog posts

• We're building an autocomplete - on Design in government blog

• Building an accessible autocomplete - on Adam Silver's blog

Variation

Product name - HMPPS > Prisons > Moving a prisoner to hospital

What the product does - Helps providers/applicants apply for legal aid

Who the users are - Who the users are: Providers/Applicants

What the user need is for this variation
There is a need for users to be able to choose from a list of over 100 items.

Publishing this component is needed as a published version does not yet exist in the GOV.UK Design System

Using the existing component

The existing accessible autocomplete component on GOV.UK's GitHub repo has been used in several live services.

• Prepare a case for sentence - Probation
• Apply for compensation - CICA
• Workflow tool - OPG
• Asking for a local planning authority - DEFRA

Research showed:

Designing a variation

The team used their research to design a variation of the component that would meet the user need.

This variation:

Research on this variation

This variation:

Guidance

When to use

When not to use

How to use

Contribute

Things we don't know enough about

[RoseSAK]

Apply typeahead component

In Apply we have our own custom search/typeahead component on the proceedings search page

Behaviour

The user types a search term, and the results are returned with the search term(s) highlighted. Hovering over an item highlights the row. The user can then select a proceeding type using the radio buttons, and click the 'Save and continue' button. This component is used in conjunction with the add another pattern. The user is taken to the next page which asks them if they would like to add another proceeding. If they select 'Yes' they are taken back to the search page to add a further proceeding type.

Search results return once a user has entered more than 2 characters, and update automatically following further typing or removal of characters.

Accessibility

There is a visually hidden element which informs users that results will return automatically. There is also an aria-live region which is updated when the search results are returned with a message notifying the user that results have returned, along with the number of results. The results section behaves the same as a normal radio button group. Tabbing takes you into the group, and the up/down arrows are used to navigate between results and select an item. Tabbing again then takes you out of the group and moves focus to the 'Save and continue' button.

User research

We have found in user research that users often expect that they can select multiple proceedings at once from the search results, and try to do this. However users have also commented that they like that you can see a list of the proceedings you have selected on the next page, and that you are asked if you would like to select another one.

Implementation

The search behaviour is implemented using JavaScript. The JS can be found here and the CSS is here.

At the moment, we are retrieving the list of proceeding types from an internal endpoint using an AJAX call. On page load, we then create a list of hidden proceeding items. The search functionality is implemented using a backend service (code here) also called using AJAX. When search results are returned, we iterate through the results and display the corresponding HTML element for each result, and add the highlighting.

Note: We are considering constructing the HTML elements on the fly as results are returned and iterated through, rather than having everything already on the page but hidden. At the moment in our service we have a limited number of items to search through, but in the future we expect this list to expand quite significantly.

Example HTML code below, with two available items to search. The first item is visible with search term highlighted, the second item is hidden:

<div id="search-field" class="govuk-form-group govuk-!-margin-top-0 govuk-!-margin-bottom-0 ">
  <h2 class="govuk-heading-m govuk-!-margin-bottom-0">
    <label class="govuk-heading-m govuk-!-margin-bottom-0" for="proceeding-search-input">
      Search for legal proceedings
      <span class="govuk-hint govuk-!-margin-top-0 govuk-!-width-two-thirds">
        Select one domestic abuse or Section 8 proceeding at a time. You must select at least one domestic abuse proceeding.
        <span class="govuk-visually-hidden">Enter search term, results will automatically return</span>
      </span>
    </label>
  </h2>

  <div class="govuk-grid-row search-field govuk-!-margin-top-0">
    <div class="govuk-grid-column-two-thirds govuk-!-margin-top-0">
      <input class="govuk-input " id="proceeding-search-input" name="proceeding-search-input" type="text" autocomplete="off">
    </div>

    <div class="govuk-grid-column-one-third govuk-!-margin-top-2 clear-search">
      <p><a class="govuk-link govuk-!-font-size-19" id="clear-proceeding-search" aria-label="Clear search" href="#">Clear search</a></p>
    </div>
  </div>
</div>
<form action="#" method="post">
    <div id="proceeding-list" class="govuk-grid-column-two-thirds govuk-list govuk-!-margin-bottom-0">
        <div class="govuk-form-group">
          <fieldset class="govuk-fieldset">
             <legend class="govuk-fieldset__legend govuk-fieldset__legend--m govuk-visually-hidden">Id</legend><div class="govuk radios" data-module="govuk-radios">
              <div id="PR0200" class="govuk-grid-row proceeding-item" style-"display: block;">
                <div class="govuk-radios__item">
                  <input id="id-a" class="govuk-radios__input" aria-describedby="id-a-hint" type="radio" value="a" name="id">
                  <label for="id-a-field" class="govuk-label govuk-radios__label">
                    <mark class="highlight">Child</mark> arrangements order 
                  </label>
                  <span class="govuk-hint govuk-radios__hint" id="id-a-hint">Family (Section 8 orders)</span>
                </div>
              </div>
              <div id="PR0203" class="govuk-grid-row proceeding-item">
                <div class="govuk-radios__item">
                  <input id="id-b-field" class="govuk-radios__input" aria-describedby="id-b-hint" type="radio" value="b" name="id">
                  <label for="id-b-field" class="govuk-label govuk-radios__label">Forced marriage protection order</label>
                  <span class="govuk-hint govuk-radios__hint" id="id-b-hint">Family (Domestic Abuse)</span>
                </div>
            </div>
          </legend>
        </fieldset>
      </div>
    </div>
  </form>
<div id="screen-reader-messages" class="govuk-visually-hidden" aria-live="polite" aria-atomic="true" role="alert"></div>

[andreea-moj]

Autocomplete for 'Refer and monitor an intervention' service

On the 'Refer and Monitor an Intervention' service, we’ve been exploring the use of an autocomplete field for selecting a Probation Delivery Unit (PDU) in the 'Find' journey (currently in the browse sub-stage).

Key Details:

• The service supports both custody and community settings, which helps refine the list of search results based on context.
• We’re using the autocomplete component from the GOV.UK Design System to help users select the correct PDU while reducing the risk of typos.
• The PDU list is sourced from the HMPPS Area Model: Six Areas and Wales

Next Steps:

• Confirm wording for the field as this is still under content review.
• This component will undergo user research within our team to validate its effectiveness before moving into development.
• We'll need to confirm if there are any limitations as a result of the autocomplete component being part of the conditional reveal.

Printscreens:

• When the autocomplete found a number of matches
  
• When the autocomplete cannot find a match
  
• Looking as the bigger picture, the autocomplete is part of the MOJ filter component, under a conditional reveal (subject to change as this is early design)