Skip to content

Do not move focus when navigating the media library attachments dialog. #13816

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

Open
afercia wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Do not move focus when navigating the media library attachments dialog. #13816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
02a1ef1
Do not move focus when navigating the media library attachments dialog.
afercia Sep 29, 2026
66b84a5
Adjust focus style for media attachment nav buttons.
afercia Sep 30, 2026
066b4c0
Improve focus mangement and announcements for screen readers in the t…
afercia Sep 30, 2026
9653e0e
Make sure the ARIA live regions are not hidden.
afercia Sep 30, 2026
18473ab
Make the theme installer a dialog and set initial focus on it.
afercia Sep 30, 2026
434448e
Fix returning focus back to the opener theme in the theme installer.
afercia Sep 30, 2026
df4d86c
Use aria-disabled for the customizer theme browser nav buttons.
afercia Sep 30, 2026
6c2e909
Standardize controls labeling.
afercia Sep 30, 2026
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
8 changes: 6 additions & 2 deletions src/js/_enqueues/wp/customize/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2597,10 +2597,14 @@
*/
updateLimits: function () {
if ( ! this.getNextTheme() ) {
this.overlay.find( '.right' ).addClass( 'disabled' );
this.overlay.find( '.right' )
.addClass( 'disabled' )
.attr( 'aria-disabled', true );
}
if ( ! this.getPreviousTheme() ) {
this.overlay.find( '.left' ).addClass( 'disabled' );
this.overlay.find( '.left' )
.addClass( 'disabled' )
.attr( 'aria-disabled', true );
}
},

