Image: Reimplement lightbox trigger as a minimal button in corner of image #55212
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
|
Size Change: +5.67 kB (0%) Total Size: 1.66 MB
ℹ️ View Unchanged
|
2 tasks
artemiomorales
added
[Type] Bug
|
I'm noting here that if we proceed with this, as part of it, we'll also be able to add an additional style declaration that would resolve the bug wherein theme styles conflict with the lightbox button in #54682 |
|
I think that showing a button on hover only is a decent compromise, nice work @artemiomorales 👍 I see 2 issues here though:
|
|
@michalczaplinski Great, thanks! I've just pushed a commit covering edge cases when using |
@richtabor Thanks for taking a look! I just cut it to 10 pixels. |
|
@artemiomorales, I wanted to check whether you're still aiming to get this into today's RC1? As a reminder, the commit freeze is at 15.00 UTC today, so this would ideally need to be merged a couple of hours before that to give us time to organise the sync and commit. |
@SiobhyB Yes, that's the hope! Although it needs a review and approval from someone else at this point. I've pinged a couple of folks so we'll see if they can take a look. |
Comment on lines
+285
to
+292
| // We want to avoid drawing unnecessary attention to the close | ||
| // button for mouse and touch users. Note that even if opening | ||
| // the lightbox via keyboard, the event fired is of type | ||
| // `pointerEvent`, so we need to rely on the `event.pointerType` | ||
| // property, which returns an empty string for keyboard events. | ||
| if ( context.core.image.pointerType === '' ) { | ||
| ref.querySelector( '.close-button' ).focus(); | ||
| } |
There was a problem hiding this comment.
Why don't we want to focus the close button when opening the button by clicking the image? Right now, it keeps the active element outside of the modal, which I believe is not correct, right?
There was a problem hiding this comment.
That was a point brought up some folks from design a while back — they did not want a close button at all because they felt it would distract and be unnecessary.
I figured adding this so the focus ring doesn't become visible and draw attention to the close button would be a good move. Personally I would prefer to not have my attention immediately drawn to a close button when trying to get a better view of an image.
There was a problem hiding this comment.
There are potential accessibility issues here, though. The context would indeed be incorrect for folks who activate the lightbox using a mouse while also using a screen reader.
Is this a use case we should handle? I'm currently searching Google for guidance around this, and will also ping @afercia @joedolson @alexstine for feedback.
There was a problem hiding this comment.
The problem is that with that approach we are losing the focus and it is causing some issues. When opening an image by clicking on it:
- I can't close it with the ESC key.
- I can't close it navigating with the keyboard because I can't focus on the close button.
aristath
approved these changes
Oct 17, 2023
There was a problem hiding this comment.
Let me prefix this by saying I understand this is not yet perfect... I can see a couple of edge-cases above that would warrant some more polishing.
However, as a whole, this implementation is a lot better than the one we currently have.
With that in mind, and understanding that we're on the clock for RC1, I'll go ahead and pre-approve this PR. This will give us the confidence that we have something better than what was previously there, while giving us another week to polish the styles based on feedback we receive from RC1 testers 👍
The code looks good, and this is definitely a welcomed improvement
Comment on lines
+156
to
+164
| // We want to avoid drawing attention to the button | ||
| // after the lightbox closes for mouse and touch users. | ||
| // Note that the `event.pointerType` property returns | ||
| // as an empty string if a keyboard fired the event. | ||
| if ( event.pointerType === '' ) { | ||
| context.core.image.lastFocusedElement.focus( { | ||
| preventScroll: true, | ||
| } ); | ||
| } |
There was a problem hiding this comment.
Same as with the close button: if we navigate to a lightbox with the keyboard, but I close it using a click, I lose the focus, which I assume is not correct, right?
SantosGuillamot
approved these changes
Oct 17, 2023
There was a problem hiding this comment.
I've looked at it, and, apart from a couple of comments I left, I believe the PR does what is indicated in the description. The only issue I can see is the one described here, but I believe we can keep it as a limitation for this RC and analyze it later.
Apart from that, I am a bit afraid of making big changes like these ones in a RC, but I'll let you decide on that.
@richtabor As we were pushing the RC1 deadline, I'll change this in a follow up PR. |
SiobhyB
pushed a commit
that referenced
this pull request
Oct 17, 2023
…image (#55212) * Reimplement lightbox trigger as a minimal button in corner of image * Remove obsolete directives * Update directives to fire logic properly via image or button click * Ensure lightbox button only appears when hovering over image, not whole figure * Ensure close button does not receive focus when opening lightbox via mouse * Ensure button only receives focus when lightbox is closed via keyboard * Add comments * Prevent unnecessary focus being shown on mobile * Add dynamic positioning for button when image uses 'contain' setting * WORK IN PROGRESS - Begin accounting for various edge cases We need to account for the fact that an image can have custom dimensions, aspect ratio, cover or contain, captions, thumbnail dimensions, and potentially other scenarios. This commit begins to address those issues but notably fails in cases where one uses a horizontal image, at full scale, with custom aspect ratio, using 'contain'. It seems to work in all other cases that I've checked but needs more thorough testing and the code can probably be cleaner, and may contain some unnecessary items. * Simplify and improve button placement logic * Simplify logic to show button on hover * Fix styles * Simplify calls to showLightbox * Fix style inconsistency between browsers * Change button position slightly * Reduce button offset * Add style override for better consistency across themes * Fix logic so lightbox animates as intended; remove extraneous code * Update comment
|
I've gone ahead to cherry-pick this to the release branch in 7bce633, so it'll be included in the RC. :) |
|
I see this has been merged while I was reviewing it. No wirries, it can happen. My lunch break took more than expected I guess :) However, there are issues that need to be fixed, not only accessibility but also the fact that:
|
SiobhyB
removed
the
Backport to WP 6.7 Beta/RC
|
So this will need a follow up for the next RC.
Depending on the flow used to open the dialog and on the browser in use, this is what I observed when testing:
|
SiobhyB
pushed a commit
that referenced
this pull request
Oct 17, 2023
* Unconditionally load the Gutenberg copy of the HTML Tag Processor (#55404) Temporary fix to resolve breaking tests in `trunk` after the WordPress 6.4 backport. * Revert "Unconditionally load the Gutenberg copy of the HTML Tag Processor (#55404)" This reverts commit 271587a. * Image: Reimplement lightbox trigger as a minimal button in corner of image (#55212) * Reimplement lightbox trigger as a minimal button in corner of image * Remove obsolete directives * Update directives to fire logic properly via image or button click * Ensure lightbox button only appears when hovering over image, not whole figure * Ensure close button does not receive focus when opening lightbox via mouse * Ensure button only receives focus when lightbox is closed via keyboard * Add comments * Prevent unnecessary focus being shown on mobile * Add dynamic positioning for button when image uses 'contain' setting * WORK IN PROGRESS - Begin accounting for various edge cases We need to account for the fact that an image can have custom dimensions, aspect ratio, cover or contain, captions, thumbnail dimensions, and potentially other scenarios. This commit begins to address those issues but notably fails in cases where one uses a horizontal image, at full scale, with custom aspect ratio, using 'contain'. It seems to work in all other cases that I've checked but needs more thorough testing and the code can probably be cleaner, and may contain some unnecessary items. * Simplify and improve button placement logic * Simplify logic to show button on hover * Fix styles * Simplify calls to showLightbox * Fix style inconsistency between browsers * Change button position slightly * Reduce button offset * Add style override for better consistency across themes * Fix logic so lightbox animates as intended; remove extraneous code * Update comment * [Edit Widgets] Only suppress admin notices when JS enabled. (#55403) Only suppresses the display of notices on the widget block editor screen if JavaScript is available. --------- Co-authored-by: Dennis Snell <[email protected]> Co-authored-by: Artemio Morales <[email protected]> Co-authored-by: Peter Wilson <[email protected]>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Oct 17, 2023
Updates for needed bugfixes in RC1: * [WordPress/gutenberg#55212 Image: Reimplement lightbox trigger as a minimal button in corner of image] * [WordPress/gutenberg#55403 [Edit Widgets] Only suppress admin notices when JS enabled.] Follow-up to [56849], [56818], [56816]. Props artemiosans, jameskoster, SantosGuillamot, aristath, czapla, joen, afercia, richtabor, peterwilsoncc, andraganescu, hellofromTonya, siobhyb. See #59411. git-svn-id: https://develop.svn.wordpress.org/trunk@56961 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Oct 17, 2023
Updates for needed bugfixes in RC1: * [WordPress/gutenberg#55212 Image: Reimplement lightbox trigger as a minimal button in corner of image] * [WordPress/gutenberg#55403 [Edit Widgets] Only suppress admin notices when JS enabled.] Follow-up to [56849], [56818], [56816]. Props artemiosans, jameskoster, SantosGuillamot, aristath, czapla, joen, afercia, richtabor, peterwilsoncc, andraganescu, hellofromTonya, siobhyb. See #59411. Built from https://develop.svn.wordpress.org/trunk@56961 git-svn-id: http://core.svn.wordpress.org/trunk@56472 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Oct 17, 2023
Updates for needed bugfixes in RC1: * [WordPress/gutenberg#55212 Image: Reimplement lightbox trigger as a minimal button in corner of image] * [WordPress/gutenberg#55403 [Edit Widgets] Only suppress admin notices when JS enabled.] Follow-up to [56849], [56818], [56816]. Props artemiosans, jameskoster, SantosGuillamot, aristath, czapla, joen, afercia, richtabor, peterwilsoncc, andraganescu, hellofromTonya, siobhyb. See #59411. Built from https://develop.svn.wordpress.org/trunk@56961 git-svn-id: https://core.svn.wordpress.org/trunk@56472 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This was referenced Oct 17, 2023
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?
This PR changes the lightbox trigger so that it exists in the top right corner of the image rather than overlaying it.
Why?
Addresses #55097
Having the lightbox overlay the entire image interrupts key browser functionality and is prone to failing with certain themes and layouts.
How?
The PR changes the styles of the button and removes the JavaScript handling that was calculating the button position dynamically.
Testing Instructions
Additionally:
titleto the image. Hover over the image and ensure thetitleappears in a tooltip.Testing Instructions for Keyboard
EnterorSpacebarto ensure the lightbox opens as expected.Screenshot