Accessibility: Fix the order of the Previous, Next, and Close buttons in the Attachment Details modal.

Making the visual and DOM order match benefits keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.

Fixes #47458.

Built from https://develop.svn.wordpress.org/trunk@45506


git-svn-id: http://core.svn.wordpress.org/trunk@45317 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2019-06-09 15:48:53 +00:00
parent c9b51df3d0
commit f57e10a35d
6 changed files with 23 additions and 18 deletions

View File

@ -707,8 +707,9 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
// Initialize modal container view.
if ( this.options.modal ) {
this.modal = new wp.media.view.Modal({
controller: this,
title: this.options.title
controller: this,
title: this.options.title,
hasCloseButton: false
});
this.modal.on( 'open', _.bind( function () {

File diff suppressed because one or more lines are too long

View File

@ -4318,9 +4318,10 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
initialize: function() {
_.defaults( this.options, {
container: document.body,
title: '',
propagate: true
container: document.body,
title: '',
propagate: true,
hasCloseButton: true
});
this.focusManager = new wp.media.view.FocusManager({
@ -4332,7 +4333,8 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
*/
prepare: function() {
return {
title: this.options.title
title: this.options.title,
hasCloseButton: this.options.hasCloseButton
};
},
@ -8459,12 +8461,11 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
className: 'attachment-details',
template: wp.template('attachment-details'),
attributes: function() {
return {
'tabIndex': 0,
'data-id': this.model.get( 'id' )
};
},
/*
* Reset all the attributes inherited from Attachment including role=checkbox,
* tabindex, etc., as they are inappropriate for this view. See #47458 and [30483] / #30390.
*/
attributes: {},
events: {
'change [data-setting]': 'updateSetting',

File diff suppressed because one or more lines are too long

View File

@ -188,7 +188,9 @@ function wp_print_media_templates() {
<?php // Template for the media modal. ?>
<script type="text/html" id="tmpl-media-modal">
<div tabindex="0" class="<?php echo $class; ?>">
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
<# if ( data.hasCloseButton ) { #>
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
<# } #>
<div class="media-modal-content"></div>
</div>
<div class="media-modal-backdrop"></div>
@ -323,6 +325,7 @@ function wp_print_media_templates() {
<div class="edit-media-header">
<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
</div>
<div class="media-frame-title"></div>
<div class="media-frame-content"></div>

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.3-alpha-45505';
$wp_version = '5.3-alpha-45506';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.