Set aria-checked

WordPress · Mar 17, 2022 · dec8b06 · dec8b06
1 parent f4d0f3b
commit dec8b06
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
@@ -46,6 +46,7 @@ export default function CheckboxControl( {
 				return;
 			}
 
+			// It cannot be set using an HTML attribute.
 			node.indeterminate = !! indeterminate;
 
 			setShowCheckedIcon( node.matches( ':checked' ) );
@@ -57,6 +58,15 @@ export default function CheckboxControl( {
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
+	let ariaChecked;
+	if ( showCheckedIcon ) {
+		ariaChecked = 'true';
+	} else if ( showIndeterminateIcon ) {
+		ariaChecked = 'mixed';
+	} else {
+		ariaChecked = 'false';
+	}
+
 	return (
 		<BaseControl
 			label={ heading }
@@ -74,6 +84,7 @@ export default function CheckboxControl( {
 					onChange={ onChangeValue }
 					checked={ checked }
 					aria-describedby={ !! help ? id + '__help' : undefined }
+					aria-checked={ ariaChecked }
 					{ ...props }
 				/>
 				{ showIndeterminateIcon ? (