Support aria-disabled in Field

connor-baer · connor-baer · commit a0f1460c6e7d · 2025-01-23T13:26:46.000+01:00
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);
 }

Original file line number	Diff line number	Diff line change
`@@ -5,8 +5,10 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.wrapper[disabled],`
	`8`	`+.wrapper[aria-disabled="true"],`
`8`	`9`	`.wrapper[data-disabled="true"],`
`9`	`10`	`.fieldset[disabled],`
	`11`	`+.fieldset[aria-disabled="true"],`
`10`	`12`	`.fieldset[data-disabled="true"] {`
`11`	`13`	`pointer-events: none;`
`12`	`14`	`}`
`@@ -28,7 +30,8 @@`
`28`	`30`	`line-height: var(--cui-body-s-line-height);`
`29`	`31`	`}`
`30`	`32`
`31`		`-[disabled] .label-text,`
	`33`	`+:global([disabled]) .label-text,`
	`34`	`+:global([aria-disabled="true"]) .label-text,`
`32`	`35`	`:global([data-disabled="true"]) .label-text {`
`33`	`36`	`color: var(--cui-fg-normal-disabled);`
`34`	`37`	`}`
`@@ -37,7 +40,8 @@`
`37`	`40`	`color: var(--cui-fg-subtle);`
`38`	`41`	`}`
`39`	`42`
`40`		`-[disabled] .label-text-optional,`
	`43`	`+:global([disabled]) .label-text-optional,`
	`44`	`+:global([aria-disabled="true"]) .label-text-optional,`
`41`	`45`	`:global([data-disabled="true"]) .label-text-optional {`
`42`	`46`	`color: var(--cui-fg-subtle-disabled);`
`43`	`47`	`}`
`@@ -49,7 +53,8 @@`
`49`	`53`	`color: var(--cui-fg-subtle);`
`50`	`54`	`}`
`51`	`55`
`52`		`-[disabled] .description,`
	`56`	`+:global([disabled]) .description,`
	`57`	`+:global([aria-disabled="true"]) .description,`
`53`	`58`	`:global([data-disabled="true"]) .description {`
`54`	`59`	`color: var(--cui-fg-subtle-disabled);`
`55`	`60`	`}`
`@@ -63,7 +68,8 @@`
`63`	`68`	`transition: color var(--cui-transitions-default);`
`64`	`69`	`}`
`65`	`70`
`66`		`-[disabled] .validation-hint,`
	`71`	`+:global([disabled]) .validation-hint,`
	`72`	`+:global([aria-disabled="true"]) .validation-hint,`
`67`	`73`	`:global([data-disabled="true"]) .validation-hint {`
`68`	`74`	`color: var(--cui-fg-subtle-disabled);`
`69`	`75`	`}`
`@@ -72,7 +78,8 @@`
`72`	`78`	`color: var(--cui-fg-success);`
`73`	`79`	`}`
`74`	`80`
`75`		`-[disabled] .valid,`
	`81`	`+:global([disabled]) .valid,`
	`82`	`+:global([aria-disabled="true"]) .valid,`
`76`	`83`	`:global([data-disabled="true"]) .valid {`
`77`	`84`	`color: var(--cui-fg-success-disabled);`
`78`	`85`	`}`
`@@ -81,7 +88,8 @@`
`81`	`88`	`color: var(--cui-fg-warning);`
`82`	`89`	`}`
`83`	`90`
`84`		`-[disabled] .warning,`
	`91`	`+:global([disabled]) .warning,`
	`92`	`+:global([aria-disabled="true"]) .warning,`
`85`	`93`	`:global([data-disabled="true"]) .warning {`
`86`	`94`	`color: var(--cui-fg-warning-disabled);`
`87`	`95`	`}`
`@@ -90,7 +98,8 @@`
`90`	`98`	`color: var(--cui-fg-danger);`
`91`	`99`	`}`
`92`	`100`
`93`		`-[disabled] .invalid,`
	`101`	`+:global([disabled]) .invalid,`
	`102`	`+:global([aria-disabled="true"]) .invalid,`
`94`	`103`	`:global([data-disabled="true"]) .invalid {`
`95`	`104`	`color: var(--cui-fg-danger-disabled);`
`96`	`105`	`}`