Size Change: +280 B (+0.01%)

Total Size: 1.95 MB

_{compressed-size-action}

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Flaky tests detected in d200041.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18099522446
📝 Reported issues:

• [Flaky Test] ensures List View global shortcut works properly #51533 in /test/e2e/specs/editor/various/list-view.spec.js
• [Flaky Test] should allow user to add and remove multiple local font files #62862 in /test/e2e/specs/site-editor/font-library.spec.js
• [Flaky Test] should select the wrapper div for a group #71211 in /test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js

An aria-label like "[first 5 words of first visible comment]" would help

This is actually quite a difficult problem from a localization perspective. Gutenberg doesn't have a JS function equivalent to wp_trim_words() PHP function. We'll need to create our own function to get the exact excerpt based on the word count type from the string.

For now, I've set the full text of the first comment as the aria-label.

I tried a different aria-label. When a thread is focused, a screen reader should announce the following text.

Comment {commentId} by {userName}. {numberOfReply} replies.  collapsed  1 of {threadCount}  level 1

I think this is consistent with #71843.

My reason for including the comment text was related to WCAG 2.5.3: Label in Name, which stipulates that the visible text on a control is in the accessible name for that control. This is enable to support speech activation, and allow users to activate a control using the text they can see, rather than needing to position a cursor using speech or use grid selection controls.

It's not 100% clear whether 2.5.3 applies in this case; it's applicable to user interface components, and the WCAG definition of a user interface control is "a part of the content that is perceived by users as a single control for a distinct function". I'm not sure that a user would perceive this panel that way.

The question here becomes "how would a speech activation user activate this panel." Practically speaking, I'm not sure voice activation would perceive this panel as something that's command clickable - I couldn't get it do it, using the aria-label in this PR, so I suspect that ultimately won't matter here. I was able to do it pretty easily using the mouse grid, however. That's not efficient, but works.

I do think that it should be possible to activate the panel using voice control without using the mouse grid, however. The logical thing to me is that if a user uses the 'Actions' panel to Edit a comment, that should activate the panel.

I tested this on a Mac using VoiceOver and navigating around the comments by keyboard. Everything worked much better with this PR vs trunk, nice work!

Ok, so I applied the comment excerpt to aria-label in 6b99421.

I had to create our own utility function, but it should work properly in locales other than English.

For example, if the comment is I think this approach could be improved by adding more examples and providing clearer explanations., a screen reader reads it as follows:

I think this approach could be improved by adding more…  expanded  2 of 2  level 1

Is there any other information that should be provided?

@t-hamano It might be good to include the object name in the aria-label. While I like the excerpt as a way to understand what you're navigating in a very human way, I think having some context about what you're navigating would be useful, e.g. "Comment: I think this approach could be improved by adding more… expanded 2 of 2 level 1"

e.g. "Comment: I think this approach could be improved by adding more… expanded 2 of 2 level 1"

Updated in 550e582

Are there any other blockers here? It would be nice to land this refactoring so that we can improve isSelected/isExpanded state logic for comments.

We can improve aria-label in a follow-up if it's necessary. If it's LGTM from a code perspective, I'm happy to merge this PR.

@t-hamano, should we create an issue for e2e test coverage of this feature?

Here it is: #71962