Improve publish panel accessibility; Add new publish landmark region;

edit-post/assets/stylesheets/_z-index.scss

@@ -30,7 +30,7 @@ $z-layers: (
  // Side UI active buttons
  '.editor-block-settings-remove': 1,
  '.editor-block-mover__control': 1,
- 
+
  // Should have lower index than anything else positioned inside the block containers
  '.editor-block-list__block-draggable': 0,
 
@@ -77,6 +77,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,

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 );

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;
+ }
+}

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( [

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' ) }