Merge pull request #19 from PublicisSapient/native-form-improvements

Native form improvements

content/body/form-error-checking.php

@@ -20,7 +20,10 @@
       <p>
         You can use just <code>required</code> and
         <code>pattern</code> attributes on HTML forms to do client side
-        validation <strong>without JavaScript</strong>.
+        validation <strong>without JavaScript</strong>.  However, in order to make the messaging
+        more accessible, we have added a tiny bit of JS code (inspired by <a href="https://pauljadam.com/guides/html5-form.html">this accessible HTML5 forms code demo by Paul J Adam</a>) in order to ensure the error messages
+        themselves are more accessible to screen reader users (see the last step in the code
+        walkthrough for details)
       </p>
 
       <div id="example1" class="enable-example">
@@ -106,6 +109,11 @@
             "label": "Hint text should be marked up using aria-describedby",
             "highlight": "aria-describedby",
             "notes": ""
+          },
+          {
+            "label": "Use Javascript to make the error message text more accessible",
+            "highlight": "%FILE% js/demos/native-form-example.js",
+            "notes": "When a form with errors is submitted, focus goes to the first invalid form field.  Unfortunately, some browser/screen reader pairs don't read out the form field label that the error belongs to, so screen reader users may not know what currently has focus.  This script below ensures the form field label is in the error message to tell screen reader users what currently has focus."
           }
         ]
       }
@@ -208,7 +216,7 @@
           {
             "label": "Set your form up so that jQuery validate knows that it needs to initialize it onload",
             "highlight": "js-form-validation",
-            "notes": "In this example, we set a class named <strong>js-form-validation</strong>.  Take a look at <a href='js/shared/form.js'>the script we are using on this page for this form</a>.  It is commented so you can use this as a model for your own implemtation."
+            "notes": "In this example, we set a class named <strong>js-form-validation</strong>.  Take a look at <a href='js/demos/custom-form-example.js'>the script we are using on this page for this form</a>.  It is commented so you can use this as a model for your own implemtation."
           },
           {
             "label": "Put in fieldsets and legends",

content/bottom/form-error-checking.php

@@ -1 +1,2 @@
-<script id="x" src="js/demos/form.js" type="module"></script>
+<script id="x" src="js/demos/custom-form-example.js" type="module"></script>
+<script id="native" src="js/demos/native-form-example.js" type="module"></script>

js/demos/native-form-example.js

@@ -0,0 +1,65 @@
+'use strict'
+
+/*******************************************************************************
+ * native-form-example.js - Demo of accessible native HTML5 form validation.
+ * 
+ * Released under the MIT License.
+ ******************************************************************************/
+
+const nativeForm = new (function() {
+  const colonRe = /:$/;
+
+  /**
+   * invalidEvent(): Event handler for the `invalid` event on a form field.
+   * @param {Event} e 
+   * 
+   * When a form field is invalid, we should ensure the message bubble:
+   * 1) Has the word "Error: " at the beginning (so all screen reader users)
+   *    know that it is an error.
+   * 2) Has the name of the form field that has the error (since not all
+   *    browsers will say the label of the form field when the error bubble
+   *    appears).
+   */
+  function invalidEvent(e) {
+    const { target } = e;
+    const { id } = target;
+    const $labelEl = document.querySelector(`label[for="${id}"]`);
+    const label = $labelEl.innerText.replace(colonRe, '');
+    target.setCustomValidity(`Error: ${label} is not valid.`);
+    target.setAttribute('aria-invalid', 'true');
+
+    console.log(id);
+  }
+
+
+  /**
+   * changeEvent(): Change event on a form field.
+   * @param {Event} e 
+   * 
+   * When a form field value has changed, we should ensure that the
+   * message bubble is cleared.  If we don't do this, and the form is
+   * submitted, the form field will be focused on and an error will
+   * appear even though the field was filled out correctly.
+   */
+  function changeEvent(e) {
+    const { target } = e;
+    const { form } = target;
+
+    if (form) {
+      target.setCustomValidity('');
+      target.removeAttribute('aria-invalid');
+    }
+
+  }
+
+  /**
+   * init(): Initialization routine of this object.
+   */
+  this.init = () => {
+    document.body.addEventListener('invalid', invalidEvent, true);
+    document.body.addEventListener('change', changeEvent, true);
+  }
+
+})();
+
+nativeForm.init();