Implement keyboard and focus management

assets/src/edit-story/app/story/actions/useDeletePageByIndex.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+function useDeletePageByIndex( {
+	clearSelection,
+	setPages,
+	setCurrentPageIndex,
+} ) {
+	const deletePageByIndex = useCallback( ( indexToDelete ) => {
+		clearSelection();
+		setPages( ( pages ) => [
+			...pages.slice( 0, indexToDelete ),
+			...pages.slice( indexToDelete + 1 ),
+		] );
+		setCurrentPageIndex( ( currentIndex ) => currentIndex > indexToDelete ? currentIndex - 1 : currentIndex );
+	}, [ clearSelection, setPages, setCurrentPageIndex ] );
+	return deletePageByIndex;
+}
+
+export default useDeletePageByIndex;

assets/src/edit-story/app/story/storyProvider.js

@@ -27,6 +27,7 @@ import useToggleElementIdInSelection from './actions/useToggleElementIdInSelecti
 import useSelectElementById from './actions/useSelectElementById';
 import useAppendElementToCurrentPage from './actions/useAppendElementToCurrentPage';
 import useSetCurrentPageByIndex from './actions/useSetCurrentPageByIndex';
+import useDeletePageByIndex from './actions/useDeletePageByIndex';
 import useSetPropertiesOnSelectedElements from './actions/useSetPropertiesOnSelectedElements';
 
 function StoryProvider( { storyId, children } ) {
@@ -37,17 +38,15 @@ function StoryProvider( { storyId, children } ) {
 	const [ currentPageIndex, setCurrentPageIndex ] = useState( null );
 	const [ selectedElementIds, setSelectedElementIds ] = useState( [] );
 
-	// These states are all derived from the above three variables and help keep the api easier.
-	// These will update based off the above in effects but should never be directly manipulated outside this component.
-	const [ currentPageNumber, setCurrentPageNumber ] = useState( null );
-	const [ currentPage, setCurrentPage ] = useState( null );
-	const [ selectedElements, setSelectedElements ] = useState( [] );
-
 	const hasSelection = Boolean( selectedElementIds.length );
+	const currentPage = pages[ currentPageIndex ] || null;
+	const currentPageNumber = ! currentPage ? null : currentPageIndex + 1;
+	const selectedElements = ! currentPage ? [] : currentPage.elements.filter( ( { id } ) => selectedElementIds.includes( id ) );
 
 	const clearSelection = useClearSelection( { selectedElementIds, setSelectedElementIds } );
 	const deleteSelectedElements = useDeleteSelectedElements( { currentPageIndex, pages, selectedElementIds, setPages, setSelectedElementIds } );
 	const setCurrentPageByIndex = useSetCurrentPageByIndex( { clearSelection, setCurrentPageIndex } );
+	const deletePageByIndex = useDeletePageByIndex( { clearSelection, setPages, setCurrentPageIndex } );
 	const addBlankPage = useAddBlankPage( { pages, setPages, clearSelection } );
 	const deleteCurrentPage = useDeleteCurrentPage( { currentPage, pages, setPages, addBlankPage, setCurrentPageIndex, currentPageIndex } );
 	const selectElementById = useSelectElementById( { setSelectedElementIds } );
@@ -56,10 +55,8 @@ function StoryProvider( { storyId, children } ) {
 	const setPropertiesOnSelectedElements = useSetPropertiesOnSelectedElements( { currentPageIndex, pages, selectedElementIds, setPages } );
 
 	useLoadStory( { storyId, pages, setPages, setCurrentPageIndex, clearSelection } );
-	useCurrentPage( { currentPageIndex, pages, setCurrentPage, setCurrentPageNumber } );
 	useHistoryEntry( { currentPageIndex, pages, selectedElementIds } );
 	useHistoryReplay( { setCurrentPageIndex, setPages, setSelectedElementIds } );
-	useSelectedElements( { currentPageIndex, pages, selectedElementIds, setSelectedElements } );
 
 	const state = {
 		state: {
@@ -73,6 +70,7 @@ function StoryProvider( { storyId, children } ) {
 		},
 		actions: {
 			setCurrentPageByIndex,
+			deletePageByIndex,
 			addBlankPage,
 			clearSelection,
 			deleteSelectedElements,

assets/src/edit-story/components/canvas/carrousel/index.js

@@ -2,13 +2,22 @@
  * External dependencies
  */
 import styled from 'styled-components';
+import { rgba } from 'polished';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 import { useStory } from '../../../app';
+import { Navigable, NavigableGroup } from '../../focusable';
 
-const List = styled.nav`
+const List = styled( NavigableGroup ).attrs( {
+	element: 'nav',
+	role: 'tablist',
+	tabindex: -1,
+	direction: NavigableGroup.DIRECTION_HORIZONTAL,
+	hotkey: 'meta+t',
+} )`
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
@@ -17,27 +26,59 @@ const List = styled.nav`
 	padding-top: 1em;
 `;
 
-const Page = styled.a`
-	background-color: ${ ( { isActive, theme } ) => isActive ? theme.colors.fg.v1 : theme.colors.mg.v1 };
-	height: 48px;
-	width: 27px;
+const Page = styled( Navigable ).attrs( {
+	element: 'button',
+	role: 'tab',
+} )`
+	background-color: ${ ( { theme, isActive } ) => rgba( theme.colors.fg.v1, isActive ? 1 : 0.1 ) };
+	height: 90px;
+	width: 51px;
 	margin: 0 5px;
 	cursor: pointer;
+	border: 4px solid transparent;
+	padding: 0;
 
 	&:hover {
 		background-color: ${ ( { theme } ) => theme.colors.fg.v1 };
 	}
+
+	&:focus, &:active {
+		outline: none;
+		border-color: ${ ( { theme } ) => theme.colors.action };
+	}
 `;
 
-function Canvas() {
-	const { state: { pages, currentPageIndex }, actions: { setCurrentPageByIndex } } = useStory();
+function CarouselPage( { index } ) {
+	const {
+		state: { currentPageIndex },
+		actions: { setCurrentPageByIndex, deletePageByIndex },
+	} = useStory();
+	const deletePage = () => deletePageByIndex( index );
+	const shortcuts = { backspace: deletePage, del: deletePage };
+	return (
+		<Page
+			shortcuts={ shortcuts }
+			onClick={ () => setCurrentPageByIndex( index ) }
+			isActive={ index === currentPageIndex }
+		/>
+	);
+}
+
+function Carousel() {
+	const {
+		state: { pages },
+	} = useStory();
 	return (
 		<List>
 			{ pages.map( ( page, index ) => (
-				<Page key={ index } onClick={ () => setCurrentPageByIndex( index ) } isActive={ index === currentPageIndex } />
+				<CarouselPage key={ index } index={ index } />
 			) ) }
 		</List>
 	);
 }
 
-export default Canvas;
+export default Carousel;
+
+CarouselPage.propTypes = {
+	index: PropTypes.number.isRequired,
+};

assets/src/edit-story/components/focusable/focusable.js

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import MouseTrap from 'mousetrap';
+import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
+
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useCombinedRefs from '../../utils/useCombinedRefs';
+import getValidDOMAttributes from '../../utils/getValidDOMAttributes';
+
+function Focusable( { shortcuts, hasFocus, isGlobal, element, className, role, tabindex, forwardedRef, children, ...rest } ) {
+	const ref = useRef();
+	const setRef = useCombinedRefs( ref, forwardedRef );
+
+	useLayoutEffect( () => {
+		const mt = MouseTrap( ref.current );
+
+		// Bind all listeners
+		const sequences = Object.keys( shortcuts );
+		sequences.forEach( ( sequence ) => {
+			const callback = shortcuts[ sequence ];
+			const bindFn = isGlobal ? 'bindGlobal' : 'bind';
+			mt[ bindFn ]( sequence, callback );
+		} );
+
+		// Clear listeners on unmount/remount
+		return () => mt.reset();
+	}, [ isGlobal, shortcuts ] );
+
+	// Force focus if relevant
+	useLayoutEffect( () => {
+		if ( hasFocus ) {
+			ref.current.focus();
+		}
+	}, [ hasFocus ] );
+
+	const Wrapper = element;
+
+	return (
+		<Wrapper ref={ setRef } className={ className } role={ role } tabIndex={ tabindex } { ...getValidDOMAttributes( rest ) }>
+			{ children }
+		</Wrapper>
+	);
+}
+
+Focusable.propTypes = {
+	children: PropTypes.oneOfType( [
+		PropTypes.arrayOf( PropTypes.node ),
+		PropTypes.node,
+	] ),
+	forwardedRef: PropTypes.object,
+
+	shortcuts: PropTypes.object,
+	hasFocus: PropTypes.bool,
+	isGlobal: PropTypes.bool,
+
+	element: PropTypes.string,
+	className: PropTypes.string,
+	role: PropTypes.string,
+	tabindex: PropTypes.number,
+};
+
+Focusable.defaultProps = {
+	shortcuts: {},
+	isGlobal: false,
+	hasFocus: false,
+
+	element: 'div',
+	className: '',
+	role: 'button',
+	tabindex: 0,
+};
+
+export default Focusable;

assets/src/edit-story/components/focusable/index.js

@@ -0,0 +1,3 @@
+export { default as Focusable } from './focusable';
+export { default as Navigable } from './navigable';
+export { default as NavigableGroup } from './navigableGroup';

assets/src/edit-story/components/focusable/navigable.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import Focusable from './focusable';
+
+function Navigable( { element, className, role, tabindex, children, ...rest } ) {
+	return (
+		<Focusable element={ element } className={ className } role={ role } tabindex={ tabindex } { ...rest }>
+			{ children }
+		</Focusable>
+	);
+}
+
+Navigable.propTypes = {
+	children: PropTypes.oneOfType( [
+		PropTypes.arrayOf( PropTypes.node ),
+		PropTypes.node,
+	] ),
+
+	element: PropTypes.string,
+	className: PropTypes.string,
+	role: PropTypes.string,
+	tabindex: PropTypes.number,
+};
+
+export default Navigable;

assets/src/edit-story/components/focusable/navigableGroup.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useLayoutEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import getDirectionalKeysForNode from '../../utils/getDirectionalKeysForNode';
+import Focusable from './focusable';
+
+function NavigableGroup( { direction, element, className, role, tabindex, children } ) {
+	const ref = useRef();
+	const [ shortcuts, setShortcuts ] = useState( {} );
+
+	useLayoutEffect( () => {
+		const focus = ( node ) => node && node.focus();
+
+		if ( direction === NavigableGroup.DIRECTION_HORIZONTAL ) {
+			const { forward, backward } = getDirectionalKeysForNode( ref.current );
+			setShortcuts( {
+				[ forward ]: ( evt ) => focus( evt.target.nextElementSibling ),
+				[ backward ]: ( evt ) => focus( evt.target.previousElementSibling ),
+			} );
+		}
+	}, [ direction ] );
+
+	return (
+		<Focusable shortcuts={ shortcuts } forwardedRef={ ref } element={ element } className={ className } role={ role } tabindex={ tabindex }>
+			{ children }
+		</Focusable>
+	);
+}
+
+NavigableGroup.propTypes = {
+	children: PropTypes.oneOfType( [
+		PropTypes.arrayOf( PropTypes.node ),
+		PropTypes.node,
+	] ).isRequired,
+
+	direction: PropTypes.string,
+	hotkey: PropTypes.string,
+	element: PropTypes.string,
+	className: PropTypes.string,
+	role: PropTypes.string,
+	tabindex: PropTypes.number,
+};
+
+export default NavigableGroup;
+
+NavigableGroup.DIRECTION_HORIZONTAL = 'horizontal';
+NavigableGroup.DIRECTION_VERTICAL = 'vertical';
+NavigableGroup.DIRECTION_GRID = 'grid';