Skip to content
Permalink
Browse files

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.

Props afercia.
Merges [45506] to the 5.2 branch.
Fixes #47458.

git-svn-id: https://develop.svn.wordpress.org/branches/5.2@45849 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
SergeyBiryukov committed Aug 19, 2019
1 parent 6db50b0 commit 992a99f231ca4d8b3dfdccc08c25dcb3deb5149f
@@ -18,12 +18,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',
@@ -80,8 +80,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 () {
@@ -26,9 +26,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({
@@ -40,7 +41,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
};
},

@@ -195,7 +195,9 @@ function wp_print_media_templates() {

<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>
@@ -319,6 +321,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( 'Edit previous media item' ); ?></span></button>
<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></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>

0 comments on commit 992a99f

Please sign in to comment.
You can’t perform that action at this time.