From 2b91d1d5242aba5c609c35717c75daa4909d1819 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 6 Oct 2021 14:21:41 +0100
Subject: [PATCH] Fix mis-spelling of aria-describedby

This is currently spelt incorrectly though it
seemed to work nonetheless. Can only assume this
is a common error, for this attribute or all
attribute names, so browsers work it out.

This makes the spelling match the spec:

https://www.w3.org/TR/wai-aria/#aria-describedby
---
 app/assets/javascripts/updateStatus.js |  6 +++---
 tests/javascripts/updateStatus.test.js | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/updateStatus.js b/app/assets/javascripts/updateStatus.js
index d39e232be..b02ae1690 100644
--- a/app/assets/javascripts/updateStatus.js
+++ b/app/assets/javascripts/updateStatus.js
@@ -49,11 +49,11 @@
 
       this.$textbox
         .attr(
-          'aria-described-by',
+          'aria-describedby',
           (
-            this.$textbox.attr('aria-described-by') || ''
+            this.$textbox.attr('aria-describedby') || ''
           ) + (
-            this.$textbox.attr('aria-described-by') ? ' ' : ''
+            this.$textbox.attr('aria-describedby') ? ' ' : ''
           ) + id
         )
         .on('input', throttle(this.update, 150))
diff --git a/tests/javascripts/updateStatus.test.js b/tests/javascripts/updateStatus.test.js
index a626d1fdb..5966f40e7 100644
--- a/tests/javascripts/updateStatus.test.js
+++ b/tests/javascripts/updateStatus.test.js
@@ -46,7 +46,7 @@ describe('Update content', () => {
         <input type="hidden" name="csrf_token" value="abc123" />
         <label for="template_content" id="template-content-label">Template content<label>
         <span id="example-hint-text">Example hint text</span>
-        <textarea name="template_content" id="template_content" aria-described-by="example-hint-text">Content of message</textarea>
+        <textarea name="template_content" id="template_content" aria-describedby="example-hint-text">Content of message</textarea>
       </form>
       <div data-module="update-status" data-updates-url="${updatesURL}" data-target="template_content">
         Initial content
@@ -78,21 +78,21 @@ describe('Update content', () => {
     );
 
     expect(
-      document.getElementById('template_content').getAttribute('aria-described-by')
+      document.getElementById('template_content').getAttribute('aria-describedby')
     ).toEqual(
       "example-hint-text update-status"
     );
 
   });
 
-  test("It should handle a textarea without an aria-described-by attribute", () => {
+  test("It should handle a textarea without an aria-describedby attribute", () => {
 
-    document.getElementById('template_content').removeAttribute('aria-described-by');
+    document.getElementById('template_content').removeAttribute('aria-describedby');
 
     window.GOVUK.modules.start();
 
     expect(
-      document.getElementById('template_content').getAttribute('aria-described-by')
+      document.getElementById('template_content').getAttribute('aria-describedby')
     ).toEqual(
       "update-status"
     );