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.

Sign up for GitHub

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

Jump to bottom

Edit Post: More Options menu toggle buttons cause focus loss when toggled #14849

Closed
aduth opened this issue Apr 5, 2019 · 3 comments · Fixed by #14851
Closed

Edit Post: More Options menu toggle buttons cause focus loss when toggled #14849

aduth opened this issue Apr 5, 2019 · 3 comments · Fixed by #14851
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Good First Issue An issue that's suitable for someone looking to contribute for the first time [Package] Edit Post /packages/edit-post

Comments

@aduth
Copy link
Member

aduth commented Apr 5, 2019 •
edited
Loading

Previously: #14456 (comment)

Describe the bug

When activating the toggleable menu items from the post editor's More Options menu, a focus loss occurs. Proceeding to press Tab will restore focus to the expected position (in Chrome at least); however, the focus loss should not occur.

To reproduce

  1. Navigate to Posts > Add New
  2. Click or otherwise activate the "More Options" menu in the top-right
  3. Press Spacebar (assumes first menu item focused)
  4. Note focus loss

Expected behavior

Focus should remain on the activated toggle button ("Top Toolbar"), indicated by the focus outline on the button.

Desktop:

  • OS: macOS Mojave 10.14.4
  • Browser: Chrome Version 73.0.3683.86 (Official Build) (64-bit)

Additional context

As noted at #14456 (comment), this has to do with how the menu item elements become unmounted and remounted.
@aduth aduth added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Post /packages/edit-post labels Apr 5, 2019
This was referenced Apr 5, 2019
Merged
Merged
@gziolo gziolo added Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Dev Ready for, and needs developer efforts labels Apr 6, 2019
@aduth aduth mentioned this issue Apr 12, 2019
Merged
@gziolo gziolo self-assigned this Apr 12, 2019
@gziolo gziolo added [Status] In Progress Tracking issues with work in progress and removed Needs Dev Ready for, and needs developer efforts labels Apr 12, 2019
@noisysocks
Copy link
Member

@gziolo: Are you still working on this bug? It's causing an E2E test failure in #14851 so I'm planning on including a fix in #14851.

@gziolo gziolo removed their assignment Aug 1, 2019
@gziolo gziolo removed the [Status] In Progress Tracking issues with work in progress label Aug 1, 2019
@gziolo
Copy link
Member

gziolo commented Aug 1, 2019

Are you still working on this bug? It's causing an E2E test failure in #14851 so I'm planning on including a fix in #14851.

I planned to work on it, but I got completely distracted. Let me know when you have the fix ready. I will help to land it.

@gziolo
Copy link
Member

gziolo commented Aug 2, 2019

Awesome work @noisysocks 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Good First Issue An issue that's suitable for someone looking to contribute for the first time [Package] Edit Post /packages/edit-post
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Components: Add onFocusOutside replacement to Popover onClickOutside WordPress/gutenberg
3 participants
@noisysocks @gziolo @aduth