From dd799056c7d1379c83b4f2e34a1b650f77b157e5 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Sun, 19 Mar 2023 10:03:00 +0700
Subject: [PATCH] refactor: disabled checkboxes and radios without :has

---
 scss/forms/_basics.scss                |  5 +++++
 scss/forms/_checkbox-radio-switch.scss | 16 +---------------
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss
index ba77997d..4eb19950 100644
--- a/scss/forms/_basics.scss
+++ b/scss/forms/_basics.scss
@@ -220,6 +220,7 @@
   input:not([type="submit"], [type="button"], [type="reset"])[disabled],
   select[disabled],
   textarea[disabled],
+  label[aria-disabled="true"],
   :where(fieldset[disabled])
     :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
     #{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
@@ -228,6 +229,10 @@
     pointer-events: none;
   }
 
+  label[aria-disabled="true"] input[disabled] {
+    opacity: 1;
+  }
+
   // Aria-invalid
   :where(input, select, textarea) {
     &:not(
diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss
index f7d66e56..212837a2 100644
--- a/scss/forms/_checkbox-radio-switch.scss
+++ b/scss/forms/_checkbox-radio-switch.scss
@@ -7,6 +7,7 @@
    */
 
   // Labels
+  // Not working in Firefox, which doesn't support the `:has()` pseudo-class
   label {
     &:has([type="checkbox"], [type="radio"]) {
       width: fit-content;
@@ -14,21 +15,6 @@
     }
   }
 
-  // Disabled labels
-  label:has([disabled]),
-  [type="checkbox"][disabled] + label,
-  [type="radio"][disabled] + label {
-    opacity: var(#{$✨}form-element-disabled-opacity);
-    pointer-events: none;
-  }
-
-  label:has([disabled]) {
-    [type="checkbox"],
-    [type="radio"] {
-      opacity: initial;
-    }
-  }
-
   [type="checkbox"],
   [type="radio"] {
     -webkit-appearance: none;