You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or 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
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
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.
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__next40pxDefaultSizevariant="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:
@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 🙏
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?
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?
VStack
element containing "n more replies" text with aButton
componentaria-expanded="false"
, descriptivearia-label
)variant="link"
styling to maintain visual consistency while making it clearly interactivesetFocusThread()
functionality that was previously only available through clicking elsewhere on the comment threadTesting Instructions
Testing Instructions for Keyboard
Tab
key to navigate through the comment sidebarEnter
orSpace
while the button is focusedScreenshots or screencast
Before
Before.mov
After
After.mov