Make autofocus work on all form elements which ask for it

In 674c27a693 we updated the autofocus
Javascript to be compatible with GOV.UK Frontend textboxes, which have
the `data-module` attribute set on the `input` element, rather than on
a wrapper element.

However we still have some `<textarea>`s and `<input>`s which haven’t
moved to GOV.UK Frontend and therefore aren’t getting picked up by the
Javascript which is supposed to focus them.

This commit makes the Javascript work with both kinds of textbox, which
is needed until we move entirely to GOV.UK Frontend.

app/assets/javascripts/autofocus.js

@@ -10,7 +10,16 @@
       // is still where users intend to start
       if (($(window).scrollTop() > 0) && !forceFocus) { return; }
 
-      $component.filter('input, textarea, select').eq(0).trigger('focus');
+      // See if the component itself is something we want to send focus to
+      var target = $component.filter('input, textarea, select');
+
+      // Otherwise look inside the component to see if there are any elements
+      // we want to send focus to
+      if (target.length === 0) {
+        target = $('input, textarea, select', $component);
+      }
+
+      target.eq(0).trigger('focus');
 
     };
   };

tests/javascripts/autofocus.test.js

@@ -20,7 +20,7 @@ describe('Autofocus', () => {
 
     // set up DOM
     document.body.innerHTML =
-      `<div>
+      `<div id="wrapper">
         <label class="form-label" for="search">
           ${labelText}
         </label>
@@ -50,6 +50,18 @@ describe('Autofocus', () => {
 
   });
 
+  test('is focused when attribute is set on outer element', () => {
+
+    document.getElementById('search').removeAttribute('data-module');
+    document.getElementById('wrapper').setAttribute('data-module', 'autofocus');
+
+    // start module
+    window.GOVUK.modules.start();
+
+    expect(focusHandler).toHaveBeenCalled();
+
+  });
+
   test('is not focused if the window has scrolled', () => {
 
     // mock the window being scrolled 25px