Fix the image link button pressed state. #56123
Merged
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
afercia
added
[Focus] Accessibility (a11y)
|
Size Change: -10 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
afercia
force-pushed
the
fix/image-link-button
branch
from
0cfabb6 to
621a99b
Compare
|
@alexstine thanks for the review. I'd still like to have a review about the I see occurrences of a |
afercia
added
[Type] Bug
|
Works well. In trunk a linked image has no visual change to the link button:
In this PR, the link button appears toggled:
These days I'm unable to respond with haste to pings, so it might be useful to ping the broader |
tyxla
approved these changes
Nov 16, 2023
|
Thanks everyone for your feedback and reviews. |
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.
Fixes #56078
What?
In the Image block and in the Media & Text block, when the image is linked, the Libk bugton in the block toolbar doesn't have a pressed state. As such, there's no visual / semantic / accessible information the image is actually linked.
Why?
How?
isActiveprop to the relatedToolbarButton.More details on the CSS rule:
I have the impression the whole content of the toolbar-button stylesheet is a remnant of some previous implementation and it's no lonver in use in the editor. See
gutenberg/packages/components/src/toolbar/toolbar-button/style.scss
Lines 1 to 28 in 5bcb309
All of the rules there are scoped to some kind of
data-subscriptattribute that I think is not used any longer. To my understanding it was meant to display some subscript CSS generated text within the buttons, for headings or maybe the quote block.Only the following rule wasn't scoped to a
subscriptthing:This rule hid the pseudo element while the button is being clicked. This is wrong for two reasons, see comments on the here #56078 (comment).
is-pressedbackground styling to work while the button is being clicked.@jasmussen @richtabor when you have a chance, I'd kindly ask you to have a look at the content of this stylesheet. There's a chance it can be removed entirely.
Testing Instructions
is-pressedCSS class.aria-pressed="true"attribute.Additionally:
Testing Instructions for Keyboard
Screenshots or screencast