Fix aria-checked attribute not set for plugin settings buttons in Opt…

…ions dropdown (#65667)


Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

packages/interface/src/components/complementary-area-toggle/index.js

@@ -10,6 +10,25 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
 
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
+function roleSupportsCheckedState( role ) {
+	return [
+		'checkbox',
+		'option',
+		'radio',
+		'switch',
+		'menuitemcheckbox',
+		'menuitemradio',
+		'treeitem',
+	].includes( role );
+}
+
 function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
@@ -35,6 +54,10 @@ function ComplementaryAreaToggle( {
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
 			aria-controls={ identifier.replace( '/', ':' ) }
+			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+			aria-checked={
+				roleSupportsCheckedState( props.role ) ? isSelected : undefined
+			}
 			onClick={ () => {
 				if ( isSelected ) {
 					disableComplementaryArea( scope );