From ef8e2f50e8552e355860d07badb5243e31a78e29 Mon Sep 17 00:00:00 2001 From: Harriet H-W Date: Wed, 8 Jan 2025 17:32:03 +0000 Subject: [PATCH] add note to select_with_search on accessibility issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/views/components/docs/select_with_search.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/views/components/docs/select_with_search.yml b/app/views/components/docs/select_with_search.yml index 3015607a13c..bd9f6feed93 100644 --- a/app/views/components/docs/select_with_search.yml +++ b/app/views/components/docs/select_with_search.yml @@ -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.