fix: #970

saadeghi · Jul 23, 2022 · 4af523d · 4af523d
1 parent 6d2ea11
commit 4af523d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/src/components/styled/checkbox.css b/src/components/styled/checkbox.css
@@ -7,7 +7,8 @@
     outline-offset: 2px;
   }
   &:checked,
-  &[checked="true"] {
+  &[checked="true"],
+  &[aria-checked=true] {
     @apply bg-base-content bg-no-repeat;
     animation: checkmark var(--animation-input, 0.2s) ease-in-out;
     background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
@@ -25,7 +26,8 @@
       outline: 2px solid hsl(var(--p));
     }
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       @apply border-primary bg-primary text-primary-content;
     }
   }
@@ -37,7 +39,8 @@
       outline: 2px solid hsl(var(--s));
     }
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       @apply border-secondary bg-secondary text-secondary-content;
     }
   }
@@ -49,7 +52,8 @@
       outline: 2px solid hsl(var(--a));
     }
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       @apply border-accent bg-accent text-accent-content;
     }
   }
@@ -80,7 +84,8 @@ body[dir="rtl"] {
     --chkbg: var(--bc);
     --chkfg: var(--b1);
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
     }
   }

diff --git a/src/components/styled/radio.css b/src/components/styled/radio.css
@@ -6,7 +6,8 @@
     outline: 2px solid hsl(var(--bc));
     outline-offset: 2px;
   }
-  &:checked {
+  &:checked,
+  &[aria-checked=true] {
     @apply bg-base-content;
     animation: radiomark var(--animation-input, 0.2s) ease-in-out;
     box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
@@ -17,7 +18,8 @@
     &:focus-visible {
       outline: 2px solid hsl(var(--p));
     }
-    &:checked {
+    &:checked,
+    &[aria-checked=true] {
       @apply border-primary bg-primary text-primary-content;
     }
   }
@@ -27,7 +29,8 @@
     &:focus-visible {
       outline: 2px solid hsl(var(--s));
     }
-    &:checked {
+    &:checked,
+    &[aria-checked=true] {
       @apply border-secondary bg-secondary text-secondary-content;
     }
   }
@@ -37,7 +40,8 @@
     &:focus-visible {
       outline: 2px solid hsl(var(--a));
     }
-    &:checked {
+    &:checked,
+    &[aria-checked=true] {
       @apply border-accent bg-accent text-accent-content;
     }
   }

diff --git a/src/components/styled/rating.css b/src/components/styled/rating.css
@@ -10,7 +10,8 @@
   & .rating-hidden {
     @apply w-2 bg-transparent;
   }
-  input:checked ~ input {
+  input:checked ~ input,
+  input[aria-checked=true] ~ input {
     @apply bg-opacity-20;
   }
   input:focus-visible {

diff --git a/src/components/styled/toggle.css b/src/components/styled/toggle.css
@@ -9,7 +9,8 @@
     outline-offset: 2px;
   }
   &:checked,
-  &[checked="true"] {
+  &[checked="true"],
+  &[aria-checked=true] {
     --chkbg: hsl(var(--bc));
     @apply border-opacity-100 bg-opacity-100;
     box-shadow: var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset;
@@ -30,7 +31,8 @@
       outline: 2px solid hsl(var(--p));
     }
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       --chkbg: hsl(var(--p));
       @apply border-primary;
       @apply border-primary border-opacity-10 bg-primary text-primary-content;
@@ -41,7 +43,8 @@
       outline: 2px solid hsl(var(--s));
     }
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       --chkbg: hsl(var(--s));
       @apply border-secondary;
       @apply border-secondary border-opacity-10 bg-secondary text-secondary-content;
@@ -52,7 +55,8 @@
       outline: 2px solid hsl(var(--a));
     }
     &:checked,
-    &[checked="true"] {
+    &[checked="true"],
+    &[aria-checked=true] {
       --chkbg: hsl(var(--a));
       @apply border-accent;
       @apply border-accent border-opacity-10 bg-accent text-accent-content;