JS to add focus when user presses ESC on autocomplete input

Refactor expand your business js import into base.html

core/static/javascript/expand-your-business.js

@@ -18,3 +18,23 @@ function handleSpendRadioClick(radio) {
     document.getElementById('id_spend_other').value = '';
   }
 }
+
+// the autocomplete library we use has a known accessability issue (see https://github.com/alphagov/accessible-autocomplete/issues/692)
+// whereby if users press esc on the autocomplete dropdown list focus is lost from the input element.
+// below is a workaround to accomodate this.
+function autocompleteFocusOnESC(elementName){
+  const element = document.querySelector(elementName)
+  // return focus to input if esc is pressed on autocomplete list
+  element.addEventListener("keydown", (e)=>{
+      if (e.key == 'Escape'){
+          setTimeout(()=>{
+              element.focus()
+              element.classList.add('autocomplete__input--focused')
+          },2)
+      }
+  })
+  // remove focus styling when user navigates away from the dropdown.
+  element.addEventListener("focusout", (e)=>{
+    element.classList.remove('autocomplete__input--focused')
+  })
+}

international_online_offer/forms.py

@@ -27,7 +27,7 @@
 
 class SectorForm(forms.Form):
     sector_sub = ChoiceField(
-        label="",
+        label='',
         help_text='Search a list of activities and select the closest description',
         required=True,
         widget=Select(

international_online_offer/templates/eyb/base.html

@@ -18,3 +18,7 @@
         {% if feature_pre_election and feature_eyb_home %}</div>{% endif %}
     {{ block.super }}
 {% endblock %}
+{% block body_js %}
+    <script type="text/javascript"
+            src="{% static 'javascript/expand-your-business.js' %}"></script>
+{% endblock %}

international_online_offer/templates/eyb/guide.html

@@ -398,8 +398,3 @@ <h3 class="govuk-heading-m article-list-item-title">{{ page.article_title }}</h3
                         </div>
                     </div>
                 {% endblock %}
-                {% block body_js %}
-                    {{ block.super }}
-                    <script type="text/javascript"
-                            src="{% static 'javascript/expand-your-business.js' %}"></script>
-                {% endblock %}

international_online_offer/templates/eyb/profile.html

@@ -34,8 +34,6 @@ <h3 class="govuk-heading-l">{{ title }}</h3>
     {{ block.super }}
     <script type="text/javascript"
             src="{% static 'javascript/accessible-autocomplete.min.js' %}"></script>
-    <script type="text/javascript"
-            src="{% static 'javascript/expand-your-business.js' %}"></script>
     <script type="text/javascript">
     const countries = [
         'Abu Dhabi',
@@ -315,18 +313,5 @@ <h3 class="govuk-heading-l">{{ title }}</h3>
       minLength: 2,
     });
     </script>
-    <script type="text/javascript">
-        // return focus to input if esc is pressed on autocomplete list
-        const listDropDown = document.querySelector('#js-company-location-select')
-        console.log('hello')
-        listDropDown.addEventListener("keydown", (e)=>{
-            if (e.key == 'Escape'){
-                console.log('pressed escape')
-                setTimeout(()=>{
-                    listDropDown.focus()
-                    listDropDown.classList.add('autocomplete__input--focused')
-                },15)
-            }
-        })
-    </script>
+    <script type="text/javascript">autocompleteFocusOnESC('#js-company-location-select')</script>
 {% endblock %}

international_online_offer/templates/eyb/triage/intent.html

@@ -61,6 +61,4 @@
     {{ block.super }}
     <script type="text/javascript"
             src="{% static 'javascript/dit.components.toggleOther.js' %}"></script>
-    <script type="text/javascript"
-            src="{% static 'javascript/expand-your-business.js' %}"></script>
 {% endblock %}

international_online_offer/templates/eyb/triage/location.html

@@ -66,8 +66,6 @@
     {{ block.super }}
     <script type="text/javascript"
             src="{% static 'javascript/accessible-autocomplete.min.js' %}"></script>
-    <script type="text/javascript"
-            src="{% static 'javascript/expand-your-business.js' %}"></script>
     <script type="text/javascript">
         // Gets json list of regions and cities from django - flattens to use
         // with autocomplete.
@@ -129,4 +127,5 @@
             }
         });
     </script>
+    <script type="text/javascript">autocompleteFocusOnESC('#js-location-select')</script>
 {% endblock %}

international_online_offer/templates/eyb/triage/sector.html

@@ -48,8 +48,6 @@
     {{ block.super }}
     <script type="text/javascript"
             src="{% static 'javascript/accessible-autocomplete.min.js' %}"></script>
-    <script type="text/javascript"
-            src="{% static 'javascript/expand-your-business.js' %}"></script>
     <script type="text/javascript">
         const sectorsAndSICSectors = JSON.parse("{{autocomplete_sector_data | escapejs}}").data;
         const sicTextContainer = document.querySelector('#sic-text');
@@ -124,4 +122,5 @@
         }
         });
     </script>
+    <script type="text/javascript">autocompleteFocusOnESC('#js-sector-select')</script>
 {% endblock %}

international_online_offer/templates/eyb/triage/spend.html

@@ -64,6 +64,4 @@
     {{ block.super }}
     <script type="text/javascript"
             src="{% static 'javascript/dit.components.toggleOther.js' %}"></script>
-    <script type="text/javascript"
-            src="{% static 'javascript/expand-your-business.js' %}"></script>
 {% endblock %}