Skip to content

Commit

Permalink
Make Admin Sidebar button into a toggle to improve a11y.
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jeryj committed Apr 25, 2023
1 parent d1a2b09 commit 6e809d6
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/site-hub/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
}
},
};
Expand Down

0 comments on commit 6e809d6

Please sign in to comment.