Define validation states with aria-invalid

css/pico.classless.css

@@ -1035,6 +1035,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {

css/pico.css

@@ -977,7 +977,7 @@ a[role="button"].contrast:focus {
 
 button.outline,
 input[type="submit"].outline,
-a.outline[role="button"] {
+a[role="button"].outline {
   border: var(--button-border-width) solid var(--primary-border);
   background-color: transparent;
   color: var(--primary);
@@ -987,9 +987,9 @@ button.outline:hover, button.outline:active, button.outline:focus,
 input[type="submit"].outline:hover,
 input[type="submit"].outline:active,
 input[type="submit"].outline:focus,
-a.outline[role="button"]:hover,
+a[role="button"].outline:hover,
-a.outline[role="button"]:active,
+a[role="button"].outline:active,
-a.outline[role="button"]:focus {
+a[role="button"].outline:focus {
   border: var(--button-border-width) solid var(--primary-hover-border);
   color: var(--primary-hover);
 }
@@ -1230,26 +1230,24 @@ textarea[disabled] {
   opacity: .66;
 }
 
-input.valid, input.invalid,
+input[aria-invalid],
-select.valid,
+select[aria-invalid],
-select.invalid,
+textarea[aria-invalid] {
-textarea.valid,
-textarea.invalid {
   padding-right: 2rem;
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
 
-input.valid,
+input[aria-invalid="false"],
-select.valid,
+select[aria-invalid="false"],
-textarea.valid {
+textarea[aria-invalid="false"] {
   background-image: var(--icon-valid);
 }
 
-input.invalid,
+input[aria-invalid="true"],
-select.invalid,
+select[aria-invalid="true"],
-textarea.invalid {
+textarea[aria-invalid="true"] {
   background-image: var(--icon-invalid);
 }
 

css/pico.fluid.classless.css

@@ -1031,6 +1031,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {

css/pico.slim.css

@@ -1038,6 +1038,27 @@ textarea[disabled] {
   opacity: .66;
 }
 
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input[aria-invalid="false"],
+select[aria-invalid="false"],
+textarea[aria-invalid="false"] {
+  background-image: var(--icon-valid);
+}
+
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+  background-image: var(--icon-invalid);
+}
+
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea {

docs/index.html

@@ -710,14 +710,14 @@
             <p>Disabled and validation states:</p>
             <article aria-label="Validation states examples">
               <form class="grid">
-                <input type="text" placeholder="Valid" aria-label="Valid" class="valid">
+                <input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
-                <input type="text" placeholder="Invalid" aria-label="Invalid"  class="invalid">
+                <input type="text" placeholder="Invalid" aria-label="Invalid"  aria-invalid="true">
                 <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
                 <input type="text" value="Readonly" aria-label="Readonly" readonly>
               </form>
 
-<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>class</i>=<u>"valid"</u>&gt;
+<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
-&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>class</i>=<u>"invalid"</u>&gt;
+&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
 &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>
 

scss/content/_form.scss

@@ -221,24 +221,19 @@ textarea {
   }
 
   // Validation states
-  @if $enable-input-states and $enable-classes {
+  &[aria-invalid] {
+    padding-right: 2rem;
+    background-position: center right .75rem;
+    background-repeat: no-repeat;
+    background-size: 1rem auto;
+  }
 
-    // Validation states
+  &[aria-invalid="false"] {
-    &.valid,
+    background-image: var(--icon-valid);
-    &.invalid {
+  }
-      padding-right: 2rem;
-      background-position: center right .75rem;
-      background-repeat: no-repeat;
-      background-size: 1rem auto;
-    }
 
-    &.valid {
+  &[aria-invalid="true"]{
-      background-image: var(--icon-valid);
+    background-image: var(--icon-invalid);
-    }
-
-    &.invalid {
-      background-image: var(--icon-invalid);
-    }
   }
 }