v1.5.0 - Accessibility improvements for the error message elements (#62)

Co-authored-by: Oleksii <[email protected]>
justeat · Dec 8, 2021 · d4b8e32 · d4b8e32
1 parent 2e35629
commit d4b8e32
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,13 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+v1.5.0
+------------------------------
+*December 07, 2021*
+
+ ### Changed
+- Accessibility improvements for the error message elements (role="alert", aria-describedby)
+
 
 v1.4.1
 ------------------------------

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-validate",
   "description": "Fozzie vanilla JS Validation Component",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "files": [
     "dist"

diff --git a/src/messages.js b/src/messages.js
@@ -34,8 +34,13 @@ export const displayInlineMessage = (errorElement, customMessage, field, form) =
     const customErrorEl = getCustomErrorElement(field, form) || field;
 
     if (!errorElement) {
+        const errorSuffix = Math.random().toString(36).replace(/[^a-z]+/g, '');
+        const errorId = `error_${errorSuffix}`;
         updateElement = document.createElement('p');
         updateElement.classList.add(CONSTANTS.cssClasses.formError);
+        updateElement.setAttribute('role', 'alert');
+        updateElement.setAttribute('id', errorId);
+        field.setAttribute('aria-describedby', errorId);
         field.parentNode.insertBefore(updateElement, customErrorEl.nextSibling);
     }
 

diff --git a/test/__snapshots__/errorMessages.test.js.snap b/test/__snapshots__/errorMessages.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`error messages by default should apply error class to an invalid field 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                    <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                 </form>"
 `;
 
@@ -14,25 +14,25 @@ exports[`error messages by default should not apply error class to a valid field
 
 exports[`error messages by default should remove the error message if a previously invalid field is now valid 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                     </form>"
 `;
 
 exports[`error messages by default should remove the error message if a previously invalid field is now valid 2`] = `
 "<form novalidate=\\"\\" class=\\"has-success\\">
-                                        <input required=\\"\\" class=\\"has-success\\"><p class=\\"form-error is-hidden\\"></p>
+                                        <input required=\\"\\" class=\\"has-success\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error is-hidden\\" role=\\"alert\\" id=\\"error_fxcmgj\\"></p>
                                     </form>"
 `;
 
 exports[`error messages by default should replace the existing error message when validating multiple times 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input required=\\"\\" maxlength=\\"3\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                    <input required=\\"\\" maxlength=\\"3\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                 </form>"
 `;
 
 exports[`error messages by default should replace the existing error message when validating multiple times 2`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input required=\\"\\" maxlength=\\"3\\" class=\\"has-error\\"><p class=\\"form-error\\">This field must not exceed 3 characters in length.</p>
+                                    <input required=\\"\\" maxlength=\\"3\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field must not exceed 3 characters in length.</p>
                                 </form>"
 `;
 
@@ -111,7 +111,7 @@ exports[`error messages when set to display as a group should replace existing e
 
 exports[`error messages with a custom message defined should apply error class to an invalid field 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input required=\\"\\" data-val-required-error=\\"custom required error message\\" class=\\"has-error\\"><p class=\\"form-error\\">custom required error message</p>
+                                    <input required=\\"\\" data-val-required-error=\\"custom required error message\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">custom required error message</p>
                                 </form>"
 `;
 
@@ -123,39 +123,39 @@ exports[`error messages with a custom message defined should not apply error cla
 
 exports[`error messages with a custom message defined should remove the error message if a previously invalid field is now valid 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" data-val-required-error=\\"custom required error message\\" class=\\"has-error\\"><p class=\\"form-error\\">custom required error message</p>
+                                        <input required=\\"\\" data-val-required-error=\\"custom required error message\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">custom required error message</p>
                                     </form>"
 `;
 
 exports[`error messages with a custom message defined should remove the error message if a previously invalid field is now valid 2`] = `
 "<form novalidate=\\"\\" class=\\"has-success\\">
-                                        <input required=\\"\\" data-val-required-error=\\"custom required error message\\" class=\\"has-success\\"><p class=\\"form-error is-hidden\\"></p>
+                                        <input required=\\"\\" data-val-required-error=\\"custom required error message\\" class=\\"has-success\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error is-hidden\\" role=\\"alert\\" id=\\"error_fxcmgj\\"></p>
                                     </form>"
 `;
 
 exports[`error messages with a custom message defined should replace the existing error message when validating multiple times 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input required=\\"\\" maxlength=\\"3\\" data-val-required-error=\\"custom required error message\\" data-val-maxlength-error=\\"custom maxlength error message\\" class=\\"has-error\\"><p class=\\"form-error\\">custom required error message</p>
+                                    <input required=\\"\\" maxlength=\\"3\\" data-val-required-error=\\"custom required error message\\" data-val-maxlength-error=\\"custom maxlength error message\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">custom required error message</p>
                                 </form>"
 `;
 
 exports[`error messages with a custom message defined should replace the existing error message when validating multiple times 2`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input required=\\"\\" maxlength=\\"3\\" data-val-required-error=\\"custom required error message\\" data-val-maxlength-error=\\"custom maxlength error message\\" class=\\"has-error\\"><p class=\\"form-error\\">custom maxlength error message</p>
+                                    <input required=\\"\\" maxlength=\\"3\\" data-val-required-error=\\"custom required error message\\" data-val-maxlength-error=\\"custom maxlength error message\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">custom maxlength error message</p>
                                 </form>"
 `;
 
 exports[`error messages with custom positioning set on field should display the error message directly adjacent to the specified element 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
-                                        <input required=\\"\\" data-val-error-placement=\\".arbitrary-element\\" class=\\"has-error\\">
-                                        <span class=\\"arbitrary-element\\">arbitrary info text</span><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
+                                        <input required=\\"\\" data-val-error-placement=\\".arbitrary-element\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\">
+                                        <span class=\\"arbitrary-element\\">arbitrary info text</span><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                     </form>"
 `;
 
 exports[`error messages with custom positioning set on field should replace an existing error message if one is already present 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                         <input required=\\"\\" data-val-error-placement=\\".arbitrary-element\\" class=\\"has-error\\">
                                         <span class=\\"arbitrary-element\\">arbitrary info text</span>
                                         <p class=\\"form-error\\">This field is required.</p>

diff --git a/test/__snapshots__/hybridMode.test.js.snap b/test/__snapshots__/hybridMode.test.js.snap
@@ -8,13 +8,13 @@ exports[`hybridMode should not validate on keydown before initial blur 1`] = `
 
 exports[`hybridMode should validate on form submit 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input type=\\"text\\" required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
-                                    <input type=\\"email\\" name=\\"email\\" class=\\"has-error\\" data-blurred=\\"\\"><p class=\\"form-error\\">This field must contain a valid email address.</p>
+                                    <input type=\\"text\\" required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
+                                    <input type=\\"email\\" name=\\"email\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\" data-blurred=\\"\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field must contain a valid email address.</p>
                                 </form>"
 `;
 
 exports[`hybridMode should validate on keydown after initial blur 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                    <input type=\\"email\\" name=\\"email\\" class=\\"has-error\\" data-blurred=\\"\\"><p class=\\"form-error\\">This field must contain a valid email address.</p>
+                                    <input type=\\"email\\" name=\\"email\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\" data-blurred=\\"\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field must contain a valid email address.</p>
                                 </form>"
 `;
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`error states should apply correct classes to multiple types of field 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
                                         <input required=\\"\\" value=\\"x\\" class=\\"has-success\\">
-                                        <input required=\\"\\" value=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" value=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                         <input>
                                     </form>"
 `;
@@ -16,25 +16,25 @@ exports[`error states should apply error after success state to field 1`] = `
 
 exports[`error states should apply error after success state to field 2`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" value=\\"x\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" value=\\"x\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                     </form>"
 `;
 
 exports[`error states should apply error class to invalid field 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                     </form>"
 `;
 
 exports[`error states should apply success after error state to field 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                     </form>"
 `;
 
 exports[`error states should apply success after error state to field 2`] = `
 "<form novalidate=\\"\\" class=\\"has-success\\">
-                                        <input required=\\"\\" class=\\"has-success\\"><p class=\\"form-error is-hidden\\"></p>
+                                        <input required=\\"\\" class=\\"has-success\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error is-hidden\\" role=\\"alert\\" id=\\"error_fxcmgj\\"></p>
                                     </form>"
 `;
 
@@ -52,7 +52,7 @@ exports[`error states should not apply any class to field with no validation rul
 
 exports[`error states should not apply multiple error classes to invalid field 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                     </form>"
 `;
 
@@ -66,14 +66,14 @@ exports[`on keydown should not validate form on 'tab' 1`] = `
 exports[`on keydown should validate entire form on 'enter' 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
                                             <input required=\\"\\" value=\\"test\\" class=\\"has-success\\">
-                                            <input required=\\"\\" value=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                            <input required=\\"\\" value=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                             <button type=\\"submit\\">submit</button>
                                         </form>"
 `;
 
 exports[`on submit should validate invalid form on submit 1`] = `
 "<form novalidate=\\"\\" class=\\"has-error\\">
-                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                        <input required=\\"\\" class=\\"has-error\\" aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">This field is required.</p>
                                         <button type=\\"submit\\">submit</button>
                                     </form>"
 `;

diff --git a/test/__snapshots__/messages.test.js.snap b/test/__snapshots__/messages.test.js.snap
@@ -9,6 +9,6 @@ exports[`messages displayInlineMessage should create a new element and position
                 </form>"
 `;
 
-exports[`messages displayInlineMessage should create a new element if it does not exist, and assign error 1`] = `"<input><p class=\\"form-error\\">custom message</p>"`;
+exports[`messages displayInlineMessage should create a new element if it does not exist, and assign error 1`] = `"<input aria-describedby=\\"error_fxcmgj\\"><p class=\\"form-error\\" role=\\"alert\\" id=\\"error_fxcmgj\\">custom message</p>"`;
 
 exports[`messages hideMessage should add hidden class and remove content if element exists 1`] = `"<p class=\\"form-error is-hidden\\"></p>"`;