-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Fix DropdownMenu arrows navigation and add missing aria-label. #1875
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, appears this is needed because of the behavior of onKeyDown
and block navigation in VisualEditorBlock
.
gutenberg/editor/modes/visual-editor/block.js
Line 341 in af63d4e
onKeyDown={ this.onKeyDown } |
We could move onKeyDown
handler to the block's immediate wrapper element (i.e. not handling events in toolbar), but since the root element in this component can receive focus, we probably want arrow navigation to apply to the entire thing.
Which is all to say, this is probably a good solution, though problematic that descendants of the VisualEditorBlock component need to be aware of the behavior.
blocks/library/table/table-block.js
Outdated
@@ -89,6 +89,7 @@ export default class TableBlock extends wp.element.Component { | |||
<li> | |||
<DropdownMenu | |||
icon="editor-table" | |||
label={ wp.i18n.__( 'Edit Table' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep I know, I didn't want to change also all the other ones, because outside of the scope of this PR. But since we're here, I can do that if you agree.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't want to change also all the other ones, because outside of the scope of this PR.
Sure, especially in smaller pull requests like this one, I'm fine with some general refactoring sprinkled in as well. In an ideal world we'd have separate individual pull requests to refactor, but alas the world is not ideal and I find such PRs are few and far between.
But agree with the sentiment generally 👍
Fixes the DropdownMenu navigation with arrows.
DOWN and RIGHT arrows were working, UP and LEFT weren't. Not sure why the difference, but this is probably related to the recent introduction of arrows navigation through blocks.
If so, there are probably more places where
stopPropagation()
will be needed.Also, adds a missing label on the button that opens the drop down menu: it was completely empty... Uses
wp.i18n.__()
for consistency with what is already used in the file.Todo: when one of the menu items is focused, pressing Escape should close the menu but it also makes the whole toolbar disappear. Will keep investigating and open a separate issue for this, probably together with other a11y improvements.
Fixes #1874