Move focus to the dialog when opening the lightbox.

WordPress · Oct 19, 2023 · ab653a4 · ab653a4
1 parent 40b7b57
commit ab653a4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -324,6 +324,7 @@ class="lightbox-trigger"
             data-wp-on--touchmove="actions.core.image.handleTouchMove"
             data-wp-on--touchend="actions.core.image.handleTouchEnd"
             data-wp-on--click="actions.core.image.hideLightbox"
+            tabindex="-1"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
                     $close_button_icon

diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
@@ -282,7 +282,8 @@ store(
 									focusableElements.length - 1
 								];
 
-							ref.querySelector( '.close-button' ).focus();
+							// Move focus to the dialog when opening it.
+							ref.focus();
 						}
 					},
 					setButtonStyles: ( { context, ref } ) => {