Cover: Customizing Alignment with Reakit Composite (#21333)

* WIP: Attempt to use Composite from Reakit

* Fix issues and clean up composite code

* Refactor Composite integration and update tests

* Update snapshots

* Fix keyboard navigation for AlignmentMatrixControl in Toolbar

* Fix keyboard interaction to open Alignment position on keyboard down

Co-authored-by: Haz <hazdiego@gmail.com>

Author: Jon Quach

packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js

@@ -6,43 +6,60 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { DOWN } from '@wordpress/keycodes';
 import {
-	Toolbar,
+	Button,
+	Dropdown,
+	ToolbarGroup,
 	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
 } from '@wordpress/components';
 
-const POPOVER_PROPS = {
-	className: 'block-editor-block-alignment-matrix-toolbar',
-	position: 'bottom right',
-};
-
 export function BlockAlignmentMatrixToolbar( props ) {
 	const {
-		isCollapsed = true,
 		label = __( 'Change matrix alignment' ),
 		onChange = noop,
 		value = 'center',
 	} = props;
 
 	const icon = <AlignmentMatrixControl.Icon value={ value } />;
+	const className = 'block-editor-block-alignment-matrix-toolbar';
 
 	return (
-		<Toolbar
-			isCollapsed={ isCollapsed }
-			icon={ icon }
-			label={ label }
-			popoverProps={ POPOVER_PROPS }
-		>
-			{ () => {
+		<Dropdown
+			position="bottom right"
+			className={ className }
+			popoverProps={ { className } }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const openOnArrowDown = ( event ) => {
+					if ( ! isOpen && event.keyCode === DOWN ) {
+						event.preventDefault();
+						event.stopPropagation();
+						onToggle();
+					}
+				};
+
 				return (
-					<AlignmentMatrixControl
-						hasFocusBorder={ false }
-						onChange={ onChange }
-						value={ value }
-					/>
+					<ToolbarGroup>
+						<Button
+							onClick={ onToggle }
+							aria-haspopup="true"
+							aria-expanded={ isOpen }
+							onKeyDown={ openOnArrowDown }
+							label={ label }
+							icon={ icon }
+							showTooltip
+						/>
+					</ToolbarGroup>
 				);
 			} }
-		</Toolbar>
+			renderContent={ () => (
+				<AlignmentMatrixControl
+					hasFocusBorder={ false }
+					onChange={ onChange }
+					value={ value }
+				/>
+			) }
+		/>
 	);
 }
 

packages/block-library/src/cover/shared.js

@@ -1,21 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
-
-const { __getAlignmentIndex: getAlignmentIndex } = AlignmentMatrixControl;
-
-const POSITION_CLASSNAMES = [
-	'is-position-top-left',
-	'is-position-top-center',
-	'is-position-top-right',
-	'is-position-center-left',
-	'is-position-center-center',
-	'is-position-center-right',
-	'is-position-bottom-left',
-	'is-position-bottom-center',
-	'is-position-bottom-right',
-];
+const POSITION_CLASSNAMES = {
+	'top left': 'is-position-top-left',
+	'top center': 'is-position-top-center',
+	'top right': 'is-position-top-right',
+	'center left': 'is-position-center-left',
+	'center center': 'is-position-center-center',
+	'center right': 'is-position-center-right',
+	'bottom left': 'is-position-bottom-left',
+	'bottom center': 'is-position-bottom-center',
+	'bottom right': 'is-position-bottom-right',
+};
 
 export const IMAGE_BACKGROUND_TYPE = 'image';
 export const VIDEO_BACKGROUND_TYPE = 'video';
@@ -79,9 +72,7 @@ export function attributesFromMedia( setAttributes ) {
 export function getPositionClassName( contentPosition ) {
 	if ( contentPosition === undefined ) return '';
 
-	const index = getAlignmentIndex( contentPosition );
-
-	return POSITION_CLASSNAMES[ index ];
+	return POSITION_CLASSNAMES[ contentPosition ];
 }
 
 export function isContentPositionCenter( contentPosition ) {

packages/components/src/alignment-matrix-control/cell.js

@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import { unstable_CompositeItem as CompositeItem } from 'reakit/Composite';
+
+/**
+ * Internal dependencies
+ */
+import VisuallyHidden from '../visually-hidden';
+
 /**
  * Internal dependencies
  */
@@ -8,14 +18,12 @@ import {
 
 export default function Cell( { isActive = false, value, ...props } ) {
 	return (
-		<CellView
-			aria-selected={ isActive }
-			aria-label={ value }
-			role="option"
-			tabIndex={ -1 }
-			{ ...props }
-		>
+		<CompositeItem as={ CellView } role="gridcell" { ...props }>
+			{ /* VoiceOver needs a text content to be rendered within grid cell,
+			otherwise it'll announce the content as "blank". So we use a visually
+			hidden element instead of aria-label. */ }
+			<VisuallyHidden>{ value }</VisuallyHidden>
 			<Point isActive={ isActive } role="presentation" />
-		</CellView>
+		</CompositeItem>
 	);
 }

packages/components/src/alignment-matrix-control/icon.js

@@ -15,6 +15,7 @@ import {
 
 export default function AlignmentMatrixControlIcon( {
 	className,
+	disablePointerEvents = true,
 	height,
 	size: sizeProp = 24,
 	value = 'center',
@@ -33,14 +34,15 @@ export default function AlignmentMatrixControlIcon( {
 		<Root
 			{ ...props }
 			className={ classes }
+			disablePointerEvents={ disablePointerEvents }
 			role="presentation"
 			size={ size }
 		>
 			{ ALIGNMENTS.map( ( align, index ) => {
 				const isActive = alignIndex === index;
 
 				return (
-					<Cell key={ align } tabIndex={ -1 }>
+					<Cell key={ align }>
 						<Point isActive={ isActive } />
 					</Cell>
 				);