Template part selection component - fix keyboard controls. (#25881)

WordPress · Oct 8, 2020 · d592d6d · d592d6d
1 parent ea63a16
commit d592d6d
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
@@ -59,6 +59,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
+		"reakit": "1.1.0",
 		"tinycolor2": "^1.4.1"
 	},
 	"publishConfig": {

diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
@@ -3,15 +3,32 @@
  */
 import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
+import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
 import TemplatePartPreviews from './template-part-previews';
 
+const preventArrowKeysPropagation = ( event ) => {
+	if (
+		[ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].includes( event.keyCode )
+	) {
+		// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+		event.stopPropagation();
+	}
+};
+const stopKeyPropagation = ( event ) => event.stopPropagation();
+
+// Disable reason (no-static-element-interactions): Navigational key-presses within
+// the menu are prevented from triggering WritingFlow and ObserveTyping interactions.
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 export default function TemplatePartSelection( { setAttributes, onClose } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	return (
-		<>
+		<div
+			onKeyPress={ stopKeyPropagation }
+			onKeyDown={ preventArrowKeysPropagation }
+		>
 			<SearchForm
 				value={ filterValue }
 				onChange={ setFilterValue }
@@ -24,6 +41,7 @@ export default function TemplatePartSelection( { setAttributes, onClose } ) {
 					onClose={ onClose }
 				/>
 			</div>
-		</>
+		</div>
 	);
 }
+/* eslint-enable jsx-a11y/no-static-element-interactions */
diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
@@ -14,14 +14,23 @@ import { useAsyncList } from '@wordpress/compose';
  * External dependencies
  */
 import { groupBy, uniq, deburr } from 'lodash';
+import { Composite, useCompositeState, CompositeItem } from 'reakit';
 
 function PreviewPlaceholder() {
 	return (
-		<div className="wp-block-template-part__selection-preview-item is-placeholder" />
+		<div
+			className="wp-block-template-part__selection-preview-item is-placeholder"
+			tabIndex={ 0 }
+		/>
 	);
 }
 
-function TemplatePartItem( { templatePart, setAttributes, onClose } ) {
+function TemplatePartItem( {
+	templatePart,
+	setAttributes,
+	onClose,
+	composite,
+} ) {
 	const {
 		id,
 		slug,
@@ -49,9 +58,9 @@ function TemplatePartItem( { templatePart, setAttributes, onClose } ) {
 	}, [ id, slug, theme ] );
 
 	return (
-		<div
+		<CompositeItem
 			className="wp-block-template-part__selection-preview-item"
-			role="button"
+			role="listitem"
 			onClick={ onClick }
 			onKeyDown={ ( event ) => {
 				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
@@ -60,12 +69,13 @@ function TemplatePartItem( { templatePart, setAttributes, onClose } ) {
 			} }
 			tabIndex={ 0 }
 			aria-label={ templatePart.slug }
+			{ ...composite }
 		>
 			<BlockPreview blocks={ blocks } />
 			<div className="wp-block-template-part__selection-preview-item-title">
 				{ templatePart.slug }
 			</div>
-		</div>
+		</CompositeItem>
 	);
 }
 
@@ -85,7 +95,12 @@ function PanelGroup( { title, icon, children } ) {
 	);
 }
 
-function TemplatePartsByTheme( { templateParts, setAttributes, onClose } ) {
+function TemplatePartsByTheme( {
+	templateParts,
+	setAttributes,
+	onClose,
+	composite,
+} ) {
 	const templatePartsByTheme = useMemo( () => {
 		return Object.values( groupBy( templateParts, 'meta.theme' ) );
 	}, [ templateParts ] );
@@ -103,6 +118,7 @@ function TemplatePartsByTheme( { templateParts, setAttributes, onClose } ) {
 						templatePart={ templatePart }
 						setAttributes={ setAttributes }
 						onClose={ onClose }
+						composite={ composite }
 					/>
 				) : (
 					<PreviewPlaceholder key={ templatePart.id } />
@@ -117,6 +133,7 @@ function TemplatePartSearchResults( {
 	setAttributes,
 	filterValue,
 	onClose,
+	composite,
 } ) {
 	const filteredTPs = useMemo( () => {
 		// Filter based on value.
@@ -168,6 +185,7 @@ function TemplatePartSearchResults( {
 					templatePart={ templatePart }
 					setAttributes={ setAttributes }
 					onClose={ onClose }
+					composite={ composite }
 				/>
 			) : (
 				<PreviewPlaceholder key={ templatePart.id } />
@@ -181,6 +199,7 @@ export default function TemplateParts( {
 	filterValue,
 	onClose,
 } ) {
+	const composite = useCompositeState();
 	const templateParts = useSelect( ( select ) => {
 		const publishedTemplateParts = select( 'core' ).getEntityRecords(
 			'postType',
@@ -216,20 +235,34 @@ export default function TemplateParts( {
 
 	if ( filterValue ) {
 		return (
-			<TemplatePartSearchResults
-				templateParts={ templateParts }
-				setAttributes={ setAttributes }
-				filterValue={ filterValue }
-				onClose={ onClose }
-			/>
+			<Composite
+				{ ...composite }
+				role="list"
+				aria-label={ __( 'List of template parts' ) }
+			>
+				<TemplatePartSearchResults
+					templateParts={ templateParts }
+					setAttributes={ setAttributes }
+					filterValue={ filterValue }
+					onClose={ onClose }
+					composite={ composite }
+				/>
+			</Composite>
 		);
 	}
 
 	return (
-		<TemplatePartsByTheme
-			templateParts={ templateParts }
-			setAttributes={ setAttributes }
-			onClose={ onClose }
-		/>
+		<Composite
+			{ ...composite }
+			role="list"
+			aria-label={ __( 'List of template parts' ) }
+		>
+			<TemplatePartsByTheme
+				templateParts={ templateParts }
+				setAttributes={ setAttributes }
+				onClose={ onClose }
+				composite={ composite }
+			/>
+		</Composite>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -21,6 +21,8 @@
 		margin-top: $grid-unit-20;
 		transition: all 0.05s ease-in-out;
 		border: $border-width solid transparent;
+		width: 100%;
+		background-color: $white;
 
 		&:hover {
 			border: $border-width solid var(--wp-admin-theme-color);