feat(a11y): add aria invalid and describedby attributes on validation

Closes #48

addon/components/validated-input.hbs

@@ -21,11 +21,11 @@
   }}
 
   {{#if @hint}}
-    <this.hintComponent @hint={{@hint}} />
+    <this.hintComponent @hint={{@hint}} id={{this.hintId}} />
   {{/if}}
 
   {{#if (and this.showValidity this.errors)}}
-    <this.errorComponent @errors={{this.errors}} />
+    <this.errorComponent @errors={{this.errors}} id={{this.errorId}} />
   {{/if}}
 {{else}}
   <this.renderComponent
@@ -64,12 +64,20 @@
     }}
     @hintComponent={{if
       @hint
-      (component (ensure-safe-component this.hintComponent) hint=@hint)
+      (component
+        (ensure-safe-component this.hintComponent) hint=@hint id=this.hintId
+      )
     }}
     @errorComponent={{if
       (and this.showValidity this.errors)
-      (component (ensure-safe-component this.errorComponent) errors=this.errors)
+      (component
+        (ensure-safe-component this.errorComponent)
+        errors=this.errors
+        id=this.errorId
+      )
     }}
+    aria-invalid={{if this.isInvalid "true"}}
+    aria-describedby={{if this.isInvalid this.errorId this.hintId}}
     ...attributes
   />
 {{/if}}

addon/components/validated-input.js

@@ -1,5 +1,6 @@
 import { action, set, get } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
+import { isEmpty } from "@ember/utils";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
@@ -21,6 +22,14 @@ import passedOrDefault from "ember-validated-form/passed-or-default";
 export default class ValidatedInputComponent extends Component {
   inputId = guidFor(this);
 
+  get errorId() {
+    return `${this.inputId}-error`;
+  }
+
+  get hintId() {
+    return !isEmpty(this.args.hint) ? `${this.inputId}-hint` : null;
+  }
+
   @tracked dirty;
   @tracked required;
   @tracked type;

addon/components/validated-input/error.hbs

@@ -1,9 +1,10 @@
 {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
-  <small class="uk-text-danger" ...attributes>
+  <small id={{@id}} class="uk-text-danger" ...attributes>
     {{yield}}{{this.errorString}}
   </small>
 {{else}}
   <span
+    id={{@id}}
     class={{if
       (macroCondition (macroGetOwnConfig "isBootstrap"))
       "d-block invalid-feedback"

addon/components/validated-input/hint.hbs

@@ -1,4 +1,5 @@
 <small
+  id={{@id}}
   class={{class-list
     (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-text-muted")
     (if

addon/components/validated-input/types/checkbox-group.hbs

@@ -14,6 +14,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       {{option.label}}
     </label>
@@ -29,6 +30,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       <label
         class="custom-control-label"

addon/components/validated-input/types/checkbox.hbs

@@ -10,6 +10,7 @@
       disabled={{@disabled}}
       checked={{@value}}
       {{on "input" this.onUpdate}}
+      ...attributes
     />
   </@labelComponent>
 {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
@@ -24,6 +25,7 @@
       disabled={{@disabled}}
       checked={{@value}}
       {{on "input" this.onUpdate}}
+      ...attributes
     />
     <@labelComponent class="custom-control-label" />
   </div>

addon/components/validated-input/types/radio-group.hbs

@@ -15,6 +15,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       {{option.label}}
     </label>
@@ -31,6 +32,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       <label
         class="custom-control-label"

tests/dummy/app/components/permanent-custom-hint.hbs

@@ -1,5 +1,5 @@
 {{! BEGIN-SNIPPET permanent-custom-hint-component-template.hbs }}
-<small class="form-text text-muted">
+<small id={{@id}} class="form-text text-muted">
   <FaIcon @icon="question-circle" />
   {{@hint}}
 </small>

tests/integration/components/validated-form-test.js

@@ -87,6 +87,10 @@ module("Integration | Component | validated form", function (hooks) {
     assert.dom("input + div").doesNotExist();
     assert.dom("input + small").exists({ count: 1 });
     assert.dom("input + small").hasText("Not your middle name!");
+
+    const hintId = this.element.querySelector("input + small").id;
+
+    assert.dom("input").hasAria("describedby", hintId);
   });
 
   testDefault(
@@ -142,6 +146,7 @@ module("Integration | Component | validated form", function (hooks) {
     `);
 
       assert.dom("span.invalid-feedback").doesNotExist();
+      assert.dom("input").doesNotHaveAria("invalid");
 
       await click("button");
 
@@ -150,6 +155,11 @@ module("Integration | Component | validated form", function (hooks) {
       assert
         .dom("span.invalid-feedback")
         .hasText("First name must be between 3 and 40 characters");
+
+      const errorId = this.element.querySelector("span.invalid-feedback").id;
+
+      assert.dom("input").hasAria("invalid", "true");
+      assert.dom("input").hasAria("describedby", errorId);
     }
   );