fix(ASSETS-6921): Hours and Minutes validation error label not availa…

…ble (#228)
adobe · Aug 31, 2022 · b783d55 · b783d55
1 parent 9c9b398
commit b783d55
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/coral-component-clock/i18n/translations.js b/coral-component-clock/i18n/translations.js
@@ -16,7 +16,8 @@ export default {
     "pm": "pm",
     "Hours": "Hours",
     "Minutes": "Minutes",
-    "AM/PM": "AM/PM"
+    "AM/PM": "AM/PM",
+    "invalidTime": "Please enter a valid time"
   },
   "de-DE": {
     "am": "vormittags",

diff --git a/coral-component-clock/src/scripts/Clock.js b/coral-component-clock/src/scripts/Clock.js
@@ -82,6 +82,17 @@ const Clock = Decorator(class extends BaseFormField(BaseComponent(HTMLElement))
 
     // Pre-define labellable element
     this._labellableElement = this;
+
+    // Add aria-errormessage attribute to coral-clock element
+    this.errorID = (this.id || commons.getUID()) + "-coral-clock-error-label";
+
+    // Prevent typing in specific characters which can be added to number inputs
+    const forbiddenChars = ["-", "+", "e", ",", "."];
+    this.addEventListener("keydown", (e) => {
+      if (forbiddenChars.includes(e.key)) {
+        e.preventDefault();
+      }
+    });
   }
 
   /**
@@ -233,6 +244,22 @@ const Clock = Decorator(class extends BaseFormField(BaseComponent(HTMLElement))
 
     this._elements.hours.invalid = this._invalid;
     this._elements.minutes.invalid = this._invalid;
+    this._elements.hours.setAttribute("aria-errormessage", this.errorID);
+    this._elements.minutes.setAttribute("aria-errormessage", this.errorID);
+
+    const ERROR_LABEL_ELEMENT_CLASS = "._coral-Clock .coral-Form-errorlabel";
+    const errorLabel = this.querySelector(ERROR_LABEL_ELEMENT_CLASS);
+
+    if (this._elements.hours.invalid || this._elements.minutes.invalid) {
+      errorLabel.setAttribute("id", this.errorID);
+      errorLabel.setAttribute("aria-live", "assertive");
+      errorLabel.hidden = false;
+      errorLabel.style.display = "table-caption";
+      errorLabel.style["caption-side"] = "bottom";
+    } else {
+      errorLabel.setAttribute("aria-live", "off");
+      errorLabel.hidden = true;
+    }
   }
 
   /**

diff --git a/coral-component-clock/src/templates/base.html b/coral-component-clock/src/templates/base.html
@@ -13,3 +13,4 @@
   <coral-select-item value="am"></coral-select-item>
   <coral-select-item value="pm"></coral-select-item>
 </coral-select>
+<label class="coral-Form-errorlabel" hidden >{{data.i18n.get('invalidTime')}}</label>
diff --git a/coral-component-clock/src/tests/test.Clock.js b/coral-component-clock/src/tests/test.Clock.js
@@ -417,6 +417,27 @@ describe('Clock', function () {
           expect(el.getAttribute('aria-labelledby')).to.equal(labelId + ' ' + el._elements.valueAsText.id);
         });
       });
+
+      describe('#invalid', function () {
+        it('Should show error message when clock has invalid state', function () {
+          var clock = document.getElementsByTagName('coral-clock')[0];
+          // Checks that error is hidden by default
+          expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.true;
+          // Checks that error is shown when clock is invalid
+          el.invalid = true;
+          expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.false;
+          // Check that error is hidden when clock is valid
+          el.invalid = false;
+          expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.true;
+        });
+
+        it('Should disallow typing "e" in hours/minutes inputs', function () {
+          el.value = '10:55';
+          expect(el.value).to.equal('10:55');
+          el.value = 'e:ee';
+          expect(el.value).to.equal('');
+        })
+      })
     });
 
     describe('Markup', function () {