Skip to content

Fix Image block lightbox missing alt attribute and improve accessibility #55010

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

Merged
afercia merged 15 commits into from
Oct 6, 2023
Merged

Fix Image block lightbox missing alt attribute and improve accessibility #55010

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6f19386
Move lightbox open button after the image.
afercia Oct 2, 2023
649b4a0
Fix getting the lightbox image alt attribute.
afercia Oct 2, 2023
c9bedb0
Improve docblocks.
afercia Oct 3, 2023
b8fa8f2
Do not render empty role attribute.
afercia Oct 3, 2023
eadf211
Remove unnecessary aria-hidden attribute.
afercia Oct 3, 2023
1e6ea11
Set aria-modal attribute dynamically.
afercia Oct 3, 2023
d568e5a
More meaningful and simpler modal dialog aria-label.
afercia Oct 3, 2023
6a8801f
Increase Close button target size.
afercia Oct 3, 2023
cbbfabd
Add enlarged image base64 encoded placeholder.
afercia Oct 4, 2023
b2b56cb
Better check for alt attribute as a string.
afercia Oct 4, 2023
7f9996b
Update changelog.
afercia Oct 4, 2023
b887286
Move changelog entry to the block library changelog.
afercia Oct 5, 2023
43e6be8
Set lightbox dialog aria-label dynamically.
afercia Oct 5, 2023
cea0f32
Hide background scrim container from assistive technology.
afercia Oct 5, 2023
ae939eb
Remove obsolete code
artemiomorales Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Set aria-modal attribute dynamically.
  • Loading branch information
@afercia
afercia committed Oct 5, 2023
commit 1e6ea11755da8faa92cb3620cfca53d261b708e5
3 changes: 1 addition & 2 deletions packages/block-library/src/image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
aria-modal="false"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/image/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,11 @@ store(
? 'dialog'
: null;
},
ariaModal: ( { context } ) => {
return context.core.image.lightboxEnabled
? 'true'
: null;
},
lightboxObjectFit: ( { context } ) => {
if ( context.core.image.initialized ) {
return 'cover';
Expand Down