Support aria-disabled in Field

sumup-oss · Jan 23, 2025 · a0f1460 · a0f1460
1 parent 26eda60
commit a0f1460
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/packages/circuit-ui/components/Field/Field.module.css b/packages/circuit-ui/components/Field/Field.module.css
@@ -5,8 +5,10 @@
 }
 
 .wrapper[disabled],
+.wrapper[aria-disabled="true"],
 .wrapper[data-disabled="true"],
 .fieldset[disabled],
+.fieldset[aria-disabled="true"],
 .fieldset[data-disabled="true"] {
   pointer-events: none;
 }
@@ -28,7 +30,8 @@
   line-height: var(--cui-body-s-line-height);
 }
 
-[disabled] .label-text,
+:global([disabled]) .label-text,
+:global([aria-disabled="true"]) .label-text,
 :global([data-disabled="true"]) .label-text {
   color: var(--cui-fg-normal-disabled);
 }
@@ -37,7 +40,8 @@
   color: var(--cui-fg-subtle);
 }
 
-[disabled] .label-text-optional,
+:global([disabled]) .label-text-optional,
+:global([aria-disabled="true"]) .label-text-optional,
 :global([data-disabled="true"]) .label-text-optional {
   color: var(--cui-fg-subtle-disabled);
 }
@@ -49,7 +53,8 @@
   color: var(--cui-fg-subtle);
 }
 
-[disabled] .description,
+:global([disabled]) .description,
+:global([aria-disabled="true"]) .description,
 :global([data-disabled="true"]) .description {
   color: var(--cui-fg-subtle-disabled);
 }
@@ -63,7 +68,8 @@
   transition: color var(--cui-transitions-default);
 }
 
-[disabled] .validation-hint,
+:global([disabled]) .validation-hint,
+:global([aria-disabled="true"]) .validation-hint,
 :global([data-disabled="true"]) .validation-hint {
   color: var(--cui-fg-subtle-disabled);
 }
@@ -72,7 +78,8 @@
   color: var(--cui-fg-success);
 }
 
-[disabled] .valid,
+:global([disabled]) .valid,
+:global([aria-disabled="true"]) .valid,
 :global([data-disabled="true"]) .valid {
   color: var(--cui-fg-success-disabled);
 }
@@ -81,7 +88,8 @@
   color: var(--cui-fg-warning);
 }
 
-[disabled] .warning,
+:global([disabled]) .warning,
+:global([aria-disabled="true"]) .warning,
 :global([data-disabled="true"]) .warning {
   color: var(--cui-fg-warning-disabled);
 }
@@ -90,7 +98,8 @@
   color: var(--cui-fg-danger);
 }
 
-[disabled] .invalid,
+:global([disabled]) .invalid,
+:global([aria-disabled="true"]) .invalid,
 :global([data-disabled="true"]) .invalid {
   color: var(--cui-fg-danger-disabled);
 }