Implement roving tabindex on the Navigation block toolbar

[diegohaz]

This PR is part of #18619, whose main goal is to implement roving tabindex on the @wordpress/components' Toolbar component and use it on the header and block toolbars so they become a single tab stop as recommended by the WAI-ARIA Toolbar Pattern. Related issues are #15331 and #3383.

This PR implements the roving tabindex method on the Navigation block toolbar. The update consists of using ToolbarButton instead of Button. There is also a specificity issue on the style that I had to fix here.

While working on this PR, I noticed that there are two files with the exact same content:

gutenberg/packages/block-editor/src/components/color-style-selector/index.js

Lines 1 to 92 in f0628c7

	/**
	* WordPress dependencies
	*/
	import {
	Button,
	Dropdown,
	ToolbarGroup,
	SVG,
	Path,
	} from '@wordpress/components';
	import { __ } from '@wordpress/i18n';
	import { DOWN } from '@wordpress/keycodes';
	const ColorSelectorSVGIcon = () => (
	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
	<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
	</SVG>
	);
	/**
	* Color Selector Icon component.
	*
	* @param {Object} props Component properties.
	* @param {Object} props.style Style object.
	* @param {string} props.className Class name for component.
	*
	* @return {*} React Icon component.
	*/
	const ColorSelectorIcon = ( { style, className } ) => {
	return (
	<div className="block-library-colors-selector__icon-container">
	<div
	className={ `${ className } block-library-colors-selector__state-selection` }
	style={ style }
	>
	<ColorSelectorSVGIcon />
	</div>
	</div>
	);
	};
	/**
	* Renders the Colors Selector Toolbar with the icon button.
	*
	* @param {Object} props Component properties.
	* @param {Object} props.TextColor Text color component that wraps icon.
	* @param {Object} props.BackgroundColor Background color component that wraps icon.
	*
	* @return {*} React toggle button component.
	*/
	const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
	onToggle,
	isOpen,
	} ) => {
	const openOnArrowDown = ( event ) => {
	if ( ! isOpen && event.keyCode === DOWN ) {
	event.preventDefault();
	event.stopPropagation();
	onToggle();
	}
	};
	return (
	<ToolbarGroup>
	<Button
	className="components-toolbar__control block-library-colors-selector__toggle"
	label={ __( 'Open Colors Selector' ) }
	onClick={ onToggle }
	onKeyDown={ openOnArrowDown }
	icon={
	<BackgroundColor>
	<TextColor>
	<ColorSelectorIcon />
	</TextColor>
	</BackgroundColor>
	}
	/>
	</ToolbarGroup>
	);
	};
	const BlockColorsStyleSelector = ( { children, ...other } ) => (
	<Dropdown
	position="bottom right"
	className="block-library-colors-selector"
	contentClassName="block-library-colors-selector__popover"
	renderToggle={ renderToggleComponent( other ) }
	renderContent={ () => children }
	/>
	);
	export default BlockColorsStyleSelector;

gutenberg/packages/block-library/src/navigation/block-colors-selector.js

Lines 1 to 92 in f0628c7

	/**
	* WordPress dependencies
	*/
	import {
	Button,
	Dropdown,
	ToolbarGroup,
	SVG,
	Path,
	} from '@wordpress/components';
	import { __ } from '@wordpress/i18n';
	import { DOWN } from '@wordpress/keycodes';
	const ColorSelectorSVGIcon = () => (
	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
	<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
	</SVG>
	);
	/**
	* Color Selector Icon component.
	*
	* @param {Object} props Component properties.
	* @param {Object} props.style Style object.
	* @param {string} props.className Class name for component.
	*
	* @return {*} React Icon component.
	*/
	const ColorSelectorIcon = ( { style, className } ) => {
	return (
	<div className="block-library-colors-selector__icon-container">
	<div
	className={ `${ className } block-library-colors-selector__state-selection` }
	style={ style }
	>
	<ColorSelectorSVGIcon />
	</div>
	</div>
	);
	};
	/**
	* Renders the Colors Selector Toolbar with the icon button.
	*
	* @param {Object} props Component properties.
	* @param {Object} props.TextColor Text color component that wraps icon.
	* @param {Object} props.BackgroundColor Background color component that wraps icon.
	*
	* @return {*} React toggle button component.
	*/
	const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
	onToggle,
	isOpen,
	} ) => {
	const openOnArrowDown = ( event ) => {
	if ( ! isOpen && event.keyCode === DOWN ) {
	event.preventDefault();
	event.stopPropagation();
	onToggle();
	}
	};
	return (
	<ToolbarGroup>
	<Button
	className="components-toolbar__control block-library-colors-selector__toggle"
	label={ __( 'Open Colors Selector' ) }
	onClick={ onToggle }
	onKeyDown={ openOnArrowDown }
	icon={
	<BackgroundColor>
	<TextColor>
	<ColorSelectorIcon />
	</TextColor>
	</BackgroundColor>
	}
	/>
	</ToolbarGroup>
	);
	};
	const BlockColorsStyleSelector = ( { children, ...other } ) => (
	<Dropdown
	position="bottom right"
	className="block-library-colors-selector"
	contentClassName="block-library-colors-selector__popover"
	renderToggle={ renderToggleComponent( other ) }
	renderContent={ () => children }
	/>
	);
	export default BlockColorsStyleSelector;

