Add ARIA attributes from Design System component

This commit copies the same ARIA attributes that are added to the
character count component[1] in the GOV.UK Design System.

This means that screen reader users will hear the count message when
they stop typing.

1. https://design-system.service.gov.uk/components/character-count/

app/assets/javascripts/updateStatus.js

@@ -14,7 +14,11 @@
       this.$component = $(component);
       this.$textbox = $('#' + this.$component.data('target'));
 
+      this.$component
+        .attr('id', id);
+
       this.$textbox
+        .attr('aria-described-by', this.$textbox.attr('aria-described-by') + ' ' + id)
         .on('input', this.update)
         .trigger('input');
 

app/templates/views/edit-broadcast-template.html

@@ -28,7 +28,7 @@
         <div class="js-stick-at-bottom-when-scrolling">
           {{ page_footer('Save') }}
           <span class="template-content-count">
-            <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='broadcast') }}">
+            <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='broadcast') }}" aria-live="polite">
             </div>
           </span>
         </div>

app/templates/views/edit-sms-template.html

@@ -31,7 +31,7 @@
           <div class="js-stick-at-bottom-when-scrolling">
             {{ page_footer('Save') }}
             <span class="template-list-selected-counter">
-              <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}">
+              <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
               </div>
             </span>
           </div>

tests/app/main/views/test_templates.py

@@ -484,6 +484,12 @@ def test_should_show_page_for_one_template(
         template_type='sms',
     )
 
+    assert (
+        page.select_one('[data-module=update-status]')['aria-live']
+    ) == (
+        'polite'
+    )
+
     mock_get_service_template.assert_called_with(SERVICE_ONE_ID, template_id, None)
 
 
@@ -518,6 +524,12 @@ def test_broadcast_template_doesnt_highlight_placeholders_but_does_count_charact
         template_type='broadcast',
     )
 
+    assert (
+        page.select_one('[data-module=update-status]')['aria-live']
+    ) == (
+        'polite'
+    )
+
 
 def test_caseworker_redirected_to_one_off(
     client_request,

tests/javascripts/updateStatus.test.js

@@ -44,7 +44,8 @@ describe('Update content', () => {
     document.body.innerHTML = `
       <form>
         <input type="hidden" name="csrf_token" value="abc123" />
-        <textarea name="template_content" id="template_content">Content of message</textarea>
+        <label for="template_content" id="template-content-label">Template content<label>
+        <textarea name="template_content" id="template_content" aria-described-by="template-content-label">Content of message</textarea>
       </form>
       <div data-module="update-status" data-updates-url="${updatesURL}" data-target="template_content">
         Initial content
@@ -65,6 +66,24 @@ describe('Update content', () => {
 
   });
 
+  test("It should add attributes to the elements", () => {
+
+    window.GOVUK.modules.start();
+
+    expect(
+      document.querySelectorAll('[data-module=update-status]')[0].id
+    ).toEqual(
+      "update-status"
+    );
+
+    expect(
+      document.getElementById('template_content').getAttribute('aria-described-by')
+    ).toEqual(
+      "template-content-label update-status"
+    );
+
+  });
+
   test("It should make requests to the URL specified in the data-updates-url attribute", () => {
 
     window.GOVUK.modules.start();