Skip to content

Block Comments: Make "n more replies" text clickable for accessibility #71387

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.

Sign up for GitHub

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

Jump to bottom
Merged
t-hamano merged 2 commits into from
Sep 16, 2025
Merged

Block Comments: Make "n more replies" text clickable for accessibility #71387

t-hamano merged 2 commits into from
Sep 16, 2025

Conversation

@R1shabh-Gupta
Copy link
Contributor

@R1shabh-Gupta R1shabh-Gupta commented Aug 28, 2025 •
edited
Loading

What?

See #71249

Converts the static "n more replies" text in block comments to a clickable, keyboard-accessible button that expands hidden comment replies.

Why?

The block comments feature currently displays "X more replies" as static text when there are many replies to a comment. Users found it unintuitive that they needed to click elsewhere on the comment thread (or use the "Select an action" menu) to expand and view these hidden replies. This creates accessibility barriers for keyboard and screen reader users who cannot easily discover how to access the additional replies.

How?

  • Replaces the static VStack element containing "n more replies" text with a Button component
  • Adds proper accessibility attributes (aria-expanded="false", descriptive aria-label)
  • Uses variant="link" styling to maintain visual consistency while making it clearly interactive
  • Implements the same setFocusThread() functionality that was previously only available through clicking elsewhere on the comment thread

Testing Instructions

  1. Open the post editor with a draft post
  2. Add several blocks (paragraphs, headings, etc.)
  3. Add a block comment to one of the blocks using the comment button in the block toolbar
  4. Add multiple replies to that comment (3-4 replies work well for testing)
  5. Verify that "X more replies" text appears as a clickable button when the comment thread is collapsed
  6. Click the "X more replies" button and verify it expands to show all replies

Testing Instructions for Keyboard

  1. Follow steps 1-4 above to create a comment thread with multiple replies
  2. Use Tab key to navigate through the comment sidebar
  3. Verify the "X more replies" button receives keyboard focus (visual focus indicator should appear)
  4. Press Enter or Space while the button is focused
  5. Verify the button expands the replies and shows all hidden comments
  6. Test with screen reader (if available) to ensure proper announcement of button purpose and state

Screenshots or screencast

Before

Before.mov

After

After.mov

@R1shabh-Gupta R1shabh-Gupta marked this pull request as ready for review August 28, 2025 16:33
@github-actions
Copy link

github-actions bot commented Aug 28, 2025 •
edited
Loading

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: R1shabh-Gupta <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jeffpaul <[email protected]>

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

@t-hamano t-hamano added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. Collaborative Workflows Phase 3 of the Gutenberg roadmap around all-things related to collaborative workflows labels Aug 29, 2025
@t-hamano t-hamano mentioned this pull request Sep 1, 2025
Closed
@jeffpaul jeffpaul linked an issue Sep 16, 2025 that may be closed by this pull request
Block Comments Accessibility: make the "n more replies" text clickable #71680
Closed
6 tasks
t-hamano
t-hamano reviewed Sep 16, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the late review!

Almost looks good, but I believe we can simplify the Button:

  • No need to add aria-label because the button has visible text.
  • Since this button disappears when clicked, I don't think aria-expanded=true is necessary.

Taking this into consideration, it should be possible to simplify it as shown below:

<Button
	__next40pxDefaultSize
	variant="link"
	className="editor-collab-sidebar-panel__show-more-reply"
	onClick={ () => setFocusThread( thread.id ) }
>
	{ sprintf(
		// translators: %s: number of replies.
		_x( '%s more replies', 'Show replies button' ),
		thread?.reply?.length
	) }
</Button>

Furthermore, this padding should no longer be necessary:

gutenberg/packages/editor/src/components/collab-sidebar/style.scss

Line 121 in aa3b961

padding: 0;

@WordPress/gutenberg-design, Note that this PR changes the appearance of the "n more replies" text. Any feedback is welcome.

Before After
Image Image

t-hamano
t-hamano approved these changes Sep 16, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! If there is any design feedback, let's address it as a follow-up.

@t-hamano t-hamano added the [Type] Bug An existing feature does not function as intended label Sep 16, 2025
@t-hamano t-hamano merged commit 0646cd0 into WordPress:trunk Sep 16, 2025
71 of 72 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.7 milestone Sep 16, 2025
@t-hamano t-hamano mentioned this pull request Sep 16, 2025
Merged
@jasmussen
Copy link
Contributor

jasmussen commented Sep 18, 2025

Looks good. I believe the latest design for that particular type of link is actually this:

image

Which isn't a blocker at all, we can certainly come back to this, even revisit it. Thanks for keeping on this!

@t-hamano
Copy link
Contributor

t-hamano commented Sep 18, 2025

@jasmussen Thanks for the feedback! Let's apply that design as a follow-up PR.

P.S. We're currently working hard to get the Block Commenting ready for shipping in 6.9. If you discover any issues from the design perspective, please let us know, and we'll address them 🙏

@jeffpaul jeffpaul mentioned this pull request Sep 19, 2025
Closed
@jeffpaul
Copy link
Member

jeffpaul commented Sep 19, 2025

FYI that I created #71774 to follow-up on that design update, thanks for flagging @jasmussen!

@t-hamano t-hamano added [Feature] Notes Phase 3 of the Gutenberg roadmap around block commenting and removed Collaborative Workflows Phase 3 of the Gutenberg roadmap around all-things related to collaborative workflows labels Oct 4, 2025
@maxschmeling maxschmeling mentioned this pull request Oct 7, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano approved these changes

Assignees

No one assigned

Labels

[Feature] Notes Phase 3 of the Gutenberg roadmap around block commenting [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 21.7

Development

Successfully merging this pull request may close these issues.

Block Comments Accessibility: make the "n more replies" text clickable

4 participants

@R1shabh-Gupta @jasmussen @t-hamano @jeffpaul