From 6e809d679532e53bc38dba94d12e1dd0c464e0dc Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 25 Apr 2023 15:51:36 +0200
Subject: [PATCH] Make Admin Sidebar button into a toggle to improve a11y.

On the site editor, when the Admin Sidebar is open, the button label and tooltip says "Open Admin Sidebar," but it is already open, so the button doesn't do anything when clicked again which makes it seem broken.

I switched it into a toggle to open/close the Admin Sidebar as a starting point to at least fix the accessbility of it, as a non-functional button feels broken. I considered a couple other options but they had their own issues:

1. When the sidebar is open, have the button go back to the dashboard. This action would mean switching it from a `<button>` when the dashboard is closed, and then changing it to an `<a>` element afterwards to semantically describe the functionality. Switching the element's action like that feels confusing.

2. Disable focus on the button when the panel is open. When the panel is closed, clicking the Open Admin Sidebar button could open the sidebar and then place focus on the first item of the navigation menu. This could be a fine solution, but would require more work, so I didn't want to go through with that interaction unless others agreed it was desired. Switching to a toggle was the simplest way to address it in a sensible way.
---
 packages/edit-site/src/components/site-hub/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index c20a6ad202f5d..7d3a9b135492f 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -43,11 +43,16 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const siteIconButtonProps = {
-		label: __( 'Open Admin Sidebar' ),
+		label:
+			canvasMode === 'edit'
+				? __( 'Open Admin Sidebar' )
+				: __( 'Close Admin Sidebar' ),
 		onClick: () => {
 			if ( canvasMode === 'edit' ) {
 				clearSelectedBlock();
 				setCanvasMode( 'view' );
+			} else {
+				setCanvasMode( 'edit' );
 			}
 		},
 	};