From 6f514ef019df0d4e1039125911410d5148ac90c5 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 8 Jan 2021 12:53:06 +0000
Subject: [PATCH] Describe example textbox by hint not label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `<textarea>` should have its existing `aria-describedby` point to a
hint. Pointing to the label is bad practice as it would duplicate the
accessible name into the accessible description. It’s good not to have
that in the tests in case anyone copies the code elsewhere.
---
 tests/javascripts/updateStatus.test.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tests/javascripts/updateStatus.test.js b/tests/javascripts/updateStatus.test.js
index ae0fa5b24..fc84a2600 100644
--- a/tests/javascripts/updateStatus.test.js
+++ b/tests/javascripts/updateStatus.test.js
@@ -45,7 +45,8 @@ describe('Update content', () => {
       <form>
         <input type="hidden" name="csrf_token" value="abc123" />
         <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>
+        <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>
       </form>
       <div data-module="update-status" data-updates-url="${updatesURL}" data-target="template_content">
         Initial content
@@ -79,7 +80,7 @@ describe('Update content', () => {
     expect(
       document.getElementById('template_content').getAttribute('aria-described-by')
     ).toEqual(
-      "template-content-label update-status"
+      "example-hint-text update-status"
     );
 
   });