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. diff --git a/lib/engines/content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb b/lib/engines/content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb index 41c4ecaf939..e92d9e6bca3 100644 --- a/lib/engines/content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb +++ b/lib/engines/content_block_manager/app/views/content_block_manager/content_block/shared/_form.html.erb @@ -31,19 +31,20 @@ } %> <% end %> - <%= render "components/select_with_search", { + <%= render "components/autocomplete", { id: "#{parent_class}_lead_organisation", name: "content_block/edition[organisation_id]", - label: "Lead organisation", - include_blank: true, - options: taggable_organisations_container.map do |name, id| - { - text: name, - value: id, - selected: id == @form.content_block_edition.edition_organisation&.organisation_id, - } - end, - error_message: errors_for_input(@form.content_block_edition.errors, "lead_organisation".to_sym), + label: { + text: "Lead organisation", + }, + select: { + multiple: false, + options: [""] + taggable_organisations_container, + selected: @form.content_block_edition.edition_organisation&.organisation_id, + }, + autocomplete_configuration_options: { + showAllValues: true, + }, } %> <%= render "govuk_publishing_components/components/textarea", { diff --git a/lib/engines/content_block_manager/features/edit_object.feature b/lib/engines/content_block_manager/features/edit_object.feature index 129a4b45f7b..a72af5c9733 100644 --- a/lib/engines/content_block_manager/features/edit_object.feature +++ b/lib/engines/content_block_manager/features/edit_object.feature @@ -131,7 +131,7 @@ Feature: Edit a content object @javascript Scenario: GDS editor can preview a host document When I revisit the edit page - And I fill out the form + And I save and continue Then I am shown where the changes will take place And I see the rollup data for the dependent content When I click on the first host document diff --git a/lib/engines/content_block_manager/features/step_definitions/content_block_manager_steps.rb b/lib/engines/content_block_manager/features/step_definitions/content_block_manager_steps.rb index 038cc0510cb..aa8d91562c9 100644 --- a/lib/engines/content_block_manager/features/step_definitions/content_block_manager_steps.rb +++ b/lib/engines/content_block_manager/features/step_definitions/content_block_manager_steps.rb @@ -627,7 +627,7 @@ def should_show_edit_form_for_email_address_content_block(document_title, email_ page.switch_to_window(page.windows.last) assert_text "Preview email address" assert_text "Instances: 1" - assert_text "Email address: changed@example.com" + assert_text "Email address: #{@email_address}" within_frame "preview" do assert_text @current_host_document["title"] end @@ -642,7 +642,7 @@ def should_show_edit_form_for_email_address_content_block(document_title, email_ Then("I should see the content of the linked page") do within_frame "preview" do assert_text "other page" - assert_text "changed@example.com" + assert_text @email_address end end