TokenInput field: try alternative approach to fix screen reader focus issue #44526
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
ciampo
changed the base branch from
trunk
to
refactor/form-token-field-a11y
ciampo
requested review from
alexstine,
torounit,
mirka,
aaronrobertshaw,
andrewserong and
chad1008
ciampo
added
[Type] Bug
ciampo
changed the base branch from
refactor/form-token-field-a11y
to
trunk
|
Size Change: +36 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
ciampo
force-pushed
the
try/token-input-a11y-suggestions
branch
from
c8ddc9f
to
29e46d4
Compare
ciampo
commented
Sep 28, 2022
ciampo
commented
Sep 28, 2022
Comment on lines
-250
to
-254
| aria-label={ | ||
| currentLabel | ||
| ? `${ currentLabel }, ${ label }` | ||
| : null | ||
| } |
There was a problem hiding this comment.
For now, I decided to delete those lines like in the original PR. See #44347 (comment) and #44347 (comment) for additional context and motivations for this change
(cc @tellthemachines )
|
(cc @costdev @joedolson @alexstine ) |
ciampo
force-pushed
the
try/token-input-a11y-suggestions
branch
from
b51589b
to
8cce30d
Compare
andrewserong
approved these changes
Sep 29, 2022
There was a problem hiding this comment.
Thanks for working on this one! Unfortunately my Windows test environment isn't working properly at the moment, so I haven't been able to reproduce the original issue to confirm the fix, but good that Alex has confirmed that that side of things is working correctly 👍
The code change looks good to me, and using state for keeping track of focus seems consistent with the ComboboxControl.
I smoke tested use of the ComboboxControl in the editor and it still appears to otherwise be working the same as on trunk for me. At first I though that I'd encountered a performance bug when hovering between items in the suggestions list with my mouse, but it turns out that's to do with a window.setTimeout in the SuggestionsList set to 100ms which creates a delay when rapidly hovering between items in the list. Separately to this PR, it might be worth exploring reducing that timeout interval down to something lower (or even use requestAnimationFrame if it isn't too expensive to do on every frame).
Here's a GIF of that UI performance issue:
This LGTM! ✨
|
Thank you both, @alexstine and @andrewserong ! I'll go ahead and merge this PR as soon as CI is ✅
Well spotted! I've opened #44573 to fix it More in general, select-like and combobox-like control components ( |
ciampo
added
the
Backport to WP 6.6 Beta/RC
4 tasks
michalczaplinski
pushed a commit
that referenced
this pull request
Oct 3, 2022
… issue (#44526) * Test commit, revert later. * Remove the aria-label from the ComboboxControl and let value take over. * Try suggested changes to TokenInput * CHANGELOG * Improve unit tests * Restore min users for combobox in post author field Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
michalczaplinski
removed
the
Backport to WP 6.6 Beta/RC
|
Cherry-picked for the 6.1 release in #44656 |
|
@michalczaplinski Thanks. This was an important one to get in. |
ockham
pushed a commit
that referenced
this pull request
Oct 4, 2022
… issue (#44526) * Test commit, revert later. * Remove the aria-label from the ComboboxControl and let value take over. * Try suggested changes to TokenInput * CHANGELOG * Improve unit tests * Restore min users for combobox in post author field Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Oct 4, 2022
Package updates for bug and regression fixes: * @wordpress/annotations: 2.17.3 * @wordpress/block-directory: 3.15.4 * @wordpress/block-editor: 10.0.4 * @wordpress/block-library: 7.14.4 * @wordpress/blocks: 11.16.4 * @wordpress/components: 21.0.4 * @wordpress/core-data: 5.0.4 * @wordpress/customize-widgets: 3.14.4 * @wordpress/data: 7.1.3 * @wordpress/data-controls: 2.17.3 * @wordpress/edit-post: 6.14.4 * @wordpress/edit-site: 4.14.5 * @wordpress/edit-widgets: 4.14.4 * @wordpress/editor: 12.16.4 * @wordpress/format-library: 3.15.4 * @wordpress/interface: 4.16.3 * @wordpress/keyboard-shortcuts: 3.15.3 * @wordpress/list-reusable-blocks: 3.15.4 * @wordpress/notices: 3.17.3 * @wordpress/nux: 5.15.4 * @wordpress/preferences: 2.9.4 * @wordpress/reusable-blocks: 3.15.4 * @wordpress/rich-text: 5.15.3 * @wordpress/server-side-render: 3.15.4 * @wordpress/style-engine: 1.0.3 * @wordpress/viewport: 4.15.3 * @wordpress/widgets: 2.15.4 References: * [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation * [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control * [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor * [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error * [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export * [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout * [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews * [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides * [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying * [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor * [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references * [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls * [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor * [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature * [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables * [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks * [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio * [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy * [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor * [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color * [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue * [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout * [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor Follow-up to [54257] and [54335]. Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Oct 4, 2022
Package updates for bug and regression fixes: * @wordpress/annotations: 2.17.3 * @wordpress/block-directory: 3.15.4 * @wordpress/block-editor: 10.0.4 * @wordpress/block-library: 7.14.4 * @wordpress/blocks: 11.16.4 * @wordpress/components: 21.0.4 * @wordpress/core-data: 5.0.4 * @wordpress/customize-widgets: 3.14.4 * @wordpress/data: 7.1.3 * @wordpress/data-controls: 2.17.3 * @wordpress/edit-post: 6.14.4 * @wordpress/edit-site: 4.14.5 * @wordpress/edit-widgets: 4.14.4 * @wordpress/editor: 12.16.4 * @wordpress/format-library: 3.15.4 * @wordpress/interface: 4.16.3 * @wordpress/keyboard-shortcuts: 3.15.3 * @wordpress/list-reusable-blocks: 3.15.4 * @wordpress/notices: 3.17.3 * @wordpress/nux: 5.15.4 * @wordpress/preferences: 2.9.4 * @wordpress/reusable-blocks: 3.15.4 * @wordpress/rich-text: 5.15.3 * @wordpress/server-side-render: 3.15.4 * @wordpress/style-engine: 1.0.3 * @wordpress/viewport: 4.15.3 * @wordpress/widgets: 2.15.4 References: * [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation * [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control * [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor * [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error * [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export * [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout * [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews * [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides * [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying * [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor * [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references * [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls * [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor * [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature * [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables * [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks * [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio * [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy * [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor * [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color * [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue * [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout * [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor Follow-up to [54257] and [54335]. Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya. See #56467. Built from https://develop.svn.wordpress.org/trunk@54383 git-svn-id: http://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Oct 4, 2022
Package updates for bug and regression fixes: * @wordpress/annotations: 2.17.3 * @wordpress/block-directory: 3.15.4 * @wordpress/block-editor: 10.0.4 * @wordpress/block-library: 7.14.4 * @wordpress/blocks: 11.16.4 * @wordpress/components: 21.0.4 * @wordpress/core-data: 5.0.4 * @wordpress/customize-widgets: 3.14.4 * @wordpress/data: 7.1.3 * @wordpress/data-controls: 2.17.3 * @wordpress/edit-post: 6.14.4 * @wordpress/edit-site: 4.14.5 * @wordpress/edit-widgets: 4.14.4 * @wordpress/editor: 12.16.4 * @wordpress/format-library: 3.15.4 * @wordpress/interface: 4.16.3 * @wordpress/keyboard-shortcuts: 3.15.3 * @wordpress/list-reusable-blocks: 3.15.4 * @wordpress/notices: 3.17.3 * @wordpress/nux: 5.15.4 * @wordpress/preferences: 2.9.4 * @wordpress/reusable-blocks: 3.15.4 * @wordpress/rich-text: 5.15.3 * @wordpress/server-side-render: 3.15.4 * @wordpress/style-engine: 1.0.3 * @wordpress/viewport: 4.15.3 * @wordpress/widgets: 2.15.4 References: * [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation * [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control * [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor * [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error * [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export * [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout * [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews * [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides * [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying * [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor * [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references * [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls * [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor * [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature * [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables * [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks * [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio * [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy * [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor * [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color * [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue * [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout * [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor Follow-up to [54257] and [54335]. Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya. See #56467. Built from https://develop.svn.wordpress.org/trunk@54383 git-svn-id: https://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
Package updates for bug and regression fixes: * @wordpress/annotations: 2.17.3 * @wordpress/block-directory: 3.15.4 * @wordpress/block-editor: 10.0.4 * @wordpress/block-library: 7.14.4 * @wordpress/blocks: 11.16.4 * @wordpress/components: 21.0.4 * @wordpress/core-data: 5.0.4 * @wordpress/customize-widgets: 3.14.4 * @wordpress/data: 7.1.3 * @wordpress/data-controls: 2.17.3 * @wordpress/edit-post: 6.14.4 * @wordpress/edit-site: 4.14.5 * @wordpress/edit-widgets: 4.14.4 * @wordpress/editor: 12.16.4 * @wordpress/format-library: 3.15.4 * @wordpress/interface: 4.16.3 * @wordpress/keyboard-shortcuts: 3.15.3 * @wordpress/list-reusable-blocks: 3.15.4 * @wordpress/notices: 3.17.3 * @wordpress/nux: 5.15.4 * @wordpress/preferences: 2.9.4 * @wordpress/reusable-blocks: 3.15.4 * @wordpress/rich-text: 5.15.3 * @wordpress/server-side-render: 3.15.4 * @wordpress/style-engine: 1.0.3 * @wordpress/viewport: 4.15.3 * @wordpress/widgets: 2.15.4 References: * [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation * [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control * [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor * [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error * [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export * [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout * [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews * [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides * [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying * [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor * [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references * [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls * [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor * [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature * [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables * [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks * [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio * [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy * [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor * [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color * [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue * [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout * [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor Follow-up to [54257] and [54335]. Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
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.
What?
This PR tries an alternative approach to the changes suggested in #44347 — see #44347 (comment) for more context
Why?
This is an attempt to fix #42285
How?
The idea behind the fix is to only add the
aria-activedescendantattribute when needed — i.e. when the input has focus and there is a valid suggestion being rendered and selected.Testing Instructions
TokenInput(likeComboboxControlandFormTokenField) work as expected