Improve publish panel accessibility; Add new publish landmark region; (…

…#7552) ## Description This commit makes a series of changes to make publish panel more accessible. The PR tries to follow the ideas discussed during WCEU contributors day and Accessibility chats on Wordpress slack. Tries to address most parts of #4187. ## Types of changes Adds a new Publish landmark. When publish panel is visible the publish landmark contains the Publish panel. When the panel is hidden nothing is visible, unless we focus the landmark using Gutenberg landmark navigation (control + < or control + `) or we focus the button using tab, in this cases a button to open publish panel appears. We automatically focus the contents of the publish panel when we open it. The first element of the Panel is the publish button, so it gets focused. We now don't render other sidebars if the publish panel is visible. The other sidebars were not visible, but they were tabbable making keyboard users experience sub-optimal. Added aria-expanded true to the close button on publishing panel. This button allows collapsing the panel so I feel it should have this aria property.
WordPress · Jul 3, 2018 · 1b2db4e · 1b2db4e
1 parent 6c0dbfd
commit 1b2db4e
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 56 deletions.
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -76,6 +76,7 @@ $z-layers: (
 	'.components-autocomplete__results': 1000000,
 
 	'.skip-to-selected-block': 100000,
+	'.edit-post-toggle-publish-panel': 100000,
 
 	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
 	'.nux-dot-tip': 1000001,

diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
@@ -7,7 +7,7 @@ import { some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Popover, ScrollLock, navigateRegions } from '@wordpress/components';
+import { Button, Popover, ScrollLock, navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	AutosaveMonitor,
@@ -18,7 +18,7 @@ import {
 	PreserveScrollInReorder,
 } from '@wordpress/editor';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/element';
+import { compose, Fragment } from '@wordpress/element';
 import { PluginArea } from '@wordpress/plugins';
 import { withViewportMatch } from '@wordpress/viewport';
 
@@ -46,6 +46,7 @@ function Layout( {
 	publishSidebarOpened,
 	hasFixedToolbar,
 	closePublishSidebar,
+	togglePublishSidebar,
 	metaBoxes,
 	hasActiveMetaboxes,
 	isSaving,
@@ -58,6 +59,11 @@ function Layout( {
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 
+	const publishLandmarkProps = {
+		role: 'region',
+		'aria-label': __( 'Publish' ),
+		tabIndex: -1,
+	};
 	return (
 		<div className={ className }>
 			<DocumentTitle />
@@ -83,21 +89,36 @@ function Layout( {
 					<MetaBoxes location="advanced" />
 				</div>
 			</div>
-			{ publishSidebarOpened && (
+			{ publishSidebarOpened ? (
 				<PostPublishPanel
+					{ ...publishLandmarkProps }
 					onClose={ closePublishSidebar }
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
 					PrePublishExtension={ PluginPrePublishPanel.Slot }
 					PostPublishExtension={ PluginPostPublishPanel.Slot }
 				/>
+			) : (
+				<Fragment>
+					<div className="edit-post-toggle-publish-panel" { ...publishLandmarkProps }>
+						<Button
+							isDefault
+							type="button"
+							className="edit-post-toggle-publish-panel__button"
+							onClick={ togglePublishSidebar }
+							aria-expanded={ false }
+						>
+							{ __( 'Open publish panel' ) }
+						</Button>
+					</div>
+					<DocumentSidebar />
+					<BlockSidebar />
+					<Sidebar.Slot />
+					{
+						isMobileViewport && sidebarIsOpened && <ScrollLock />
+					}
+				</Fragment>
 			) }
-			<DocumentSidebar />
-			<BlockSidebar />
-			<Sidebar.Slot />
-			{
-				isMobileViewport && sidebarIsOpened && <ScrollLock />
-			}
 			<Popover.Slot />
 			<PluginArea />
 		</div>
@@ -115,9 +136,13 @@ export default compose(
 		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
 		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
 	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		closePublishSidebar: dispatch( 'core/edit-post' ).closePublishSidebar,
-	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );
+		return {
+			closePublishSidebar,
+			togglePublishSidebar,
+		};
+	} ),
 	navigateRegions,
 	withViewportMatch( { isMobileViewport: '< small' } ),
 )( Layout );
diff --git a/edit-post/components/layout/style.scss b/edit-post/components/layout/style.scss
@@ -115,3 +115,29 @@
 .edit-post-layout .editor-post-publish-panel__header-publish-button {
 	margin-right: 52px; // This number is approximative to keep the publish button at the same position when opening the panel
 }
+
+.edit-post-toggle-publish-panel {
+	display: block;
+	position: relative;
+	float: right;
+	top: -9999em;
+	z-index: z-index( '.edit-post-toggle-publish-panel' );
+	padding: 20px 0 0 0;
+	width: $sidebar-width;
+	&:focus-within {
+		top: 0;
+	}
+
+	.edit-post-toggle-publish-panel__button {
+		float: right;
+		width: auto;
+		height: auto;
+		font-size: 14px;
+		font-weight: 600;
+		padding: 15px 23px 14px;
+		line-height: normal;
+		text-decoration: none;
+		outline: none;
+		background: #f1f1f1;
+	}
+}
diff --git a/editor/components/post-publish-button/index.js b/editor/components/post-publish-button/index.js
@@ -7,57 +7,70 @@ import { noop, get } from 'lodash';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { compose } from '@wordpress/element';
+import { compose, Component, createRef } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PublishButtonLabel from './label';
+export class PostPublishButton extends Component {
+	constructor( props ) {
+		super( props );
+		this.buttonNode = createRef();
+	}
+	componentDidMount() {
+		if ( this.props.focusOnMount ) {
+			this.buttonNode.current.focus();
+		}
+	}
 
-export function PostPublishButton( {
-	isSaving,
-	onStatusChange,
-	onSave,
-	isBeingScheduled,
-	visibility,
-	isPublishable,
-	isSaveable,
-	hasPublishAction,
-	onSubmit = noop,
-	forceIsSaving,
-} ) {
-	const isButtonEnabled = isPublishable && isSaveable;
+	render() {
+		const {
+			isSaving,
+			onStatusChange,
+			onSave,
+			isBeingScheduled,
+			visibility,
+			isPublishable,
+			isSaveable,
+			hasPublishAction,
+			onSubmit = noop,
+			forceIsSaving,
+		} = this.props;
+		const isButtonEnabled = isPublishable && isSaveable;
 
-	let publishStatus;
-	if ( ! hasPublishAction ) {
-		publishStatus = 'pending';
-	} else if ( isBeingScheduled ) {
-		publishStatus = 'future';
-	} else if ( visibility === 'private' ) {
-		publishStatus = 'private';
-	} else {
-		publishStatus = 'publish';
-	}
+		let publishStatus;
+		if ( ! hasPublishAction ) {
+			publishStatus = 'pending';
+		} else if ( isBeingScheduled ) {
+			publishStatus = 'future';
+		} else if ( visibility === 'private' ) {
+			publishStatus = 'private';
+		} else {
+			publishStatus = 'publish';
+		}
 
-	const onClick = () => {
-		onSubmit();
-		onStatusChange( publishStatus );
-		onSave();
-	};
+		const onClick = () => {
+			onSubmit();
+			onStatusChange( publishStatus );
+			onSave();
+		};
 
-	return (
-		<Button
-			className="editor-post-publish-button"
-			isPrimary
-			isLarge
-			onClick={ onClick }
-			disabled={ ! isButtonEnabled }
-			isBusy={ isSaving }
-		>
-			<PublishButtonLabel forceIsSaving={ forceIsSaving } />
-		</Button>
-	);
+		return (
+			<Button
+				ref={ this.buttonNode }
+				className="editor-post-publish-button"
+				isPrimary
+				isLarge
+				onClick={ onClick }
+				disabled={ ! isButtonEnabled }
+				isBusy={ isSaving }
+			>
+				<PublishButtonLabel forceIsSaving={ forceIsSaving } />
+			</Button>
+		);
+	}
 }
 
 export default compose( [

diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js
@@ -62,14 +62,14 @@ class PostPublishPanel extends Component {
 	}
 
 	render() {
-		const { isScheduled, onClose, forceIsDirty, forceIsSaving, PrePublishExtension, PostPublishExtension } = this.props;
+		const { isScheduled, onClose, forceIsDirty, forceIsSaving, PrePublishExtension, PostPublishExtension, ...additionalProps } = this.props;
 		const { loading, submitted } = this.state;
 		return (
-			<div className="editor-post-publish-panel">
+			<div className="editor-post-publish-panel" { ...additionalProps }>
 				<div className="editor-post-publish-panel__header">
 					{ ! submitted && (
 						<div className="editor-post-publish-panel__header-publish-button">
-							<PostPublishButton onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
+							<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
 						</div>
 					) }
 					{ submitted && (
@@ -78,6 +78,7 @@ class PostPublishPanel extends Component {
 						</div>
 					) }
 					<IconButton
+						aria-expanded={ true }
 						onClick={ onClose }
 						icon="no-alt"
 						label={ __( 'Close Publish Panel' ) }