Fix aria-checked attribute not set for plugin settings buttons in Options dropdown

[manzoorwanijk]

What?

It fixes the a11y issue with plugin buttons in the options menu in the post editor where there is no indication of whether the plugin sidebar is already open or not.

Why?

Fixes #65666

How?

It updates ComplementaryAreaToggle to pass aria-checked if the role is set to menuitemcheckbox or menuitemradio

Testing Instructions

• Install a plugin that adds a plugin menu/sidebar, e.g. Jetpack
• Click on the options menu (3 dots)
• Inspect the plugin settings button
• Confirm that aria-checked attribute is set correctly

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

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

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[manzoorwanijk]

This is the same approach used in

gutenberg/packages/components/src/menu-item/index.tsx

Lines 60 to 65 in 8c5a0b6

	// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
	aria-checked={
	role === 'menuitemcheckbox' || role === 'menuitemradio'
	? isSelected
	: undefined
	}

[ciampo]

Since this component is more generic than MenuItem, should we check for all of the roles are compatible with aria-checked ? Ie. checkbox, option, radio, switch, menuitemcheckbox, menuitemradio, treeitem ? (source)

[Mamaduka]

I think the component rendered by plugins will always be MenuItem. See:

gutenberg/packages/interface/src/components/complementary-area-more-menu-item/index.js

Lines 13 to 50 in 69efbca

	const PluginsMenuItem = ( {
	// Menu item is marked with unstable prop for backward compatibility.
	// They are removed so they don't leak to DOM elements.
	// @see https://github.com/WordPress/gutenberg/issues/14457
	__unstableExplicitMenuItem,
	__unstableTarget,
	...restProps
	} ) => <MenuItem { ...restProps } />;
	export default function ComplementaryAreaMoreMenuItem( {
	scope,
	target,
	__unstableExplicitMenuItem,
	...props
	} ) {
	return (
	<ComplementaryAreaToggle
	as={ ( toggleProps ) => {
	return (
	<ActionItem
	__unstableExplicitMenuItem={
	__unstableExplicitMenuItem
	}
	__unstableTarget={ `${ scope }/${ target }` }
	as={ PluginsMenuItem }
	name={ `${ scope }/plugin-more-menu` }
	{ ...toggleProps }
	/>
	);
	} }
	role="menuitemcheckbox"
	selectedIcon={ check }
	name={ target }
	scope={ scope }
	{ ...props }
	/>
	);
	}

[manzoorwanijk]

Updated. Thanks.

[ciampo]

I think the component rendered by plugins will always be MenuItem

That's true, but <ComplementaryAreaToggle /> is a generic component that technically can be rendered as anything, and therefore I don't think that checking for more roles can do any harm in this case

[manzoorwanijk]

I wanted to add unit tests for that case but the component doesn't seem to have any tests at all.

We can cover that case when we add tests to this component.

[Mamaduka]

Makes sense. Thank you, @manzoorwanijk!

[ciampo]

LGTM 🚀

[sirreal]

Hmm… the flow to cherry-pick this failed:

https://github.com/WordPress/gutenberg/actions/runs/11232232902/job/31223400904

[cbravobernal]

I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 381ada5