From 6e16a5122f134ca991205c03c0dd8628288e4b08 Mon Sep 17 00:00:00 2001
From: Jonas Metzener <jonas.metzener@adfinis.com>
Date: Tue, 1 Nov 2022 11:05:37 +0100
Subject: [PATCH] feat(a11y): add aria invalid and describedby attributes on
 validation

Closes #48
---
 addon/components/validated-input.hbs             | 16 ++++++++++++----
 addon/components/validated-input.js              |  9 +++++++++
 addon/components/validated-input/error.hbs       |  3 ++-
 addon/components/validated-input/hint.hbs        |  1 +
 .../validated-input/types/checkbox-group.hbs     |  2 ++
 .../validated-input/types/checkbox.hbs           |  2 ++
 .../validated-input/types/radio-group.hbs        |  2 ++
 .../app/components/permanent-custom-hint.hbs     |  2 +-
 .../components/validated-form-test.js            | 10 ++++++++++
 9 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/addon/components/validated-input.hbs b/addon/components/validated-input.hbs
index 89b1a77d..05934102 100644
--- a/addon/components/validated-input.hbs
+++ b/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}}
\ No newline at end of file
diff --git a/addon/components/validated-input.js b/addon/components/validated-input.js
index 56cf21fa..848e2b5f 100644
--- a/addon/components/validated-input.js
+++ b/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;
diff --git a/addon/components/validated-input/error.hbs b/addon/components/validated-input/error.hbs
index e50487ed..587ecd02 100644
--- a/addon/components/validated-input/error.hbs
+++ b/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"
diff --git a/addon/components/validated-input/hint.hbs b/addon/components/validated-input/hint.hbs
index 4d3a076a..4e83632b 100644
--- a/addon/components/validated-input/hint.hbs
+++ b/addon/components/validated-input/hint.hbs
@@ -1,4 +1,5 @@
 <small
+  id={{@id}}
   class={{class-list
     (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-text-muted")
     (if
diff --git a/addon/components/validated-input/types/checkbox-group.hbs b/addon/components/validated-input/types/checkbox-group.hbs
index 0d130104..a819fb7d 100644
--- a/addon/components/validated-input/types/checkbox-group.hbs
+++ b/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"
diff --git a/addon/components/validated-input/types/checkbox.hbs b/addon/components/validated-input/types/checkbox.hbs
index 0d64555e..351f54f9 100644
--- a/addon/components/validated-input/types/checkbox.hbs
+++ b/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>
diff --git a/addon/components/validated-input/types/radio-group.hbs b/addon/components/validated-input/types/radio-group.hbs
index e0187b49..c4bffd3b 100644
--- a/addon/components/validated-input/types/radio-group.hbs
+++ b/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"
diff --git a/tests/dummy/app/components/permanent-custom-hint.hbs b/tests/dummy/app/components/permanent-custom-hint.hbs
index 2148bea5..50559926 100644
--- a/tests/dummy/app/components/permanent-custom-hint.hbs
+++ b/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>
diff --git a/tests/integration/components/validated-form-test.js b/tests/integration/components/validated-form-test.js
index 0dea6db7..00911990 100644
--- a/tests/integration/components/validated-form-test.js
+++ b/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);
     }
   );