Support accessibleWhenDisabled for ratio option items

carstingaxion · Jul 16, 2024 · 62959f0 · 62959f0
1 parent ea67533
commit 62959f0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -143,6 +143,7 @@ function ToggleGroupControlOptionBase(
 					</button>
 				) : (
 					<Ariakit.Radio
+						accessibleWhenDisabled
 						disabled={ disabled }
 						render={
 							<button
@@ -153,7 +154,11 @@ function ToggleGroupControlOptionBase(
 									if ( event.defaultPrevented ) {
 										return;
 									}
-									toggleGroupControlContext.setValue( value );
+									if ( ! disabled ) {
+										toggleGroupControlContext.setValue(
+											value
+										);
+									}
 								} }
 							/>
 						}

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -64,9 +64,28 @@ export const buttonView = ( {
 		border: 0;
 	}
 
-	&[disabled] {
-		opacity: 0.4;
+	&[disabled],
+	&[aria-disabled='true'] {
 		cursor: default;
+		${ ButtonContentView } {
+			opacity: 0.4;
+		}
+
+		/**
+		 * Show an additional focus ring for disabled radio items, since the
+		 * indicator won't follow keyboard focus. This is not an issue for non-radio
+		 * items, since the backdrop is already decoupled from keyboard focus.
+		 */
+		&[role='radio']:focus-visible::after {
+			position: absolute;
+			content: '';
+
+			/* y-axis inset matches the border width for good sub-pixel alignment */
+			inset: var( --wp-admin-border-width-focus ) 4px;
+			border-radius: 2px;
+			outline: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+		}
 	}
 
 	&:active {