WordPress.org

Make WordPress Core

Ticket #37188: 37188.6.diff

File 37188.6.diff, 8.3 KB (added by afercia, 2 years ago)
  • src/wp-admin/css/media.css

     
    469469.upload-php .mode-grid .media-sidebar {
    470470        position: relative;
    471471        width: auto;
    472         margin-bottom: 16px;
     472        margin-top: 12px;
    473473        padding: 0 16px;
    474474        border-left: 4px solid #dd3d36;
    475475        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
     
    526526        left: auto;
    527527        bottom: auto;
    528528        padding-top: 0;
    529         margin-top: 0;
     529        margin-top: 20px;
    530530        border: 4px dashed #b4b9be;
    531531}
    532532
  • src/wp-admin/upload.php

     
    7777
    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                ?>
    8383
  • src/wp-includes/css/media-views.css

     
    11331133        border: 0;
    11341134        cursor: pointer;
    11351135        height: 48px;
     1136        outline: none;
     1137        padding: 0;
    11361138        position: absolute;
    1137         right: 0;
     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;
    11501153}
    11511154
     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 );
     1159}
     1160
    11521161.attachments-browser.hide-sidebar .attachments,
    11531162.attachments-browser.hide-sidebar .uploader-inline {
    11541163        right: 0;
  • src/wp-includes/js/media/views/attachments/browser.js

     
    4040
    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
    5672                if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {
     
    343359                        canClose:   this.controller.isModeActive( 'grid' )
    344360                });
    345361
    346                 this.uploader.hide();
     362                this.uploader.$el.addClass( 'hidden' );
    347363                this.views.add( this.uploader );
    348364        },
    349365
  • src/wp-includes/js/media/views/frame/manage.js

     
    3838                this.$body = $( document.body );
    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.
    4549                this.$el.addClass('wp-core-ui');
  • src/wp-includes/js/media/views/uploader/inline.js

     
    119119        },
    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
    127136});
  • src/wp-includes/js/media-grid.js

     
    623623                this.$body = $( document.body );
    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.
    630634                this.$el.addClass('wp-core-ui');
  • src/wp-includes/js/media-views.js

     
    37713771
    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
    37873803                if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {
     
    40744090                        canClose:   this.controller.isModeActive( 'grid' )
    40754091                });
    40764092
    4077                 this.uploader.hide();
     4093                this.uploader.$el.addClass( 'hidden' );
    40784094                this.views.add( this.uploader );
    40794095        },
    40804096
     
    82108226        },
    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
    82188243});