From c3b6c0341188ecc77c83d3e1970b65144754b922 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 7 Jan 2021 14:30:48 +0000
Subject: [PATCH] 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        |  4 ++++
 .../views/edit-broadcast-template.html        |  2 +-
 app/templates/views/edit-sms-template.html    |  2 +-
 tests/app/main/views/test_templates.py        | 12 +++++++++++
 tests/javascripts/updateStatus.test.js        | 21 ++++++++++++++++++-
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/updateStatus.js b/app/assets/javascripts/updateStatus.js
index 03b0645a7..071c622e0 100644
--- a/app/assets/javascripts/updateStatus.js
+++ b/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');
 
diff --git a/app/templates/views/edit-broadcast-template.html b/app/templates/views/edit-broadcast-template.html
index ed0ba12b9..21d488885 100644
--- a/app/templates/views/edit-broadcast-template.html
+++ b/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>
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 93d24dae2..bc6a408f0 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/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>
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index 278745227..5ec9671fe 100644
--- a/tests/app/main/views/test_templates.py
+++ b/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,
diff --git a/tests/javascripts/updateStatus.test.js b/tests/javascripts/updateStatus.test.js
index 2aaa91126..35fb360b1 100644
--- a/tests/javascripts/updateStatus.test.js
+++ b/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();