Components: Make Toolbar accessible

packages/components/package.json

@@ -42,6 +42,7 @@
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
+		"reakit": "^1.0.0-beta.9",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^3.3.2"

packages/components/src/dropdown-menu/index.js

@@ -30,6 +30,16 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	return mergedProps;
 }
 
+function callAll( ...fns ) {
+	return ( ...args ) => {
+		for ( const fn of fns ) {
+			if ( typeof fn === 'function' ) {
+				fn( ...args );
+			}
+		}
+	};
+}
+
 function DropdownMenu( {
 	children,
 	className,
@@ -98,8 +108,8 @@ function DropdownMenu( {
 					<IconButton
 						{ ...mergedToggleProps }
 						icon={ icon }
-						onClick={ onToggle }
-						onKeyDown={ openOnArrowDown }
+						onClick={ callAll( onToggle, mergedToggleProps.onClick ) }
+						onKeyDown={ callAll( openOnArrowDown, mergedToggleProps.onKeyDown ) }
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }

packages/components/src/toolbar-button/accessible-toolbar-button-container.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { useToolbarItem } from 'reakit/Toolbar';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, Children, cloneElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarContext from '../toolbar-context';
+
+function AccessibleToolbarButtonContainer( props ) {
+	const toolbar = useContext( ToolbarContext );
+	const button = Children.only( props.children );
+	const itemHTMLProps = useToolbarItem( toolbar, button.props );
+	return (
+		<div { ...props }>
+			{ cloneElement( button, itemHTMLProps ) }
+		</div>
+	);
+}
+
+export default AccessibleToolbarButtonContainer;

packages/components/src/toolbar-button/accessible-toolbar-button-container.native.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import ToolbarButtonContainer from './toolbar-button-container';
+
+export default ToolbarButtonContainer;

packages/components/src/toolbar-button/index.js

@@ -3,10 +3,17 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import IconButton from '../icon-button';
+import ToolbarContext from '../toolbar-context';
+import AccessibleToolbarButtonContainer from './accessible-toolbar-button-container';
 import ToolbarButtonContainer from './toolbar-button-container';
 
 function ToolbarButton( {
@@ -22,26 +29,39 @@ function ToolbarButton( {
 	extraProps,
 	children,
 } ) {
+	const context = useContext( ToolbarContext );
+	const button = (
+		<IconButton
+			icon={ icon }
+			label={ title }
+			shortcut={ shortcut }
+			data-subscript={ subscript }
+			onClick={ ( event ) => {
+				event.stopPropagation();
+				onClick();
+			} }
+			className={ classnames(
+				'components-toolbar__control',
+				className,
+				{ 'is-active': isActive }
+			) }
+			aria-pressed={ isActive }
+			disabled={ isDisabled }
+			{ ...extraProps }
+		/>
+	);
+
+	if ( context ) {
+		return (
+			<AccessibleToolbarButtonContainer className={ containerClassName }>
+				{ button }
+			</AccessibleToolbarButtonContainer>
+		);
+	}
+
 	return (
 		<ToolbarButtonContainer className={ containerClassName }>
-			<IconButton
-				icon={ icon }
-				label={ title }
-				shortcut={ shortcut }
-				data-subscript={ subscript }
-				onClick={ ( event ) => {
-					event.stopPropagation();
-					onClick();
-				} }
-				className={ classnames(
-					'components-toolbar__control',
-					className,
-					{ 'is-active': isActive }
-				) }
-				aria-pressed={ isActive }
-				disabled={ isDisabled }
-				{ ...extraProps }
-			/>
+			{ button }
 			{ children }
 		</ToolbarButtonContainer>
 	);

packages/components/src/toolbar-button/style.scss

@@ -29,6 +29,7 @@
 		border-radius: $radius-round-rectangle;
 		height: 30px;
 		width: 30px;
+		box-sizing: border-box;
 	}
 
 	// Subscript for numbered icon buttons, like headings

packages/components/src/toolbar-context/index.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const ToolbarContext = createContext();
+
+export default ToolbarContext;

packages/components/src/toolbar-group/index.js

@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { flatMap } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarButton from '../toolbar-button';
+import ToolbarGroupContainer from './toolbar-group-container';
+import ToolbarGroupCollapsed from './toolbar-group-collapsed';
+
+/**
+ * Renders a toolbar with controls.
+ *
+ * The `controls` prop accepts an array of sets. A set is an array of controls.
+ * Controls have the following shape:
+ *
+ * ```
+ * {
+ *   icon: string,
+ *   title: string,
+ *   subscript: string,
+ *   onClick: Function,
+ *   isActive: boolean,
+ *   isDisabled: boolean
+ * }
+ * ```
+ *
+ * For convenience it is also possible to pass only an array of controls. It is
+ * then assumed this is the only set.
+ *
+ * Either `controls` or `children` is required, otherwise this components
+ * renders nothing.
+ *
+ * @param {Object}        props
+ * @param {Array}        [props.controls]  The controls to render in this toolbar.
+ * @param {ReactElement} [props.children]  Any other things to render inside the
+ *                                         toolbar besides the controls.
+ * @param {string}       [props.className] Class to set on the container div.
+ *
+ * @return {ReactElement} The rendered toolbar.
+ */
+function ToolbarGroup( {
+	controls = [],
+	children,
+	className,
+	isCollapsed,
+	icon,
+	label,
+	...otherProps
+} ) {
+	if ( ( ! controls || ! controls.length ) && ! children ) {
+		return null;
+	}
+
+	const cls = classnames( 'components-toolbar', className );
+
+	// Normalize controls to nested array of objects (sets of controls)
+	let controlSets = controls;
+	if ( ! Array.isArray( controlSets[ 0 ] ) ) {
+		controlSets = [ controlSets ];
+	}
+
+	if ( isCollapsed ) {
+		return (
+			<ToolbarGroupCollapsed
+				icon={ icon }
+				label={ label }
+				controls={ controlSets }
+				className={ cls }
+			/>
+		);
+	}
+
+	return (
+		<ToolbarGroupContainer className={ cls } { ...otherProps }>
+			{ flatMap( controlSets, ( controlSet, indexOfSet ) =>
+				controlSet.map( ( control, indexOfControl ) => (
+					<ToolbarButton
+						key={ [ indexOfSet, indexOfControl ].join() }
+						containerClassName={
+							indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null
+						}
+						{ ...control }
+					/>
+				) )
+			) }
+			{ children }
+		</ToolbarGroupContainer>
+	);
+}
+
+export default ToolbarGroup;

packages/components/src/toolbar-group/style.native.scss

@@ -0,0 +1,11 @@
+.container {
+	flex-direction: row;
+	border-left-width: 1px;
+	border-color: #e9eff3;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.containerDark {
+	border-color: #525354;
+}

packages/components/src/toolbar-group/style.scss

@@ -0,0 +1,41 @@
+.components-toolbar-group {
+	margin: 0;
+	border: $border-width solid $light-gray-500;
+	background-color: $white;
+	display: flex;
+	flex-shrink: 0;
+}
+
+div.components-toolbar-group {
+	& > div {
+		// IE11 does not support `position: sticky`, or Flex very well, so use block.
+		display: block;
+		@supports (position: sticky) {
+			display: flex;
+		}
+
+		margin: 0;
+	}
+
+	& > div + div {
+		margin-left: -3px;
+
+		&.has-left-divider {
+			margin-left: 6px;
+			position: relative;
+			overflow: visible;
+		}
+
+		&.has-left-divider::before {
+			display: inline-block;
+			content: "";
+			box-sizing: content-box;
+			background-color: $light-gray-500;
+			position: absolute;
+			top: 8px;
+			left: -3px;
+			width: 1px;
+			height: $icon-button-size - 16px;
+		}
+	}
+}