Skip to content

Commit

Permalink
add note to select_with_search on accessibility issues
Browse files Browse the repository at this point in the history
issues with Voice Over compatibility where flagged
in our accessibility audit [1]

```
After using text search, the organisation list of
options aren’t announced using keyboard arrow
up/down. Tested with Safari + VoiceOver.

Users should be able to access this list using a
keyboard or other input methods, with each item
being announced along with a count of the total
number of options.
```

I don't think there is an easy way for us to fix
these as the component relies on an external
library, Choices. I managed to use the
`autocomplete` component and get the same
functionality and meet accessibility requirements by passing in

```
    autocomplete_configuration_options: {
      showAllValues: true,
    },
```

[1] https://trello.com/c/t8Yu5ImI/793-combobox-lead-organisations-names-should-be-announced-with-a-text-reader-severe
  • Loading branch information
Harriethw committed Jan 10, 2025
1 parent 39ef096 commit ef8e2f5
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions app/views/components/docs/select_with_search.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
name: Select with search
description: A dropdown select with search
body: |
NOTE: this component currently fails WCAG compliance for keyboard navigation, as the total number of options are not
announced when using Voice Over - the [autocomplete](./autocomplete.yml) component can provide same functionality and
meets the accessibility requirements.
Use this component to create a JavaScript-enhanced dropdown select.
It's powered by [Choices.js][], which is similar to [Select2][] but without the jQuery dependency.
Expand Down

0 comments on commit ef8e2f5

Please sign in to comment.