Expand Down
46 changes: 28 additions & 18 deletions src/js/_enqueues/wp/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ themes.view.Theme = wp.Backbone.View.extend({
return;
}

// Set focused theme to current element.
// Store the theme that had focus when expand is called.
themes.focusedTheme = this.$el;

this.trigger( 'theme:expand', self.model.cid );
Expand Down Expand Up @@ -520,7 +520,7 @@ themes.view.Theme = wp.Backbone.View.extend({

event = event || window.event;

// Set focus to current theme.
// Store the theme that had focus when preview is called.
themes.focusedTheme = this.$el;

// Construct a new Preview view.
Expand Down Expand Up @@ -620,18 +620,16 @@ themes.view.Theme = wp.Backbone.View.extend({
if ( 0 === this.model.collection.indexOf( current ) ) {
previousThemeButton
.addClass( 'disabled' )
.prop( 'disabled', true );

nextThemeButton.trigger( 'focus' );
.attr( 'aria-disabled', true )
.trigger( 'focus' );
}

// Disable next if the next model is undefined.
if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
nextThemeButton
.addClass( 'disabled' )
.prop( 'disabled', true );

previousThemeButton.trigger( 'focus' );
.attr( 'aria-disabled', true )
.trigger( 'focus' );
}
},

Expand Down Expand Up @@ -725,11 +723,14 @@ themes.view.Details = wp.Backbone.View.extend({

// Set initial focus and constrain tabbing within the theme browser modal.
containFocus: function( $el ) {
// Set initial focus on the theme overlay, only on first render.
var $themeOverlay = $( '.theme-overlay' );
if ( $themeOverlay.hasClass( 'theme-overlay-initial' ) ) {
_.delay( function() {
$themeOverlay.trigger( 'focus' ).removeClass( 'theme-overlay-initial' );
}, 100 );
}

// Set initial focus on the primary action control.
_.delay( function() {
$( '.theme-overlay' ).trigger( 'focus' );
}, 100 );

// Constrain tabbing within the modal.
$el.on( 'keydown.wp-themes', function( event ) {
Expand Down Expand Up @@ -785,10 +786,13 @@ themes.view.Details = wp.Backbone.View.extend({
// Restore scroll position.
document.body.scrollTop = scroll;

// Return focus to the theme div.
// Return focus to the opener theme 'more-details' button.
if ( themes.focusedTheme ) {
themes.focusedTheme.find('.more-details').trigger( 'focus' );
themes.focusedTheme.find( '.more-details' ).trigger( 'focus' );
}

// Add back the `theme-overlay-initial` class for the theme overlay.
$( '.theme-overlay' ).addClass( 'theme-overlay-initial' );
});
}

Expand All @@ -803,12 +807,12 @@ themes.view.Details = wp.Backbone.View.extend({
if ( this.model.cid === this.model.collection.at(0).cid ) {
this.$el.find( '.left' )
.addClass( 'disabled' )
.prop( 'disabled', true );
.attr( 'aria-disabled', true );
}
if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
this.$el.find( '.right' )
.addClass( 'disabled' )
.prop( 'disabled', true );
.attr( 'aria-disabled', true );
}
},

Expand Down Expand Up @@ -960,6 +964,8 @@ themes.view.Preview = themes.view.Details.extend({

this.$el.fadeIn( 200, function() {
$body.addClass( 'theme-installer-active full-overlay-active' );
// Set initial focus on the theme installer overlay modal dialog.
self.$el.trigger( 'focus' );
});

this.$el.find( 'iframe' ).one( 'load', function() {
Expand All @@ -976,9 +982,9 @@ themes.view.Preview = themes.view.Details.extend({
this.$el.fadeOut( 200, function() {
$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );

// Return focus to the theme div.
// Return focus to the opener theme 'more-details' button.
if ( themes.focusedTheme ) {
themes.focusedTheme.find('.more-details').trigger( 'focus' );
themes.focusedTheme.find( '.more-details' ).trigger( 'focus' );
}
}).removeClass( 'iframe-ready' );

Expand Down Expand Up @@ -1354,6 +1360,8 @@ themes.view.Themes = wp.Backbone.View.extend({

// Trigger a route update for the current model.
self.theme.trigger( 'theme:expand', nextModel.cid );
// Move focus to the 'Next' navigation button after the view fully re-rendeers.
$( '.theme-header .right' ).trigger( 'focus' );
themes.announceThemeDebounced( nextModel );
}
},
Expand Down Expand Up @@ -1389,6 +1397,8 @@ themes.view.Themes = wp.Backbone.View.extend({

// Trigger a route update for the current model.
self.theme.trigger( 'theme:expand', previousModel.cid );
// Move focus to the 'Previous' navigation button after the view fully re-rendeers.
$( '.theme-header .left' ).trigger( 'focus' );
themes.announceThemeDebounced( previousModel );
}
},
Expand Down
19 changes: 2 additions & 17 deletions src/js/media/views/frame/edit-attachments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,8 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
},

toggleNav: function() {
this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
this.$( '.left' ).attr( 'aria-disabled', ! this.hasPrevious() );
this.$( '.right' ).attr( 'aria-disabled', ! this.hasNext() );
},

/**
Expand Down Expand Up @@ -238,8 +238,6 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta

model = this.library.at( this.getCurrentIndex() - 1 );
this.trigger( 'refresh', model );
// Move focus to the Previous button. When there are no more items, to the Next button.
this.focusNavButton( this.hasPrevious() ? '.left' : '.right' );
this.announceMediaItemDebounced( model );
},

Expand All @@ -255,22 +253,9 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta

model = this.library.at( this.getCurrentIndex() + 1 );
this.trigger( 'refresh', model );
// Move focus to the Next button. When there are no more items, to the Previous button.
this.focusNavButton( this.hasNext() ? '.right' : '.left' );
this.announceMediaItemDebounced( model );
},

/**
* Set focus to the navigation buttons depending on the browsing direction.
*
* @since 5.3.0
*
* @param {string} which A CSS selector to target the button to focus.
*/
focusNavButton: function( which ) {
$( which ).trigger( 'focus' );
},

getCurrentIndex: function() {
return this.library.indexOf( this.model );
},
Expand Down
8 changes: 4 additions & 4 deletions src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -773,10 +773,10 @@ div#wp-responsive-toggle a::before {

&.wp-customizer .theme-overlay .theme-header .close:focus,
&.wp-customizer .theme-overlay .theme-header .close:hover,
&.wp-customizer .theme-overlay .theme-header .right:focus,
&.wp-customizer .theme-overlay .theme-header .right:hover,
&.wp-customizer .theme-overlay .theme-header .left:focus,
&.wp-customizer .theme-overlay .theme-header .left:hover {
&.wp-customizer .theme-overlay .theme-header .right:focus:not(.disabled),
&.wp-customizer .theme-overlay .theme-header .right:hover:not(.disabled),
&.wp-customizer .theme-overlay .theme-header .left:focus:not(.disabled),
&.wp-customizer .theme-overlay .theme-header .left:hover:not(.disabled) {
border-bottom-color: variables.$button-color;
color: variables.$link;
}
Expand Down
8 changes: 4 additions & 4 deletions src/wp-admin/css/customize-controls.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2455,10 +2455,10 @@ p.customize-section-description {

.wp-customizer .theme-overlay .theme-header .close:focus,
.wp-customizer .theme-overlay .theme-header .close:hover,
.wp-customizer .theme-overlay .theme-header .right:focus,
.wp-customizer .theme-overlay .theme-header .right:hover,
.wp-customizer .theme-overlay .theme-header .left:focus,
.wp-customizer .theme-overlay .theme-header .left:hover {
.wp-customizer .theme-overlay .theme-header .right:focus:not(.disabled),
.wp-customizer .theme-overlay .theme-header .right:hover:not(.disabled),
.wp-customizer .theme-overlay .theme-header .left:focus:not(.disabled),
.wp-customizer .theme-overlay .theme-header .left:hover:not(.disabled) {
background: #fff;
}

Expand Down
11 changes: 6 additions & 5 deletions src/wp-admin/css/media.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -725,9 +725,9 @@ border color while dragging a file over the uploader drop area */
.upload-php .media-modal-close:focus,
.edit-attachment-frame .edit-media-header .left:focus,
.edit-attachment-frame .edit-media-header .right:focus {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
/* Always visible also in Windows High Contrast mode */
outline: 1px solid #c3c4c7;;
outline-offset: -1px;
}

.upload-php .media-modal-close:focus .media-modal-icon::before,
Expand All @@ -745,8 +745,9 @@ border color while dragging a file over the uploader drop area */
content: "\f345" / "";
}

.edit-attachment-frame .edit-media-header [disabled],
.edit-attachment-frame .edit-media-header [disabled]:hover {
.edit-attachment-frame .edit-media-header [aria-disabled="true"],
.edit-attachment-frame .edit-media-header [aria-disabled="true"]:hover,
.edit-attachment-frame .edit-media-header [aria-disabled="true"]:focus {
color: #c3c4c7;
background: inherit;
cursor: default;
Expand Down
15 changes: 14 additions & 1 deletion src/wp-admin/css/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1406,6 +1406,12 @@ body.full-overlay-active {
visibility: hidden;
}

/* Make sure the ARIA live regions are visible, as they inherit the hidden visibility from the body. */
.a11y-speak-intro-text,
.a11y-speak-region {
visibility: visible;
}

.wp-full-overlay {
background: #1d2327;
z-index: 500000;
Expand Down Expand Up @@ -1561,6 +1567,14 @@ body.full-overlay-active {
box-shadow: none;
}

.theme-install-overlay .close-full-overlay:focus,
.theme-install-overlay .previous-theme:focus,
.theme-install-overlay .next-theme:focus {
/* Always visible also in Windows High Contrast mode */
outline: 1px solid #c3c4c7;;
outline-offset: -1px;
}

.theme-install-overlay .close-full-overlay::before {
font: 400 22px/1 dashicons;
content: "\f335";
Expand Down Expand Up @@ -1597,7 +1611,6 @@ body.full-overlay-active {
color: #c3c4c7;
background: #f0f0f1;
cursor: default;
pointer-events: none;
}

.theme-install-overlay .close-full-overlay::before,
Expand Down
4 changes: 2 additions & 2 deletions src/wp-admin/includes/theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -828,13 +828,13 @@ function customize_themes_print_templates() {
<button type="button" class="left dashicons dashicons-no"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Show previous theme' );
_ex( 'Previous', 'theme' );
?>
</span></button>
<button type="button" class="right dashicons dashicons-no"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Show next theme' );
_ex( 'Next', 'theme' );
?>
</span></button>
<button type="button" class="close dashicons dashicons-no"><span class="screen-reader-text">
Expand Down
8 changes: 4 additions & 4 deletions src/wp-admin/theme-install.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@
?>
</h2>
<div class="theme-browser content-filterable"></div>
<div class="theme-install-overlay wp-full-overlay expanded"></div>
<div class="theme-install-overlay wp-full-overlay expanded" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Browse Themes' ); ?>"></div>

<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
<span class="spinner"></span>
Expand Down Expand Up @@ -390,7 +390,7 @@
</p></div>
<# } #>

<span class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></span>
<button type="button" class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></button>
<div class="theme-author">
<?php
/* translators: %s: Theme author name. */
Expand Down Expand Up @@ -473,13 +473,13 @@
<button class="previous-theme"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Previous theme' );
_ex( 'Previous', 'theme' );
?>
</span></button>
<button class="next-theme"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Next theme' );
_ex( 'Next', 'theme' );
?>
</span></button>
<# if ( data.installed ) { #>
Expand Down
8 changes: 4 additions & 4 deletions src/wp-admin/themes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -664,7 +664,7 @@
<?php endforeach; ?>
</div>
</div>
<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
<div class="theme-overlay theme-overlay-initial" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>

<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>

Expand Down Expand Up @@ -1057,19 +1057,19 @@ function wp_theme_auto_update_setting_template() {
<button class="left dashicons dashicons-no"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Show previous theme' );
_ex( 'Previous', 'theme' );
?>
</span></button>
<button class="right dashicons dashicons-no"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Show next theme' );
_ex( 'Next', 'theme' );
?>
</span></button>
<button class="close dashicons dashicons-no"><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Close details dialog' );
_e( 'Close' );
?>
</span></button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/wp-includes/media-template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ function wp_print_media_templates() {
<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Close dialog' );
_e( 'Close' );
?>
</span></button>
<# } #>
Expand Down Expand Up @@ -369,9 +369,9 @@ function wp_print_media_templates() {
<?php // Template for the Attachment Details layout in the media browser. ?>
<script type="text/html" id="tmpl-edit-attachment-frame">
<div class="edit-media-header">
<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></button>
<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Previous', 'media item' ); ?></span></button>
<button class="right dashicons"<# if ( ! data.hasNext ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Next', 'media item' ); ?></span></button>
<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
</div>
<div class="media-frame-title"></div>
<div class="media-frame-content"></div>
Expand Down
Loading
Loading