From dec8b06099adf12b9675b2e70fd7f331e31acffb Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 17 Mar 2022 15:44:34 +0400
Subject: [PATCH] Set aria-checked

---
 packages/components/src/checkbox-control/index.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
index 01a867d25bdac6..38e7529decfce6 100644
--- 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 ? (