From 4c9d265e896e0d447204e16469564a52dfbb38ab Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 28 May 2020 10:21:30 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20aria-describedby?=
 =?UTF-8?q?=20for=20fields=20with=20helper=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/templates/components/rose/form/input.hbs  |  9 +++++++--
 .../addon/templates/components/rose/form/select.hbs |  7 ++++++-
 .../components/rose/form/select/select.hbs          |  1 +
 .../templates/components/rose/form/textarea.hbs     |  9 +++++++--
 .../integration/components/rose/form/input-test.js  | 11 +++++++----
 .../integration/components/rose/form/select-test.js | 13 ++++++++-----
 .../components/rose/form/textarea-test.js           | 11 +++++++----
 7 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index b08cc58c9..9a79d8935 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -5,7 +5,11 @@
   </label>
 
   {{#if @helperText}}
-    <span class="rose-form-input-helper-text">{{@helperText}}</span>
+    <span
+      class="rose-form-input-helper-text"
+      id="helper-text-{{this.id}}">
+      {{@helperText}}
+    </span>
   {{/if}}
 
   <Input
@@ -14,7 +18,8 @@
     id={{this.id}}
     disabled={{@disabled}}
     @type={{@type}}
-    @value={{@value}} />
+    @value={{@value}}
+    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
 
   {{yield}}
 
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index fad5c8edb..d695ca9fd 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -5,7 +5,11 @@
   </label>
 
   {{#if @helperText}}
-    <span class="rose-form-select-helper-text">{{@helperText}}</span>
+    <span
+      class="rose-form-select-helper-text"
+      id="helper-text-{{this.id}}">
+      {{@helperText}}
+    </span>
   {{/if}}
 
   {{yield (component 'rose/form/select/select'
@@ -14,6 +18,7 @@
     disabled=@disabled
     value=@value
     onChange=@onChange
+    helperText=@helperText
   )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/select/select.hbs b/addons/rose/addon/templates/components/rose/form/select/select.hbs
index b7eaf6a6e..ee183f90c 100644
--- a/addons/rose/addon/templates/components/rose/form/select/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select/select.hbs
@@ -5,6 +5,7 @@
   disabled={{@disabled}}
   @value={{@value}}
   @onChange={{@onChange}}
+  aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}"
   as |xs|
 >
   {{yield xs}}
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index df71f667e..9ff48348d 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -5,7 +5,11 @@
   </label>
 
   {{#if @helperText}}
-    <span class="rose-form-input-helper-text">{{@helperText}}</span>
+    <span
+      class="rose-form-input-helper-text"
+      id="helper-text-{{this.id}}">
+      {{@helperText}}
+    </span>
   {{/if}}
 
   <Textarea
@@ -13,7 +17,8 @@
     class="rose-form-input-field"
     id={{this.id}}
     disabled={{@disabled}}
-    @value={{@value}} />
+    @value={{@value}}
+    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
 
   {{yield}}
 
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 7cc960c00..9f2b2da3a 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -14,10 +14,13 @@ module('Integration | Component | rose/form/input', function (hooks) {
 
   test('it displays optional helper text', async function (assert) {
     await render(hbs`<Rose::Form::Input @helperText="Help me" />`);
-    assert.equal(
-      await find('.rose-form-input-helper-text').textContent.trim(),
-      'Help me'
-    );
+    const fieldEl = find('input');
+    const id = fieldEl.id;
+    const helperId = `helper-text-${id}`;
+    const helperTextEl = find('.rose-form-input-helper-text');
+    assert.equal(helperTextEl.textContent.trim(), 'Help me');
+    assert.equal(helperTextEl.id, helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
   });
 
   test('it is type="text" by default', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/form/select-test.js b/addons/rose/tests/integration/components/rose/form/select-test.js
index 3f445aa4a..a789fa5aa 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -32,7 +32,7 @@ module('Integration | Component | rose/form/select', function (hooks) {
     await render(hbs`
       <Rose::Form::Select
         @label="Label"
-        @helperText="Helper text"
+        @helperText="Help me"
         @onChange={{fn this.onChange}}
         as |Field|
       >
@@ -41,10 +41,13 @@ module('Integration | Component | rose/form/select', function (hooks) {
         </Field>
       </Rose::Form::Select>
     `);
-    assert.equal(
-      find('.rose-form-select-helper-text').textContent.trim(),
-      'Helper text'
-    );
+    const fieldEl = find('select');
+    const id = fieldEl.id;
+    const helperId = `helper-text-${id}`;
+    const helperTextEl = find('.rose-form-select-helper-text');
+    assert.equal(helperTextEl.textContent.trim(), 'Help me');
+    assert.equal(helperTextEl.id, helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
   });
 
   test('it supports disabled attribute', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js
index 0e57aff8b..53d5cacf2 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -14,10 +14,13 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
 
   test('it displays optional helper text', async function (assert) {
     await render(hbs`<Rose::Form::Textarea @helperText="Help me" />`);
-    assert.equal(
-      await find('.rose-form-input-helper-text').textContent.trim(),
-      'Help me'
-    );
+    const fieldEl = find('textarea');
+    const id = fieldEl.id;
+    const helperId = `helper-text-${id}`;
+    const helperTextEl = find('.rose-form-input-helper-text');
+    assert.equal(helperTextEl.textContent.trim(), 'Help me');
+    assert.equal(helperTextEl.id, helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
   });
 
   test('it supports disabled attribute', async function (assert) {