Fix inline block toolbar keyboard navigation #28420
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diegohaz
added
[a11y] Keyboard & Focus
[Package] Block editor
|
Size Change: +5.83 kB (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
diegohaz
commented
Jan 25, 2021
| @@ -19,9 +24,12 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => { | |||
| focusOnMount={ false } | |||
| anchorRef={ anchorRef } | |||
| className="block-editor-rich-text__inline-format-toolbar" | |||
| __unstableSlotName="block-toolbar" | |||
| // Render inline | |||
| __unstableSlotName={ null } | |||
There was a problem hiding this comment.
I'm passing null to the slot name so it renders inline in the React tree, and not on a separate slot as it won't find any slot:
gutenberg/packages/components/src/popover/index.js
Lines 627 to 635 in 5c24a7d
I don't know if there's a better way to achieve this, but I think we could have an inline prop or something on Popover.
diegohaz
requested review from
ajitbohra,
ajlende,
cameronvoell,
ellatrix,
guarani,
mkevins,
nerrad and
ntwb
as code owners
|
There is only one improvement I will suggest. Can you modify the PR to allow Alt+F10 open the formatting toolbar if focus in in Caption field? Currently, only Shift+Tab can do this. Otherwise it is functioning well. Thanks. |
|
@alexstine Thanks for reviewing it! I've added support for Alt+F10. |
|
@diegohaz I've given it a test, this now seems perfect. Thanks. |
ellatrix
requested changes
Feb 8, 2021
|
@ellatrix Thanks for reviewing this. The only other way I can think of is creating focus trap elements that will transfer the focus between the image caption editable content and the toolbar and vice-versa. But this technique is rather complex and there are known issues with VoiceOver (VO will just ignore these focus trap elements when navigating through elements with VO keys unless you have an unreliable timeout on it). The safest way I can think of is relying on the DOM order like in this PR. What do you think is the caveat on this? |
|
It should align more with how the block toolbar works, which is also not embedded in the content's DOM. Ideally, the UI DOM and the content DOM should be kept separate so the styling is isolated. It's also possible to run into some weird selector issues like :first-child and :last-child if the popover unexpectedly appears in the content. To align better with the block toolbar, I'd imagine you could reverse tab into the inline toolbar just like you would for the block toolbar. Another reverse tab could put you in the block toolbar. In other to accomplish that, the inline toolbar DOM should be rendered right after the block toolbar DOM. |
7 tasks
|
I created #29874. The inline toolbar is actually accessible by keyboard, it's just misplaced. It should be rendered after the block toolbar instead of before. |
|
Fixed in #31134 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #26114
Description
This PR makes the inline toolbars (present on Image, Audio and Video captions for example) accessible through the keyboard. Just like the block toolbars, now it's possible to press Shift+Tab or Alt+F10 to access the nested toolbar.
How has this been tested?
Check Image, Audio, Video, Embed and Gallery (including the gallery image) captions and try to access the caption toolbar with the keyboard by pressing Shift+Tab or using screen reader tools to find the toolbar.
I've also included an e2e test on the Image block.
Types of changes
Bug fix
Checklist: