Use an autocomplete for registrar selection

cypress/e2e/bad-email.cy.js

@@ -3,7 +3,7 @@ describe('Email format verification', () => {
     cy.visit('http://0.0.0.0:8000/')
 
     cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
     cy.get('.govuk-button#id_submit').click()
 
     cy.get('h1').should('include.text', 'What is your email address?')

cypress/e2e/exemption-happy-path.cy.js

@@ -4,7 +4,7 @@ describe('Happy passes', () => {
 
     cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
     cy.get('select.govuk-select').should('exist')
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
     cy.get('.govuk-button#id_submit').click()
 
 

cypress/e2e/happy-path.cy.js

@@ -5,7 +5,7 @@ describe('Happy passes', () => {
     cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
     cy.get('select.govuk-select').should('exist')
 
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
 
     cy.get('.govuk-button#id_submit').click()
 

cypress/e2e/no-email.cy.js

@@ -3,7 +3,7 @@ describe('Check if user entered an email', () => {
     cy.visit('http://0.0.0.0:8000/')
 
     cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
     cy.get('.govuk-button#id_submit').click()
 
     // Don't type anything, just click on the button

cypress/e2e/no-org-type-selected.cy.js

@@ -3,7 +3,7 @@ describe('Email format verification', () => {
     cy.visit('http://0.0.0.0:8000/')
 
     cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
     cy.get('.govuk-button#id_submit').click()
 
     cy.get('h1').should('include.text', 'What is your email address?')

cypress/e2e/no-registrar-selected.cy.js

@@ -10,7 +10,7 @@ describe('Registrar no-select error', () => {
     cy.get('#error-summary-title').should('include.text', 'There is a problem')
     cy.get('#id_organisations_choice_1_error').should('include.text', 'This field is required')
 
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
     cy.get('.govuk-button#id_submit').click()
 
     cy.get('h1').should('include.text', 'What is your email address?')

cypress/e2e/not-eligible.cy.js

@@ -3,7 +3,7 @@ describe('Registrant not eligible', () => {
     cy.visit('http://0.0.0.0:8000/')
 
     cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
-    cy.get('select.govuk-select').select('WeRegister')
+    cy.get('#id_organisations_choice').type('WeRegister')
     cy.get('.govuk-button#id_submit').click()
 
 

cypress/e2e/written-permission-yes.cy.js

@@ -5,7 +5,7 @@ describe('Traverses to Written Permission page and selects Yes', () => {
         cy.get('h1').should('include.text', 'Which .gov.uk Approved Registrar organisation are you from?')
         cy.get('select.govuk-select').should('exist')
 
-        cy.get('select.govuk-select').select('WeRegister')
+        cy.get('#id_organisations_choice').type('WeRegister')
 
         cy.get('.govuk-button#id_submit').click()
 

request_a_govuk_domain/request/forms.py

@@ -437,7 +437,7 @@ class RegistrarForm(forms.Form):
     Registrar Form with organisations choice fields
     """
 
-    registrars = [("", "Select an item from the list")] + list(
+    registrars = [("", "")] + list(
         (f"registrar-{registrar.id}", registrar.name)
         for registrar in Registrar.objects.all()
     )

request_a_govuk_domain/request/templates/base.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="manifest" href="{% static 'manifest.json' %}">
     <link rel="stylesheet" href="{% static 'govuk-frontend-5.0.0.min.css' %}">
-
+    {% block extra_stylesheets %}{% endblock %}
 </head>
 <body class="govuk-template__body">
 <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
@@ -92,5 +92,6 @@
 
     initAll()
 </script>
+{% block bottomjs %}{% endblock %}
 </body>
 </html>

request_a_govuk_domain/request/templates/registrar.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static %}
 {% load crispy_forms_tags crispy_forms_gds %}
 {% load govuk_frontend_django %}
 
@@ -18,5 +19,18 @@ <h1 class="govuk-heading-l">
       </div>
     </div>
   {% endblock %}
+{% endblock %}
+
+{% block bottomjs %}
+  <script type="text/javascript" src="{% static 'accessible-autocomplete.min.js' %}"></script>
+  <script>
+   accessibleAutocomplete.enhanceSelectElement({
+     selectElement: document.querySelector('#id_organisations_choice'),
+     menuClasses: "govuk-list"
+   })
+  </script>
+{% endblock %}
 
+{% block extra_stylesheets %}
+  <link rel="stylesheet" href="{% static 'accessible-autocomplete.min.css' %}">
 {% endblock %}