-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Math block: fix accessibility #73508
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
Conversation
|
Size Change: +39 B (0%) Total Size: 2.54 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
mcsf
left a comment
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.
LGTM, this is needed.
Two questions:
- Is the a11y speaker too noisy? It will speak syntax errors as the user is typing, even if they are typing correctly, because in order to input
x^2you have to first inputx^, yielding a syntax error. For the visual validator, that's fine, but maybe not forspeak. - For the format, I kind of expected the popover to receive focus once the format is enabled. Just like for Footnotes: I place the caret (or select a range), then add the format, and now my focus and caret are inside the new footnote. Wouldn't it be acceptable, from an a11y perspective?
|
Yes, speaking immediately on an error is going to be too verbose. In cases like this (where updates occur with a lot of frequency), I would only emit spoken notices periodically. Users need to be informed of these errors, but it is excessive if they're being informed on every keypress. There are a lot of ways to do this; setting a timer to check every few seconds, only announcing on change of focus, etc. I'm not sure that speaking every error is the best strategy; if the error container was explicitly connected to the textarea via That said, this does work, and in testing I didn't find it to be a problem - the verbosity didn't get in my way. I think for the purpose of release, this passes our needs, and we can listen for user feedback and adjust if it's too verbose in real life usage. When a user navigates out of the math block when the popover is open using arrow keys, the popover does not close. I think it would make sense for the popover to close when a user leaves the block via keyboard, same as if they change via mouse click. Currently, it only changes once the user selects a block. |
|
Re: @mcsf's comment about moving focus immediately. I do think that when a user adds a math block, it's confusing to then have to tab to get into the editor. You expect to be able to type content immediately, as in most other blocks. But in most blocks, you do the editing directly in the block, rather than in a popover, so the need to reverse tab to get back to the block may also be confusing. Having needed to tab in the first place may help communicate where you are in the content, for keyboard users. This could be made less of an issue with an explicit close button on the editor. |
|
Ok let's leave the speaking as-is and see. We can debounce if necessary later. We can focus the popover on insert, but it should be consistent between the block and format. A good example of another block that opens a popover on insert is the Page Link block, which focusses immediately, but it also works a bit differently. It's a constraint tabbing popover. The block also is removed when you press Esc or click outside it.
I'm a bit confused here. When I exit the popover by shift+tab to move focus to the block, then use arrow keys, other blocks are selected and the popover disappears? What are the steps to reproduce? |
|
Huh. When I went to re-test, I couldn't reproduce the experience I had the first time. I'm not sure what might have been different, so I think we'll have to assume that it was an exception or an edge case, and see if it comes up again. |
|
Ok, in that case, I'll merge :) |
Co-authored-by: ellatrix <[email protected]> Co-authored-by: mcsf <[email protected]> Co-authored-by: joedolson <[email protected]>
|
I just cherry-picked this PR to the wp/6.9 branch to get it included in the next release: f34ada7 |
Changes can be found at https://github.com/WordPress/gutenberg/commits/wp/6.9/. * [Fix isNewLink value with entity binding (#73368)](WordPress/gutenberg#73368) * [Unit testing: Allow Composer to auto-detect PHP version (#73358)](WordPress/gutenberg#73358) * [Move the Edit Navigation button to the last item in the block toolbar to ensure that the styling is consistent and simple (#73436)](WordPress/gutenberg#73436) * [Block Support: Change block visibility support key (#73432)](WordPress/gutenberg#73432) * [Accordion: add box-sizing:border-box rule (#73507)](WordPress/gutenberg#73507) * [Accordion Block: Trigger panel opening from URL hash or anchor link (#73357)](WordPress/gutenberg#73357) * [iAPI: Backport of "Return a deep-clone object from `getServerState` and `getServerContext` functions" (#73514)](WordPress/gutenberg#73514) * [Reuse wp_script_attributes filter for adding data-wp-router-options attribute to script module (#72489) (#73512)](WordPress/gutenberg#73512) * [Accordion Item: Don't use grid layout (#73501)](WordPress/gutenberg#73501) * [Drag and drop: remove grab cursor for multi-selection (#73521)](WordPress/gutenberg#73521) * [Math block: fix accessibility (#73508)](WordPress/gutenberg#73508) * [iAPI: Fix using `getServerContext` in derived state getters (#73518) (#73531)](WordPress/gutenberg#73531) * [Drag: hide block tools popovers (#73539)](WordPress/gutenberg#73539) Developed in #10549. See https://make.wordpress.org/core/handbook/about/release-cycle/block-editor-release-process-for-major-releases/#package-updates-and-core-patches. Props priethor. See #64301. git-svn-id: https://develop.svn.wordpress.org/branches/6.9@61304 602fd350-edb4-49c9-b593-d223f7449a82
Changes can be found at https://github.com/WordPress/gutenberg/commits/wp/6.9/. * [Fix isNewLink value with entity binding (#73368)](WordPress/gutenberg#73368) * [Unit testing: Allow Composer to auto-detect PHP version (#73358)](WordPress/gutenberg#73358) * [Move the Edit Navigation button to the last item in the block toolbar to ensure that the styling is consistent and simple (#73436)](WordPress/gutenberg#73436) * [Block Support: Change block visibility support key (#73432)](WordPress/gutenberg#73432) * [Accordion: add box-sizing:border-box rule (#73507)](WordPress/gutenberg#73507) * [Accordion Block: Trigger panel opening from URL hash or anchor link (#73357)](WordPress/gutenberg#73357) * [iAPI: Backport of "Return a deep-clone object from `getServerState` and `getServerContext` functions" (#73514)](WordPress/gutenberg#73514) * [Reuse wp_script_attributes filter for adding data-wp-router-options attribute to script module (#72489) (#73512)](WordPress/gutenberg#73512) * [Accordion Item: Don't use grid layout (#73501)](WordPress/gutenberg#73501) * [Drag and drop: remove grab cursor for multi-selection (#73521)](WordPress/gutenberg#73521) * [Math block: fix accessibility (#73508)](WordPress/gutenberg#73508) * [iAPI: Fix using `getServerContext` in derived state getters (#73518) (#73531)](WordPress/gutenberg#73531) * [Drag: hide block tools popovers (#73539)](WordPress/gutenberg#73539) Developed in WordPress/wordpress-develop#10549. See https://make.wordpress.org/core/handbook/about/release-cycle/block-editor-release-process-for-major-releases/#package-updates-and-core-patches. Props priethor. See #64301. Built from https://develop.svn.wordpress.org/branches/6.9@61304 git-svn-id: http://core.svn.wordpress.org/branches/6.9@60616 1a063a9b-81f0-0310-95a4-ce76da25c4cd
What?
Fixes #73447.
Fixes #73446.
Fixes #73445.
Makes the popover for the block accessible.
The popover for the format was working correctly, but the popover for the block was not.
Why?
How?
Adds the same popover props as the format.
Calls
speakwhen there's a LaTeX error.Testing Instructions
Pressing tab from the math block should move focus to the text area, then the inspector. Shift tab should move it back to the text area, then the block.
Testing Instructions for Keyboard
Screenshots or screencast