They represent the button, and the former is used on a block called "Post Author". I updated both, but I couldn't find this block to test (@epiqueras do you know how can I do this?) (see #23281 (comment)).

How to test

• Create a Navigation block (both horizontal and vertical), add some content and check if the toolbar is working properly with mouse and keyboard.
• Enable the Full Site Editing experiment and test the Post Author block.

[github-actions]

Size Change: +24 B (0%)

Total Size: 1.12 MB

Filename	Size	Change
build/block-editor/index.js	106 kB	-1 B
build/block-library/editor-rtl.css	7.87 kB	+10 B (0%)
build/block-library/editor.css	7.88 kB	+11 B (0%)
build/block-library/index.js	129 kB	+4 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	3.4 kB	0 B
build/autop/index.js	2.83 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	7.26 kB	0 B
build/block-directory/style-rtl.css	937 B	0 B
build/block-directory/style.css	937 B	0 B
build/block-editor/style-rtl.css	10.7 kB	0 B
build/block-editor/style.css	10.7 kB	0 B
build/block-library/style-rtl.css	8 kB	0 B
build/block-library/style.css	8.01 kB	0 B
build/block-library/theme-rtl.css	730 B	0 B
build/block-library/theme.css	732 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	48.1 kB	0 B
build/components/index.js	195 kB	0 B
build/components/style-rtl.css	15.9 kB	0 B
build/components/style.css	15.8 kB	0 B
build/compose/index.js	9.6 kB	0 B
build/core-data/index.js	11.4 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.44 kB	0 B
build/date/index.js	5.47 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	3.17 kB	0 B
build/edit-navigation/index.js	8.26 kB	0 B
build/edit-navigation/style-rtl.css	1.02 kB	0 B
build/edit-navigation/style.css	1.02 kB	0 B
build/edit-post/index.js	303 kB	0 B
build/edit-post/style-rtl.css	5.5 kB	0 B
build/edit-post/style.css	5.5 kB	0 B
build/edit-site/index.js	16.6 kB	0 B
build/edit-site/style-rtl.css	3.03 kB	0 B
build/edit-site/style.css	3.03 kB	0 B
build/edit-widgets/index.js	9.33 kB	0 B
build/edit-widgets/style-rtl.css	2.43 kB	0 B
build/edit-widgets/style.css	2.43 kB	0 B
build/editor/editor-styles-rtl.css	468 B	0 B
build/editor/editor-styles.css	469 B	0 B
build/editor/index.js	44.8 kB	0 B
build/editor/style-rtl.css	3.8 kB	0 B
build/editor/style.css	3.8 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.72 kB	0 B
build/format-library/style-rtl.css	542 B	0 B
build/format-library/style.css	543 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	446 B	0 B
build/list-reusable-blocks/style.css	447 B	0 B
build/media-utils/index.js	5.29 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	662 B	0 B
build/nux/style.css	657 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.5 kB	0 B
build/priority-queue/index.js	788 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	14 kB	0 B
build/server-side-render/index.js	2.68 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.85 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[epiqueras]

(@epiqueras do you know how can I do this?).

You need to enable the full site editing experiment.

[diegohaz]

You need to enable the full site editing experiment.

Nice! Tested it too and it's working well.

[gziolo]

@draganescu, could you run sanity check?

[draganescu]

Tested locally, LGTM! 🚢