WordPress.org

Make WordPress Core

Changeset 45506 for trunk


Ignore:
Timestamp:
06/09/2019 03:47:43 PM (17 months ago)
Author:
afercia
Message:

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.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/attachment/details.js

    r44900 r45506  
    1919    template:  wp.template('attachment-details'),
    2020
    21     attributes: function() {
    22         return {
    23             'tabIndex':     0,
    24             'data-id':      this.model.get( 'id' )
    25         };
    26     },
     21    /*
     22     * Reset all the attributes inherited from Attachment including role=checkbox,
     23     * tabindex, etc., as they are inappropriate for this view. See #47458 and [30483] / #30390.
     24     */
     25    attributes: {},
    2726
    2827    events: {
  • trunk/src/js/media/views/frame/edit-attachments.js

    r43309 r45506  
    8181        if ( this.options.modal ) {
    8282            this.modal = new wp.media.view.Modal({
    83                 controller: this,
    84                 title:      this.options.title
     83                controller:     this,
     84                title:          this.options.title,
     85                hasCloseButton: false
    8586            });
    8687
  • trunk/src/js/media/views/modal.js

    r44639 r45506  
    2727    initialize: function() {
    2828        _.defaults( this.options, {
    29             container: document.body,
    30             title:     '',
    31             propagate: true
     29            container:      document.body,
     30            title:          '',
     31            propagate:      true,
     32            hasCloseButton: true
    3233        });
    3334
     
    4142    prepare: function() {
    4243        return {
    43             title: this.options.title
     44            title:          this.options.title,
     45            hasCloseButton: this.options.hasCloseButton
    4446        };
    4547    },
  • trunk/src/wp-includes/media-template.php

    r45499 r45506  
    189189    <script type="text/html" id="tmpl-media-modal">
    190190        <div tabindex="0" class="<?php echo $class; ?>">
    191             <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>
     191            <# if ( data.hasCloseButton ) { #>
     192                <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
     193            <# } #>
    192194            <div class="media-modal-content"></div>
    193195        </div>
     
    324326            <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
    325327            <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
     328            <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
    326329        </div>
    327330        <div class="media-frame-title"></div>
Note: See TracChangeset for help on using the changeset viewer.