Autocomplete: Announce results to screen readers when first becoming visible #51018
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
…rs when suggestions become visible.
alexstine
added
[Type] Enhancement
|
Size Change: +70 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in b501426. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5106252126
|
|
This looks technically fine, although I don't hear any significant difference between how this works now and how it worked before. However, I don't think this does anything to solve the problem cited in #5592. The change needed there is to
|
|
@joedolson This field has a label already? Type slash to insert a block or start typing to create a paragraph block. |
|
Due to the way this component is designed, trying to figure out these state announcements will not be easy. The change in place now will at least tell users how many blocks are in view after typing "/". I think it is a small improvement at least. |
|
This is about the state when you first type the slash. The results brought up are not search results, and there's no information about what they are or what to do if the block you want isn't in that collection. Seems like you'd know it was initial state just be catching the keycode of the slash character. Is there a reason that wouldn't work? |
|
It's mostly based on the rules that components package must be generic. I will try to find a way to communicate initial results as all we're given is a large object. Then the object gets filtered based on search queries. I know we're given initial results, I just need to figure out how to split that into something I can build conditionals around. |
|
@joedolson Does this latest commit get us closer? Now I am explaining to users that these are initial results that can be filtered. |
|
Definitely moving in the right direction. My only quibble here is that the text implies that you're filtering the initial set (e.g, you've been given a set that contains all results, and you're filtering those results), but you've actually only been given a subset. Filtering allows you to filter the set of all blocks, not just the initial set. That might be a subtlety that isn't really crucial, however. It's definitely better than it was before! |
|
@joedolson I tried again. Maybe now it is clear? |
chad1008
reviewed
Jun 1, 2023
There was a problem hiding this comment.
This looks good and works well for me, I can see how it's an improvement. One small nit that we may not want/be able to address now is that the "n initial results" phrasing in place with this change implies that the initial list is always a subset of the whole list, which it may not be. For example, on a small site with only three users, typing @ will pull up all three users, but the screen reader will refer to them as 'three initial results', and instruct the user to type to filter all results... implying there are more results to find when there actually aren't.
I recognize this is kind of the opposite concern from what @joedolson raised, and we may need to prioritize one over the other, in which case I think the current approach of always guiding the user towards typing to filter makes the most sense 👍
|
No, that's totally in agreement with my comments, if I understand you correctly. The initial state shouldn't use the word "results", because it's not the result of a query. |
|
I was actually keying in more on the word "initial", because with a small dataset, the items displayed aren't "initial" (which implies there are more that aren't currently shown). If a given completer returns a short enough list (like the three-user site example above) the completer will open with the full list. I don't think it's a huge problem, and the cases where it actually causes any confusion will be few and far between. |
|
I'd argue that they're still initial, in that they are not changed by user input. You can still filter to fewer than the initial results, even if there are no additional results to be found. |
joedolson
approved these changes
Jun 21, 2023
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…visible (WordPress#51018) * Autocomplete: Announce how many results are available to screen readers when suggestions become visible. * Fix E2E. Changelog entry. * Fix E2E. * Update changelog. * Fix E2E. * Try to clear up initial state. * Adjust speak message. --------- Co-authored-by: tellthemachines <isabel@tellthemachines.com>
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?
Changes the
speak()function to fire when autocomplete items change. This allows screen reader users to know how many results exist initially before filtering.Why?
Fixes #5592
How?
Modify the code and add an E2E test.
Testing Instructions
aria-live="assertive"region at the bottom of the page announces the initial 9 results. This uses debounce, wait a few seconds.Testing Instructions for Keyboard
Same.
Screenshots or screencast