Add ARIA tags for input validation message examples (#798)

Author: allejo

docs/product/components/inputs.html

@@ -102,9 +102,12 @@
     <p class="stacks-copy">
         In most cases, validation states shouldn’t be shown until after the user has submitted the form. There are certain exceptions where it can be appropriate to show a validation state without form submission—after a sufficient delay. For example, validating the existence of a username can occur after the user has stopped typing, or when they’ve deselected the input.
     </p>
-    <p class="stacks-copy mb32">
+    <p class="stacks-copy">
         Once the user is presented validation states, they can be cleared as soon as the user interacts with the form field. For example, the error state for an incorrect password should be cleared as soon as the user focuses the input to re-enter their password.
     </p>
+    <p class="stacks-copy mb32">
+        Similarly to using <code class="stacks-code">for</code> with labels, validation messages below inputs should be associated with their respective fields using the <code class="stacks-code">aria-describedby</code> attribute for accessible behavior.
+    </p>
 
     {% header "h3", "Validation examples" %}
     {% header "h4", "Warning" %}
@@ -113,47 +116,51 @@
 <div class="d-flex gs4 gsy fd-column has-warning">
     <label class="flex--item s-label" for="example-warning">Username</label>
     <div class="d-flex ps-relative">
-        <input class="s-input" id="example-warning" type="text" placeholder="" />
+        <input class="s-input" id="example-warning" type="text" placeholder="" aria-describedby="example-warning-desc" />
         @Svg.Alert.With("s-input-icon")
     </div>
-    <p class="flex--item s-input-message">Caps lock is on! <a>Having trouble entering your username?</a></p>
+    <p id="example-warning-desc" class="flex--item s-input-message">Caps lock is on! <a>Having trouble entering your username?</a></p>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="flex--item">
                 <div class="d-flex gs4 gsy fd-column has-warning">
                     <label class="flex--item s-label" for="example-warning">Username</label>
                     <div class="d-flex ps-relative">
-                        <input class="s-input" id="example-warning" type="text" value="AA" />
+                        <input class="s-input" id="example-warning" type="text" value="AA" aria-describedby="example-warning-desc" />
                         {% icon "Alert", "s-input-icon" %}
                     </div>
-                    <p class="flex--item s-input-message">Caps lock is on! <a>Having trouble entering your username?</a></p>
+                    <p id="example-warning-desc" class="flex--item s-input-message">Caps lock is on! <a>Having trouble entering your username?</a></p>
                 </div>
             </div>
         </div>
     </div>
 
     {% header "h4", "Error" %}
+    {% tip, "warning", "mb24" %}
+        <p class="mb0">In addition to using the "error" state for a field, be sure to use the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attributev"><code class="stacks-code">aria-invalid</code></a> attribute to indicate to assistive technology that respective fields have failed validation.</p>
+    {% endtip %}
+
     <div class="stacks-preview">
 {% highlight html %}
 <div class="d-flex gs4 gsy fd-column has-error">
-    <label class="flex--item s-label" for="example-warning">Username</label>
+    <label class="flex--item s-label" for="example-error">Username</label>
     <div class="d-flex ps-relative">
-        <input class="s-input" id="example-warning" type="text" placeholder="e.g. johndoe111" />
+        <input class="s-input" id="example-error" type="text" placeholder="e.g. johndoe111" aria-describedby="example-error-desc" aria-invalid="true" />
         @Svg.AlertCircle.With("s-input-icon")
     </div>
-    <p class="flex--item s-input-message">You must provide a username. <a>Forgot your username?</a></p>
+    <p id="example-error-desc" class="flex--item s-input-message">You must provide a username. <a>Forgot your username?</a></p>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="flex--item">
                 <div class="d-flex gs4 gsy fd-column has-error">
                     <label class="flex--item s-label" for="example-error">Username</label>
                     <div class="d-flex ps-relative">
-                        <input class="s-input" id="example-error" type="text" />
+                        <input class="s-input" id="example-error" type="text" aria-describedby="example-error-desc" />
                         {% icon "AlertCircle", "s-input-icon" %}
                     </div>
-                    <p class="flex--item s-input-message">You must provide a username. <a>Forgot your username?</a></p>
+                    <p id="example-error-desc" class="flex--item s-input-message">You must provide a username. <a>Forgot your username?</a></p>
                 </div>
             </div>
         </div>
@@ -163,23 +170,23 @@
     <div class="stacks-preview">
 {% highlight html %}
 <div class="d-flex gs4 gsy fd-column has-success">
-    <label class="flex--item s-label" for="example-warning">Username</label>
+    <label class="flex--item s-label" for="example-success">Username</label>
     <div class="d-flex ps-relative">
-        <input class="s-input" id="example-warning" type="text" />
+        <input class="s-input" id="example-success" type="text" aria-describedby="example-success-desc" />
         @Svg.Checkmark.With("s-input-icon")
     </div>
-    <p class="flex--item s-input-message">That name is available! <a>Why do we require a username?</a></p>
+    <p id="example-success-desc" class="flex--item s-input-message">That name is available! <a>Why do we require a username?</a></p>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="flex--item">
                 <div class="d-flex gs4 gsy fd-column has-success">
                     <label class="flex--item s-label" for="example-success">Username</label>
                     <div class="d-flex ps-relative">
-                        <input class="s-input" id="example-success" type="text" value="aaronshekey" />
+                        <input class="s-input" id="example-success" type="text" value="aaronshekey" aria-describedby="example-success-desc" />
                         {% icon "Checkmark", "s-input-icon" %}
                     </div>
-                    <p class="flex--item s-input-message">That name is available! <a>Why do we require a username?</a></p>
+                    <p id="example-success-desc" class="flex--item s-input-message">That name is available! <a>Why do we require a username?</a></p>
                 </div>
             </div>
         </div>