Skip to content

Sidebar header: avoid focus loss and other improvements #8079

Description

@afercia

When using a keyboard and activating one of the sidebar header buttons to switch sidebar, there's a focus loss:

screen shot 2018-07-20 at 14 15 31

The focus loss is more evident in some browsers (IE11) but it happens in all browsers and it's particularly annoying when using a screen reader. The only difference is that modern browsers are a bit smarter and they try to keep focus "in place" but it's very clear the button is not focused any longer after it gets pressed (the outline disappears).

Seems to me this has to do with the changes introduced in d4749ff

Previously (Gutenberg 2.6.0), the sidebar header was outside of the panels. Instead, now it's placed within the panels so it gets re-rendered every time users switch to the other sidebar. Compared with the previous behavior, this is actually an accessibility regression.

Metadata

Metadata

Assignees

Labels

Needs TestingNeeds further testing to be confirmed.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intended[Type] RegressionRelated to a regression in the latest release

Type

No type
No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions