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

Different focus behavior when clicking the toolbar buttons #6336

Open
afercia opened this Issue Apr 21, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@afercia
Contributor

afercia commented Apr 21, 2018

Splitting this out from #3003

When clicking or pressing Enter on some buttons, for example the alignment buttons, focus stays on that button. Instead, when activating other buttons, for example bold/italic/strikethrough, focus is moved back to the editing area.

This is inconsistent: all buttons should behave the same. It's also different from what TinyMCE does in the classic editor, where focus is always moved back to the editing area.

@afercia

This comment has been minimized.

Contributor

afercia commented Sep 17, 2018

Discussed during today's accessibility bug-scrub: focus should be moved consistently. When activating these buttons, either focus should always be moved back to the content or it should say on the buttons. We're open to discuss which of the two behaviors would be better for usability and accessibility.
Note: in the Classic Editor, focus is always moved back to the content.

@tofumatt

This comment has been minimized.

Member

tofumatt commented Oct 9, 2018

Not really convinced this needs design feedback, and I agree with you; this is bad for accessibility but beyond that is bad usability. This should be consistent, and always return focus to the content.

@tofumatt tofumatt self-assigned this Oct 9, 2018

@tofumatt

This comment has been minimized.

Member

tofumatt commented Oct 10, 2018

I'm having a bit of trouble following the code path for these controls and where the reset happens.

It seems like the reset of focus is a by-product/side-effect of https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/rich-text/index.js#L448, so I'm not exactly clear on how to get the alignment controls (which are located elsewhere with different onChange events) to focus the control after being clicked.

@iseulde or someone else with more RichText knowledge than me: any chance you'd know off the top-of-your-head how to get the alignment controls to focus the block's content after interaction?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment