Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: prevent navigation panel focus when hidden #29600

Merged
merged 2 commits into from
Mar 12, 2021
Merged

Site Editor: prevent navigation panel focus when hidden #29600

merged 2 commits into from
Mar 12, 2021

Conversation

creativecoder
Copy link
Contributor

@creativecoder creativecoder commented Mar 6, 2021

Description

Removes the site editor navigation panel from the accessibility tree when hidden, so it can't receive keyboard focus.

Also removes an unneeded border from the toggle button to improve the slide animation.

Fixes #29536

How has this been tested?

Using the keyboard to navigate through the site editor header.

Screenshots

Keyboard navigation in header menu

Screen Recording 2021-03-05 at 22 06 16

Remove bottom border from navigation toggle when closing panel

Before After
Screen Shot 2021-03-05 at 22 11 50 Screen Shot 2021-03-05 at 22 11 39

Types of changes

Non-breaking change

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate. (n/a)
  • I've updated all React Native files affected by any refactorings/renamings in this PR. (n/a)

@creativecoder creativecoder self-assigned this Mar 6, 2021
@creativecoder creativecoder added the [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") label Mar 6, 2021
@github-actions
Copy link

github-actions bot commented Mar 6, 2021

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @creativecoder! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Mar 6, 2021
Copy link
Member

@david-szabo97 david-szabo97 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as expected! Thanks!

✅ Chrome
✅ Firefox
✅ Edge
✅ Safari

Copy link
Member

@vindl vindl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a minor comment, but otherwise this looks good to me! :shipit:

@@ -14,27 +14,18 @@

body.is-navigation-sidebar-open & {
display: flex;

.edit-site-navigation-toggle__button {
Copy link
Member

@vindl vindl Mar 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was added recently in #29093 to address the following issue #29094. Do you all think we should still keep it? cc @jeyip

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think something else changed since then that makes this override unnecessary. Here's what I see (using this branch)... looks like border is visible underneath the icon (at least to my eyes)

Firefox Safari Chrome
Firefox Safari Chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site Editor: Navigation panel items are focusable when hidden
4 participants