Fix: checkbox and radio aria-invalid #44

css/pico.classless.css

@@ -1120,9 +1120,9 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
@@ -1133,11 +1133,20 @@ textarea[aria-invalid] {
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1152,7 +1161,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,
@@ -1322,6 +1330,22 @@ label > input, label > select, label > textarea {
   -webkit-margin-start: calc(1.125em - var(--border-width));
           margin-inline-start: calc(1.125em - var(--border-width));
 }
+[type=checkbox][role=switch][aria-invalid=false] {
+  --border-color: var(--form-element-valid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
+}
+[type=checkbox][role=switch][aria-invalid=true] {
+  --border-color: var(--form-element-invalid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
+}
 
 /**
  * Form elements

css/pico.css

@@ -1299,9 +1299,9 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
@@ -1312,11 +1312,20 @@ textarea[aria-invalid] {
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1331,7 +1340,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,
@@ -1501,6 +1509,22 @@ label > input, label > select, label > textarea {
   -webkit-margin-start: calc(1.125em - var(--border-width));
           margin-inline-start: calc(1.125em - var(--border-width));
 }
+[type=checkbox][role=switch][aria-invalid=false] {
+  --border-color: var(--form-element-valid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
+}
+[type=checkbox][role=switch][aria-invalid=true] {
+  --border-color: var(--form-element-invalid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
+}
 
 /**
  * Form elements

css/pico.fluid.classless.css

@@ -1090,9 +1090,9 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
@@ -1103,11 +1103,20 @@ textarea[aria-invalid] {
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1122,7 +1131,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,
@@ -1292,6 +1300,22 @@ label > input, label > select, label > textarea {
   -webkit-margin-start: calc(1.125em - var(--border-width));
           margin-inline-start: calc(1.125em - var(--border-width));
 }
+[type=checkbox][role=switch][aria-invalid=false] {
+  --border-color: var(--form-element-valid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
+}
+[type=checkbox][role=switch][aria-invalid=true] {
+  --border-color: var(--form-element-invalid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
+}
 
 /**
  * Form elements

css/pico.slim.css

@@ -1243,9 +1243,9 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
@@ -1256,11 +1256,20 @@ textarea[aria-invalid] {
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1273,7 +1282,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,

scss/content/_form-checkbox-radio.scss

@@ -119,4 +119,35 @@
       margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
     }
   }
+
+  // Aria-invalid
+  &[aria-invalid="false"] {
+    --border-color: var(--form-element-valid-border-color);
+
+    &:active,
+    &:focus {
+      @if $enable-important {
+        --border-color: var(
+          --form-element-valid-active-border-color
+        ) !important;
+      } @else {
+        --border-color: var(--form-element-valid-active-border-color);
+      }
+    }
+  }
+
+  &[aria-invalid="true"] {
+    --border-color: var(--form-element-invalid-border-color);
+
+    &:active,
+    &:focus {
+      @if $enable-important {
+        --border-color: var(
+          --form-element-invalid-active-border-color
+        ) !important;
+      } @else {
+        --border-color: var(--form-element-invalid-active-border-color);
+      }
+    }
+  }
 }

scss/content/_form.scss

@@ -211,34 +211,44 @@ textarea {
   }
 }
 
-// Aria-valid
+// Aria-invalid
 input,
 select,
 textarea {
-  &[aria-invalid] {
+
-    @if $enable-important {
+  &:not([type="checkbox"]):not([type="radio"]) {
-      padding-right: calc(
+    &[aria-invalid] {
-        var(--form-element-spacing-horizontal) + 1.5rem
+      @if $enable-important {
-      ) !important;
+        padding-right: calc(
-      padding-left: var(--form-element-spacing-horizontal);
+          var(--form-element-spacing-horizontal) + 1.5rem
-      padding-inline-end: calc(
+        ) !important;
-        var(--form-element-spacing-horizontal) + 1.5rem
+        padding-left: var(--form-element-spacing-horizontal);
-      ) !important;
+        padding-inline-end: calc(
-      padding-inline-start: var(--form-element-spacing-horizontal) !important;
+          var(--form-element-spacing-horizontal) + 1.5rem
-    } @else {
+        ) !important;
-      padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+        padding-inline-start: var(--form-element-spacing-horizontal) !important;
-      padding-left: var(--form-element-spacing-horizontal);
+      } @else {
-      padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+        padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-      padding-inline-start: var(--form-element-spacing-horizontal);
+        padding-left: var(--form-element-spacing-horizontal);
+        padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+        padding-inline-start: var(--form-element-spacing-horizontal);
+      }
+      background-position: center right 0.75rem;
+      background-repeat: no-repeat;
+      background-size: 1rem auto;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-valid);
+    }
+  
+    &[aria-invalid="true"] {
+      background-image: var(--icon-invalid);
     }
-    background-position: center right 0.75rem;
-    background-repeat: no-repeat;
-    background-size: 1rem auto;
   }
 
   &[aria-invalid="false"] {
     --border-color: var(--form-element-valid-border-color);
-    background-image: var(--icon-valid);
 
     &:active,
     &:focus {
@@ -254,7 +264,6 @@ textarea {
 
   &[aria-invalid="true"] {
     --border-color: var(--form-element-invalid-border-color);
-    background-image: var(--icon-invalid);
 
     &:active,
     &:focus {