Disable navigation block for text mode.#12185
Disable navigation block for text mode.#12185gziolo merged 8 commits intoWordPress:masterfrom nicolad:enhancement/12157-disable-navigation-block-in-text-mode
Conversation
…enhancement/12157-disable-navigation-block-in-text-mode
jorgefilipecosta
left a comment
jorgefilipecosta
left a comment
There was a problem hiding this comment.
Hi @nicolad thank you for your contribution 👍 When I tried the keyboard shortcut ^⌥O it worked even if we are on the code editor. I think we also need to conditionally apply the shortcut e.g:
{ hasBlocks && ! isTextModeEnabled && <KeyboardShortcuts
bindGlobal
shortcuts={ {
[ rawShortcut.access( 'o' ) ]: onToggle,
} }
/> }
| label={ __( 'Block Navigation' ) } | ||
| className="editor-block-navigation" | ||
| shortcut={ displayShortcut.access( 'o' ) } | ||
| aria-disabled={ ! hasBlocks || isTextModeEnabled } |
There was a problem hiding this comment.
Can we use the disabled attribute instead of aria-disabled? I think it has the same effect for screen readers users and avoids the need for the onClick change done here as the onClick is not called if disabled is set to true.
There was a problem hiding this comment.
Thank you @jorgefilipecosta for tips.
Had adjusted details you've pointed.
And because this PR had been merged before:
https://github.com/WordPress/gutenberg/pull/12073/files
I did not touch any of those modifications regarding onClick. Only my changes had been discarded.
There was a problem hiding this comment.
@jorgefilipecosta - in my testing there is a subtle difference between disabled and aria-disabled - in case of using disabled you never have to tab through the disabled element which seems to be reasonable but differs from other buttons like redo or undo. I have already landed this PR, but given that we need to do something similar for Document Outline I can open a follow-up and include that, too. What do you think?
gziolo
added
[Focus] Accessibility (a11y)
gziolo
left a comment
gziolo
left a comment
There was a problem hiding this comment.
This looks great, thanks for fixing. We should land it much faster.
…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: (22 commits) Make the modal title styling consistent (#13669) Disable navigation block for text mode. (#12185) Fix: Linting problem in modal example code (#13671) Add myself as a code owner to the annotations (#13672) Add more reviewers to CODEOWNERS.md file (#13667) Plugin: Remove jQuery heartbeat-to-hooks proxying (#13576) Workflow: Add repository CODEOWNERS file (#13604) Add a mobile minimum size for form fields (#13639) Update edit-save documentation (#13578) Alt image setting (#13631) Fix: Allow years lower than 1970 in DateTime component. (#13602) Using addQueryArgs to generate Manage All Reusable Blocks link (#13653) Bump plugin version to 5.0.0-rc.1 (#13652) Update lodash to 4.17.10 (#13651) Refreshed PR (#9469) Set default values of the width and height input fields according to the actual image dimensions (#7687) 12647 fix css color picker (#12747) Remove "we" from messages (#13644) Fix: Font size picker max width on mobile (#13264) Fix/issue 12501 menu item aria label ...
* Disable navigation block for text mode. * Add additional rule for disabling navigation blocks. * Disable click handler for required rules. * Adjusted click handler for for text mode. * Disabled keyboard shortcut in text mode. * Deleted obsolete onClick check.
* Disable navigation block for text mode. * Add additional rule for disabling navigation blocks. * Disable click handler for required rules. * Adjusted click handler for for text mode. * Disabled keyboard shortcut in text mode. * Deleted obsolete onClick check.
3 participants
Description
When switching to code/ text mode navigation block should be disabled.
This adjustment is related to this issue: #12157
Fixes partially: #12157
How has this been tested?
It has been smoke-tested.
Screenshots
Types of changes
I've added a check which verifies editor mode.
Checklist: