Make WordPress Core

Changeset 40359


Ignore:
Timestamp:
03/31/2017 05:37:58 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Improve the Media Library inline uploader accessibility.

For better accessibility, expandable panels should be placed immediately after
the control that expands them. This change moves the Media Library inline
uploader up, right after the "Add New" button, also introducing consistency with
the Plugin and Theme uploaders.
Adds a proper ARIA role on the button and an aria-expanded attribute to give
better feedback to assistive technologies users about the uploader's expanded state.
Improves the focus handling when closing the uploader, improves the focus style
and color contrast ratio of the uploader "close" button.

Props mantismamita, karmatosed, adamsilverstein, afercia.
Fixes #37188.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/media.css

    r40052 r40359  
    470470    position: relative;
    471471    width: auto;
    472     margin-bottom: 16px;
     472    margin-top: 12px;
    473473    padding: 0 16px;
    474474    border-left: 4px solid #dd3d36;
     
    527527    bottom: auto;
    528528    padding-top: 0;
    529     margin-top: 0;
     529    margin-top: 20px;
    530530    border: 4px dashed #b4b9be;
    531531}
  • trunk/src/wp-admin/upload.php

    r39526 r40359  
    7878        <?php
    7979        if ( current_user_can( 'upload_files' ) ) { ?>
    80             <a href="<?php echo admin_url( 'media-new.php' ); ?>" class="page-title-action"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
     80            <a href="<?php echo admin_url( 'media-new.php' ); ?>" class="page-title-action aria-button-if-js"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
    8181        }
    8282        ?>
  • trunk/src/wp-includes/css/media-views.css

    r40358 r40359  
    11341134    cursor: pointer;
    11351135    height: 48px;
    1136     position: absolute;
    1137     right: 0;
     1136    outline: none;
     1137    padding: 0;
     1138    position: absolute;
     1139    right: 2px;
    11381140    text-align: center;
    1139     top: 0;
    1140     width: 50px;
     1141    top: 2px;
     1142    width: 48px;
    11411143    z-index: 1;
    11421144}
    11431145
    11441146.uploader-inline .close:before {
    1145     font: normal 30px/50px dashicons !important;
    1146     color: #72777c;
     1147    font: normal 30px/1 dashicons !important;
     1148    color: #555d66;
    11471149    display: inline-block;
    11481150    content: "\f335";
    11491151    font-weight: 300;
     1152    margin-top: 1px;
     1153}
     1154
     1155.uploader-inline .close:focus {
     1156    outline: 1px solid  #5b9dd9;
     1157    -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
     1158    box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
    11501159}
    11511160
  • trunk/src/wp-includes/js/media-grid.js

    r40076 r40359  
    624624        this.$window = $( window );
    625625        this.$adminBar = $( '#wpadminbar' );
     626        // Store the Add New button for later reuse in wp.media.view.UploaderInline.
     627        this.$uploaderToggler = $( '.page-title-action' )
     628            .attr( 'aria-expanded', 'false' )
     629            .on( 'click', _.bind( this.addNewClickHandler, this ) );
     630
    626631        this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
    627         $( document ).on( 'click', '.page-title-action', _.bind( this.addNewClickHandler, this ) );
    628632
    629633        // Ensure core and media grid view UI is enabled.
  • trunk/src/wp-includes/js/media-views.js

    r40126 r40359  
    37723772        this.controller.on( 'toggle:upload:attachment', this.toggleUploader, this );
    37733773        this.controller.on( 'edit:selection', this.editSelection );
    3774         this.createToolbar();
     3774
    37753775        // In the Media Library, the sidebar is used to display errors before the attachments grid.
    37763776        if ( this.options.sidebar && 'errors' === this.options.sidebar ) {
    37773777            this.createSidebar();
    37783778        }
     3779
     3780        /*
     3781         * For accessibility reasons, place the Inline Uploader before other sections.
     3782         * This way, in the Media Library, it's right after the Add New button, see ticket #37188.
     3783         */
    37793784        this.createUploader();
     3785
     3786        /*
     3787         * Create a multi-purpose toolbar. Used as main toolbar in the Media Library
     3788         * and also for other things, for example the "Drag and drop to reorder" and
     3789         * "Suggested dimensions" info in the media modal.
     3790         */
     3791        this.createToolbar();
     3792
     3793        // Create the list of attachments.
    37803794        this.createAttachments();
     3795
    37813796        // For accessibility reasons, place the normal sidebar after the attachments, see ticket #36909.
    37823797        if ( this.options.sidebar && 'errors' !== this.options.sidebar ) {
    37833798            this.createSidebar();
    37843799        }
     3800
    37853801        this.updateContent();
    37863802
     
    40754091        });
    40764092
    4077         this.uploader.hide();
     4093        this.uploader.$el.addClass( 'hidden' );
    40784094        this.views.add( this.uploader );
    40794095    },
     
    82118227    show: function() {
    82128228        this.$el.removeClass( 'hidden' );
     8229        if ( this.controller.$uploaderToggler.length ) {
     8230            this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' );
     8231        }
    82138232    },
    82148233    hide: function() {
    82158234        this.$el.addClass( 'hidden' );
     8235        if ( this.controller.$uploaderToggler.length ) {
     8236            this.controller.$uploaderToggler
     8237                .attr( 'aria-expanded', 'false' )
     8238                // Move focus back to the toggle button when closing the uploader.
     8239                .focus();
     8240        }
    82168241    }
    82178242
  • trunk/src/wp-includes/js/media/views/attachments/browser.js

    r40126 r40359  
    4141        this.controller.on( 'toggle:upload:attachment', this.toggleUploader, this );
    4242        this.controller.on( 'edit:selection', this.editSelection );
    43         this.createToolbar();
     43
    4444        // In the Media Library, the sidebar is used to display errors before the attachments grid.
    4545        if ( this.options.sidebar && 'errors' === this.options.sidebar ) {
    4646            this.createSidebar();
    4747        }
     48
     49        /*
     50         * For accessibility reasons, place the Inline Uploader before other sections.
     51         * This way, in the Media Library, it's right after the Add New button, see ticket #37188.
     52         */
    4853        this.createUploader();
     54
     55        /*
     56         * Create a multi-purpose toolbar. Used as main toolbar in the Media Library
     57         * and also for other things, for example the "Drag and drop to reorder" and
     58         * "Suggested dimensions" info in the media modal.
     59         */
     60        this.createToolbar();
     61
     62        // Create the list of attachments.
    4963        this.createAttachments();
     64
    5065        // For accessibility reasons, place the normal sidebar after the attachments, see ticket #36909.
    5166        if ( this.options.sidebar && 'errors' !== this.options.sidebar ) {
    5267            this.createSidebar();
    5368        }
     69
    5470        this.updateContent();
    5571
     
    344360        });
    345361
    346         this.uploader.hide();
     362        this.uploader.$el.addClass( 'hidden' );
    347363        this.views.add( this.uploader );
    348364    },
  • trunk/src/wp-includes/js/media/views/frame/manage.js

    r40076 r40359  
    3939        this.$window = $( window );
    4040        this.$adminBar = $( '#wpadminbar' );
     41        // Store the Add New button for later reuse in wp.media.view.UploaderInline.
     42        this.$uploaderToggler = $( '.page-title-action' )
     43            .attr( 'aria-expanded', 'false' )
     44            .on( 'click', _.bind( this.addNewClickHandler, this ) );
     45
    4146        this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
    42         $( document ).on( 'click', '.page-title-action', _.bind( this.addNewClickHandler, this ) );
    4347
    4448        // Ensure core and media grid view UI is enabled.
  • trunk/src/wp-includes/js/media/views/uploader/inline.js

    r33337 r40359  
    120120    show: function() {
    121121        this.$el.removeClass( 'hidden' );
     122        if ( this.controller.$uploaderToggler.length ) {
     123            this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' );
     124        }
    122125    },
    123126    hide: function() {
    124127        this.$el.addClass( 'hidden' );
     128        if ( this.controller.$uploaderToggler.length ) {
     129            this.controller.$uploaderToggler
     130                .attr( 'aria-expanded', 'false' )
     131                // Move focus back to the toggle button when closing the uploader.
     132                .focus();
     133        }
    125134    }
    126135
Note: See TracChangeset for help on using the changeset viewer.