Accessibility: Show open button when the sidebar is closed and tabbin…

…g out of the content
WordPress · Feb 3, 2020 · c2e8361 · c2e8361
1 parent 8ef615e
commit c2e8361
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 30 deletions.
diff --git a/packages/edit-post/src/components/editor-regions/style.scss b/packages/edit-post/src/components/editor-regions/style.scss
@@ -74,6 +74,27 @@ html {
 }
 
 .edit-post-editor-regions__sidebar {
+	display: none;
+
+	@include break-medium() {
+		display: block;
+		z-index: z-index(".edit-post-editor-regions__sidebar");
+		position: fixed !important; // Need to override the default relative positionning
+		top: -9999em;
+		bottom: auto;
+		left: auto;
+		right: 0;
+		width: $sidebar-width;
+
+		&:focus {
+			top: auto;
+			bottom: 0;
+		}
+	}
+}
+
+.is-sidebar-opened .edit-post-editor-regions__sidebar {
+	display: block;
 	width: auto; // Keep the sidebar width flexible.
 	flex-shrink: 0;
 	position: absolute;
@@ -84,10 +105,6 @@ html {
 	left: 0;
 	background: $white;
 
-	&:empty {
-		display: none;
-	}
-
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		overflow: auto;

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -52,9 +52,11 @@ import WelcomeGuide from '../welcome-guide';
 
 function Layout() {
 	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const { closePublishSidebar, togglePublishSidebar } = useDispatch(
-		'core/edit-post'
-	);
+	const {
+		closePublishSidebar,
+		openGeneralSidebar,
+		togglePublishSidebar,
+	} = useDispatch( 'core/edit-post' );
 	const {
 		mode,
 		isRichEditingEnabled,
@@ -66,6 +68,7 @@ function Layout() {
 		hasFixedToolbar,
 		previousShortcut,
 		nextShortcut,
+		hasBlockSelected,
 	} = useSelect( ( select ) => {
 		return {
 			hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive(
@@ -93,6 +96,9 @@ function Layout() {
 			nextShortcut: select(
 				'core/keyboard-shortcuts'
 			).getAllShortcutRawKeyCombinations( 'core/edit-post/next-region' ),
+			hasBlockSelected: select(
+				'core/block-editor'
+			).getBlockSelectionStart(),
 		};
 	}, [] );
 	const showPageTemplatePicker = __experimentalUsePageTemplatePickerVisible();
@@ -103,6 +109,10 @@ function Layout() {
 		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
 	} );
+	const openSidebarPanel = () =>
+		openGeneralSidebar(
+			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
+		);
 
 	return (
 		<>
@@ -120,6 +130,22 @@ function Layout() {
 					sidebar={
 						! publishSidebarOpened && (
 							<>
+								{ ! sidebarIsOpened && (
+									<div className="edit-post-layout__toogle-sidebar-panel">
+										<Button
+											isSecondary
+											className="edit-post-layout__toogle-sidebar-panel-button"
+											onClick={ openSidebarPanel }
+											aria-expanded={ false }
+										>
+											{ hasBlockSelected
+												? __( 'Open block settings' )
+												: __(
+														'Open document settings'
+												  ) }
+										</Button>
+									</div>
+								) }
 								<SettingsSidebar />
 								<Sidebar.Slot />
 							</>
@@ -165,10 +191,10 @@ function Layout() {
 								}
 							/>
 						) : (
-							<div className="edit-post-toggle-publish-panel">
+							<div className="edit-post-layout__toogle-publish-panel">
 								<Button
 									isSecondary
-									className="edit-post-toggle-publish-panel__button"
+									className="edit-post-layout__toogle-publish-panel-button"
 									onClick={ togglePublishSidebar }
 									aria-expanded={ false }
 								>

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -61,31 +61,33 @@
 	justify-content: center;
 }
 
-.edit-post-toggle-publish-panel {
+.edit-post-layout__toogle-publish-panel,
+.edit-post-layout__toogle-sidebar-panel {
 	background-color: $white;
 	padding: 10px 10px 10px 0;
+}
 
-	.edit-post-toggle-publish-panel__button {
-		width: auto;
-		height: auto;
-		display: block;
-		font-size: 14px;
-		font-weight: 600;
-		margin: 0 0 0 auto;
-		padding: 15px 23px 14px;
-		line-height: normal;
-		text-decoration: none;
-		outline: none;
-		background: #f1f1f1;
-		color: theme(secondary);
+.edit-post-layout__toogle-publish-panel-button,
+.edit-post-layout__toogle-sidebar-panel-button {
+	width: auto;
+	height: auto;
+	display: block;
+	font-size: 14px;
+	font-weight: 600;
+	margin: 0 0 0 auto;
+	padding: 15px 23px 14px;
+	line-height: normal;
+	text-decoration: none;
+	outline: none;
+	background: #f1f1f1;
+	color: theme(secondary);
 
-		&:focus {
-			position: fixed;
-			top: auto;
-			right: 10px;
-			bottom: 10px;
-			left: auto;
-		}
+	&:focus {
+		position: fixed;
+		top: auto;
+		right: 10px;
+		bottom: 10px;
+		left: auto;
 	}
 }