Merge pull request #9797 from alphagov/content-modelling/793-accessib…

…le-autocomplete

content modelling/793 accessible autocomplete

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.

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", {

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

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: [email protected]"
+  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 "[email protected]"
+    assert_text @email_address
   end
 end