chore: 🤖 add aria-describedby for fields with helper text

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}}
 

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>

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}}

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}}
 

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) {

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) {

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) {