Changeset 45506

Timestamp:

06/09/2019 03:47:43 PM (5 years 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:

• js/media/views/attachment/details.js (modified) (1 diff)
• js/media/views/frame/edit-attachments.js (modified) (1 diff)
• js/media/views/modal.js (modified) (2 diffs)
• wp-includes/media-template.php (modified) (2 diffs)

trunk/src/js/media/views/attachment/details.js

@@ -19 +19 @@
     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: {

trunk/src/js/media/views/frame/edit-attachments.js

@@ -81 +81 @@
         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
             });
 

trunk/src/js/media/views/modal.js

@@ -27 +27 @@
     initialize: function() {
         _.defaults( this.options, {
-            container: document.body,
-            title:     '',
-            propagate: true
+            container:      document.body,
+            title:          '',
+            propagate:      true,
+            hasCloseButton: true
         });
 
@@ -41 +42 @@
     prepare: function() {
         return {
-            title: this.options.title
+            title:          this.options.title,
+            hasCloseButton: this.options.hasCloseButton
         };
     },

trunk/src/wp-includes/media-template.php

@@ -189 +189 @@
     <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>
@@ -324 +326 @@
             <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>