Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Improve publish panel accessibility; Add new publish landmark region; #7552
This PR 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.
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.
How has this been tested?
I did some smoke testing and verified publish works as before.
changed the title from
Improve publish panel accessible; Add new publish landmark region;
Improve publish panel accessibility; Add new publish landmark region;
Jun 27, 2018
From an a11y perspective, seems to me a very good improvement! Code-wise I'd defer to others with more expertise than me. The only things I can think of are related to some CSS tweaking, which could also be iterated later. More details in the comments.
@jorgefilipecosta thanks, seems to me this is a very good step forward
Super helpful, this helps a lot also when tabbing normally through the top bar
Makes perfectly sense.
Couple things about styling. When using the shortcut for the navigable regions, the blue outline baffled me because I had the impression the button was already focused. Pressing Enter or Spacebar did nothing though:
Then I realized I had to press Tab to actually focus the button and activate it. Would it be possible to add some spacing between the region and the button? Something like:
In the same area, there's also the "Skip to the selected block" button. To make it appear, select a block, then jump to the sidebar using Ctrl + ` and tab to the bottom of the sidebar. I have the impression the new landmark region partially overlies this button, as the region is always there. Maybe not a real issue because the button can be used with a keyboard anyway, but it's not possible to click on part of it.
More importantly, the region will cover any element in the bottom part of the sidebar, which may be a problem with the panels open and with medium / small screens:
Lastly, making the button style match as much as possible the "Skip" button would be a very nice touch.