Make WordPress Core

Ticket #29371: 29371.patch

File 29371.patch, 24.2 KB (added by afercia, 10 years ago)
  • src/wp-admin/css/media.css

     
    563563}
    564564
    565565.media-frame.mode-grid .media-toolbar select {
    566         margin: 0 10px 0 0;
    567566        font-size: 14px;
    568567}
    569568
     
    628627        overflow: hidden;
    629628}
    630629
    631 .upload-php .media-modal-close .media-modal-icon:before {
     630.media-modal-close .media-modal-icon:before {
    632631        content: '\f335';
    633         font-size: 22px;
     632        font: normal 20px/1 'dashicons';
     633        speak: none;
     634        vertical-align: middle;
     635        -webkit-font-smoothing: antialiased;
     636        -moz-osx-font-smoothing: grayscale;
     637        color: #666;
    634638}
    635639
    636 .upload-php .media-modal-close .media-modal-icon {
    637         margin: 14px;
    638         width: 22px;
    639 }
    640 
    641 .upload-php .media-modal-close,
     640.media-modal-close,
    642641.edit-attachment-frame .edit-media-header .left,
    643642.edit-attachment-frame .edit-media-header .right {
    644643        cursor: pointer;
     
    648647        width: 50px;
    649648        padding: 0;
    650649        position: absolute;
     650        z-index: 1000;
    651651        text-align: center;
    652652        border: 0;
    653653        border-left: 1px solid #ddd;
     654        outline: 0;
    654655        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    655656    transition: color .1s ease-in-out, background .1s ease-in-out;
    656657}
    657658
    658 .upload-php .media-modal-close {
     659.media-modal-close {
    659660        top: 0;
    660661        right: 0;
    661662}
    662663
     664.library .media-modal-close {
     665        border-left: 0;
     666}
     667.media-modal-close span.media-modal-icon {
     668        background-image: none;
     669}
     670
    663671.edit-attachment-frame .edit-media-header .left {
    664672        right: 102px;
    665673}
     
    680688        font-weight: 300;
    681689}
    682690
    683 .upload-php .media-modal-close:hover,
    684 .upload-php .media-modal-close:focus,
     691.media-modal-close:hover,
     692.media-modal-close:focus,
    685693.edit-attachment-frame .edit-media-header .left:hover,
    686694.edit-attachment-frame .edit-media-header .right:hover,
    687695.edit-attachment-frame .edit-media-header .left:focus,
  • src/wp-includes/css/media-views.css

     
    100100   color: #a9a9a9;
    101101}
    102102
    103 .media-frame .hidden {
     103.media-frame .hidden,
     104.media-frame label.setting.hidden {
    104105        display: none;
    105106}
    106107
     
    150151        z-index: 559900;
    151152}
    152153
    153 .media-modal-close {
    154         position: absolute;
    155         text-decoration: none;
    156         top: 10px;
    157         right: 10px;
    158         width: 30px;
    159         height: 30px;
    160         z-index: 1000;
    161         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    162         transition: color .1s ease-in-out, background .1s ease-in-out;
    163 }
    164 
    165 .media-modal-close:active {
    166         -webkit-box-shadow: none;
    167         box-shadow: none;
    168 }
    169 
    170 .media-modal-close span.media-modal-icon {
    171         display: block;
    172         margin-top: 5px;
    173         width: 30px;
    174         height: 15px;
    175         background-image: none;
    176         text-align: center;
    177 }
    178 
    179 .media-modal-close .media-modal-icon:before {
    180         content: '\f158';
    181         font: normal 20px/1 'dashicons';
    182         speak: none;
    183         vertical-align: middle;
    184         -webkit-font-smoothing: antialiased;
    185         -moz-osx-font-smoothing: grayscale;
    186         color: #666;
    187 }
    188 
    189 .media-modal-close:hover .media-modal-icon:before {
    190         color: #2ea2cc;
    191 }
    192 
    193 .media-modal-close:active {
    194         outline: 0;
    195 }
    196 
    197154.media-modal-content {
    198155        position: absolute;
    199156        top: 0;
     
    730687 * Attachment Browser Filters
    731688 */
    732689.media-frame select.attachment-filters {
    733         margin-top: 11px;
     690        margin-top: 10px;
    734691        margin-right: 10px;
     692        vertical-align: top;
    735693}
    736694
    737695/**
     
    738696 * Search
    739697 */
    740698.media-frame .search {
    741         margin-top: 11px;
     699        margin-top: 10px;
    742700        padding: 4px;
    743701        font-size: 13px;
    744702        color: #464646;
     
    929887        position: absolute;
    930888        top: 5px;
    931889        right: 5px;
    932         height: 22px;
    933890        width: 22px;
    934891        padding: 0;
    935892        font-size: 20px;
     
    938895        text-decoration: none;
    939896        color: #464646;
    940897        background-color: #fff;
    941         background-position: -96px 4px;
    942898        border-width: 0;
    943899        -webkit-border-radius: 3px;
    944900        border-radius: 3px;
     
    950906        transition-property: none;
    951907}
    952908
    953 .attachment a.close:hover,
    954 .attachment a.close:focus {
     909.attachment .close .media-modal-icon {
     910        height: 22px;
     911        background-position: -96px 4px;
     912}
     913
     914.attachment .close:hover .media-modal-icon,
     915.attachment .close:focus .media-modal-icon {
    955916        -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
    956917        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
    957918        background-position: -36px 4px;
    958 
    959919}
    960920
    961 .attachment .check {
     921.attachment .check,
     922.attachment .edit-details {
    962923        display: none;
    963924        height: 24px;
    964925        width: 24px;
     
    968929        right: 0;
    969930        outline: none;
    970931        background: #eee;
     932        text-decoration: none;
     933        color: #222;
    971934        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
    972935        box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
    973936}
    974937
    975 .attachment .check div {
     938.attachment .edit-details {
     939        top: 30px;
     940}
     941
     942.attachment .edit-details .media-modal-icon {
     943        background-image: none;
     944}
     945.attachment .edit-details .media-modal-icon:before {
     946        content: "\f464";
     947        font: normal 20px/24px 'dashicons';
     948        speak: none;
     949        vertical-align: top;
     950        -webkit-font-smoothing: antialiased;
     951        -moz-osx-font-smoothing: grayscale;
     952}
     953
     954.attachment .check .media-modal-icon {
    976955        background-position: -1px 0;
    977956        height: 15px;
    978957        width: 15px;
     
    979958        margin: 5px;
    980959}
    981960
    982 .attachment .check:hover div {
     961.attachment .check:hover .media-modal-icon {
    983962        background-position: -40px 0;
    984963}
    985964
    986 .attachment.selected .check {
     965.attachment.selected .check,
     966.attachment.selected .edit-details {
    987967        display: block;
    988968}
    989969
    990970.attachment.details .check,
    991971.attachment.selected .check:focus,
     972.attachment.details .edit-details,
     973.attachment.selected .edit-details:focus,
    992974.media-frame.mode-grid .attachment.selected .check {
     975        color: #fff;
    993976        background-color: #1e8cbe;
    994977        -webkit-box-shadow:
    995978                0 0 0 1px #fff,
     
    999982                0 0 0 2px #1e8cbe;
    1000983}
    1001984
    1002 .attachment.details .check div,
    1003 .media-frame.mode-grid .attachment.selected .check div {
     985.attachment.details .check .media-modal-icon,
     986.media-frame.mode-grid .attachment.selected .check .media-modal-icon {
    1004987        background-position: -21px 0;
    1005988}
    1006989
    1007 .attachment.details .check:hover div,
    1008 .attachment.selected .check:focus div,
    1009 .media-frame.mode-grid .attachment.selected .check:hover div {
     990.attachment.details .check:hover .media-modal-icon,
     991.attachment.selected .check:focus .media-modal-icon,
     992.media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
    1010993        background-position: -60px 0;
    1011994}
    1012995
     996.attachment.selected .edit-details:hover {
     997        color: #000;
     998}
     999
     1000.attachment.selected .edit-details:focus,
     1001.attachment.details .edit-details:hover,
     1002.attachment.details .edit-details:focus {
     1003        color: #fff;
     1004}
     1005
    10131006.media-frame .attachment .describe {
    10141007        position: relative;
    10151008        display: block;
     
    10441037.attachments-browser .media-toolbar-primary > .media-button-group,
    10451038.attachments-browser .media-toolbar-secondary > .media-button,
    10461039.attachments-browser .media-toolbar-secondary > .media-button-group {
    1047         margin: 11px 0;
     1040        margin: 10px 0;
    10481041}
    10491042
    10501043.attachments-browser .attachments {
     
    10951088
    10961089.attachments-browser .instructions {
    10971090        display: inline-block;
    1098         margin-top: 16px;
     1091        margin-top: 15px;
    10991092        line-height: 18px;
    11001093        font-size: 13px;
    11011094        color: #666;
     
    15351528        line-height: 18px;
    15361529        color: #666;
    15371530        border-bottom: 1px solid #ddd;
    1538         padding-bottom: 11px;
     1531        padding-bottom: 10px;
    15391532}
    15401533
    15411534.attachment-info .filename {
     
    22092202
    22102203        .media-frame:not(.hide-menu) .media-frame-title .dashicons {
    22112204                display: inline-block;
    2212                 line-height: 50px;
     2205                line-height: 56px;
    22132206        }
    22142207
    22152208        .media-frame:not(.hide-menu) .media-frame-title h1 {
     
    23592352        }
    23602353
    23612354        .media-modal .attachments-browser .media-toolbar .attachment-filters {
    2362                 margin: 11px 0 0;
     2355                margin: 10px 0 0;
    23632356                height: auto;
    23642357                max-width: 65%;
    23652358                max-width: -webkit-calc(100% - 38px);
     
    24722465                max-width: 90px;
    24732466        }
    24742467
    2475         .media-modal-close {
    2476                 top: 5px;
    2477                 right: 5px;
    2478         }
    2479 
    24802468        .media-modal .media-frame-title {
    24812469                height: 40px;
    24822470        }
  • src/wp-includes/js/media-views.js

     
    766766                                this.frame.on( 'content:activate', this.saveContentMode, this );
    767767                                this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
    768768                        }
     769
     770                        if ( this.frame.modal ) {
     771                                this.frame.modal.$el.addClass( 'library' );
     772                        } else {
     773                                this.frame.$el.addClass( 'library' );
     774                        }
    769775                },
    770776
    771777                /**
     
    22492255                template:  media.template('media-frame'),
    22502256                regions:   ['menu','title','content','toolbar','router'],
    22512257
     2258                // In the responsive view toggles the Menu visibility.
    22522259                events: {
    22532260                        'click div.media-frame-title h1': 'toggleMenu'
    22542261                },
     
    23292336                createTitle: function( title ) {
    23302337                        title.view = new media.View({
    23312338                                controller: this,
    2332                                 tagName: 'h1'
     2339                                tagName: 'h1',
     2340                                attributes: {
     2341                                        'id': 'media-frame-title'
     2342                                }
    23332343                        });
    23342344                },
    23352345                /**
     
    35403550                template: media.template('media-modal'),
    35413551
    35423552                attributes: {
    3543                         tabindex: 0
     3553                        'tabindex':        '0',
     3554                        'role':            'dialog',
     3555                        'aria-labelledby': 'media-frame-title',
    35443556                },
    35453557
    35463558                events: {
     
    46184630         * @augments Backbone.View
    46194631         */
    46204632        media.view.Button = media.View.extend({
    4621                 tagName:    'a',
     4633                tagName:    'button',
    46224634                className:  'media-button',
    4623                 attributes: { href: '#' },
     4635                attributes: {
     4636                        'type': 'button'
     4637                },
    46244638
    46254639                events: {
    46264640                        'click': 'click'
     
    46824696                 * @param {Object} event
    46834697                 */
    46844698                click: function( event ) {
    4685                         if ( '#' === this.attributes.href ) {
    4686                                 event.preventDefault();
    4687                         }
    46884699
    46894700                        if ( this.options.click && ! this.model.get('disabled') ) {
    46904701                                this.options.click.apply( this, arguments );
     
    50825093
    50835094                attributes: function() {
    50845095                        return {
    5085                                 'tabIndex':     0,
    5086                                 'role':         'checkbox',
     5096                                'tabindex':     '0',
     5097                                'role':         'option',
    50875098                                'aria-label':   this.model.get( 'title' ),
    5088                                 'aria-checked': false,
     5099                                'aria-selected': false,
    50895100                                'data-id':      this.model.get( 'id' )
    50905101                        };
    50915102                },
     
    50975108                        'change [data-setting] select':   'updateSetting',
    50985109                        'change [data-setting] textarea': 'updateSetting',
    50995110                        'click .close':                   'removeFromLibrary',
    5100                         'click .check':                   'checkClickHandler',
     5111                        'click .check':                   'checkHandler',
     5112                        'click .edit-details':            'focusDetails',
    51015113                        'click a':                        'preventDefault',
    51025114                        'keydown .close':                 'removeFromLibrary',
     5115                        'keydown .check':                 'checkHandler',
     5116                        'keydown .edit-details':          'focusDetails',
    51035117                        'keydown':                        'toggleSelectionHandler'
    51045118                },
    51055119
     
    52655279                                method = 'toggle';
    52665280                        }
    52675281
     5282                        event.preventDefault();
     5283
    52685284                        this.toggleSelection({
    52695285                                method: method
    52705286                        });
     
    53795395                                return;
    53805396                        }
    53815397
    5382                         // Add 'selected' class to model, set aria-checked to true.
    5383                         this.$el.addClass( 'selected' ).attr( 'aria-checked', true );
    5384                         //  Make the checkbox tabable, except in media grid (bulk select mode).
    5385                         if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) {
    5386                                 this.$( '.check' ).attr( 'tabindex', '0' );
    5387                         }
     5398                        // Add 'selected' class to model, set aria-selected to true.
     5399                        this.$el.addClass( 'selected' ).attr( 'aria-selected', true );
     5400                        // Make the checkbox tabable, except in media grid (bulk select mode).
     5401                        // @todo why exclude bulk select mode?
     5402                        // if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) {
     5403                                this.$( '.check' ).attr({ 'tabindex': '0', 'aria-checked': 'true' });
     5404                        // }
    53885405                },
    53895406                /**
    53905407                 * @param {Backbone.Model} model
     
    53995416                        if ( ! selection || ( collection && collection !== selection ) ) {
    54005417                                return;
    54015418                        }
    5402                         this.$el.removeClass( 'selected' ).attr( 'aria-checked', false )
    5403                                 .find( '.check' ).attr( 'tabindex', '-1' );
     5419                        this.$el.removeClass( 'selected' ).attr( 'aria-selected', false )
     5420                                .find( '.check' ).attr({ 'tabindex': '-1', 'aria-checked': 'false' });
    54045421                },
    54055422                /**
    54065423                 * @param {Backbone.Model} model
     
    55415558                 * @param {Object} event
    55425559                 */
    55435560                removeFromLibrary: function( event ) {
     5561
     5562                        var that = this.$el,
     5563                                prev = that.prev(),
     5564                                menuActive = $( '.media-menu-item.active' );
     5565
    55445566                        // Catch enter and space events
    55455567                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
    55465568                                return;
     
    55495571                        // Stop propagation so the model isn't selected.
    55505572                        event.stopPropagation();
    55515573
     5574                        // Move focus to previous element or fallback elements
     5575                        // after image is removed from selection
     5576                        if ( prev.length ) {
     5577                                prev.focus();
     5578                        } else if ( menuActive.length ) {
     5579                                menuActive.focus();
     5580                        } else {
     5581                                // Keep focus inside media modal
     5582                                this.controller.modal.focusManager.focus();
     5583                        }
     5584
    55525585                        this.collection.remove( this.model );
    55535586                },
    55545587
     
    55595592                 * @param  {[type]} event [description]
    55605593                 * @return {[type]}       [description]
    55615594                 */
    5562                 checkClickHandler: function ( event ) {
     5595                checkHandler: function ( event ) {
     5596
     5597                        // Catch enter and space events
     5598                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
     5599                                return;
     5600                        }
     5601
    55635602                        var selection = this.options.selection;
    55645603                        if ( ! selection ) {
    55655604                                return;
    55665605                        }
     5606
     5607                        event.preventDefault();
    55675608                        event.stopPropagation();
    55685609                        if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
    55695610                                selection.remove( this.model );
     
    55725613                        } else {
    55735614                                selection.add( this.model );
    55745615                        }
     5616                },
     5617
     5618                /**
     5619                 * @param {Object} event
     5620                 */
     5621                focusDetails: function ( event ) {
     5622
     5623                        var details = $( '#attachment-details' ),
     5624                                displaySettings = $( '.attachment-display-settings' ),
     5625                                detailsBgColor = details.css( 'background-color' ),
     5626                                mediaSidebar = $( '.media-sidebar' ),
     5627                                mediaSidebarBgColor = mediaSidebar.css( 'background-color' );
     5628
     5629                        // Catch enter and space events
     5630                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
     5631                                return;
     5632                        }
     5633
     5634                        var selection = this.options.selection;
     5635                        if ( ! selection ) {
     5636                                return;
     5637                        }
     5638
     5639                        event.preventDefault();
     5640                        event.stopPropagation();
     5641
     5642                        details.focus();
     5643                        // details.add( displaySettings ).css({ 'background-color': "#d5edf6" }).animate({ 'background-color': detailsBgColor }, 1000 );
     5644                        mediaSidebar.css({ 'background-color': "#d5edf6" }).animate({ 'background-color': mediaSidebarBgColor }, 1000 );
    55755645                }
    55765646        });
    55775647
     
    56495719                className: 'attachments',
    56505720
    56515721                attributes: {
    5652                         tabIndex: -1
     5722                        'tabindex': '-1',
     5723                        'role':     'listbox',
     5724                        'aria-live': 'polite'
    56535725                },
    56545726
    56555727                initialize: function() {
     
    56855757
    56865758                        this.collection.on( 'reset', this.render, this );
    56875759
    5688                         this.listenTo( this.controller, 'library:selection:add',    this.attachmentFocus );
     5760                        this.listenTo( this.controller, 'library:selection:add', this.attachmentFocus );
    56895761
    56905762                        // Throttle the scroll handler and bind this.
    56915763                        this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
     
    62356307                tagName:   'div',
    62366308                className: 'attachments-browser',
    62376309
     6310                attributes: {
     6311                        'role':      'application'
     6312                },
     6313
    62386314                initialize: function() {
    62396315                        _.defaults( this.options, {
    62406316                                filters: false,
     
    62466322
    62476323                        this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) );
    62486324                        this.controller.on( 'edit:selection', this.editSelection );
     6325
    62496326                        this.createToolbar();
     6327                        this.createUploader();
     6328                        this.createAttachments();
     6329                        // Sidebar placed after Attachments in the markup.
    62506330                        if ( this.options.sidebar ) {
    62516331                                this.createSidebar();
    62526332                        }
    6253                         this.createUploader();
    6254                         this.createAttachments();
    62556333                        this.updateContent();
    62566334
    62576335                        if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {
     
    63066384                                this.toolbar.set( 'filtersLabel', new media.view.Label({
    63076385                                        value: l10n.filterByType,
    63086386                                        attributes: {
    6309                                                 'for':  'media-attachment-filters'
     6387                                                'for': 'media-attachment-filters'
    63106388                                        },
    63116389                                        priority:   -80
    63126390                                }).render() );
     
    69106988                className: 'attachment-display-settings',
    69116989                template:  media.template('attachment-display-settings'),
    69126990
     6991                attributes: {
     6992                        'id': 'attachment-display-settings'
     6993                },
     6994
    69136995                initialize: function() {
    69146996                        var attachment = this.options.attachment;
    69156997
     
    69577039                updateLinkTo: function() {
    69587040                        var linkTo = this.model.get('link'),
    69597041                                $input = this.$('.link-to-custom'),
     7042                                $inputLabel = this.$('.link-to-custom-label'),
    69607043                                attachment = this.options.attachment;
    69617044
    69627045                        if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
    69637046                                $input.addClass( 'hidden' );
     7047                                $inputLabel.addClass( 'hidden' );
    69647048                                return;
    69657049                        }
    69667050
     
    69777061                        }
    69787062
    69797063                        $input.removeClass( 'hidden' );
     7064                        $inputLabel.removeClass( 'hidden' );
    69807065
    69817066                        // If the input is visible, focus and select its contents.
    69827067                        if ( ! isTouchDevice && $input.is(':visible') ) {
    6983                                 $input.focus()[0].select();
     7068                                // focuses the Custom URL field after uploading a new image
     7069                                // $input.focus()[0].select();
     7070                                // should focus instead the first focusable element in the
     7071                                // attachment display settings, whatever it is
     7072                                this.$( ':input' ).eq( 0 ).focus();
    69847073                        }
    69857074                }
    69867075        });
     
    70247113         */
    70257114        media.view.Attachment.Details = media.view.Attachment.extend({
    70267115                tagName:   'div',
     7116                id:        'attachment-details',
    70277117                className: 'attachment-details',
    70287118                template:  media.template('attachment-details'),
    70297119
    70307120                attributes: function() {
    70317121                        return {
    7032                                 'tabIndex':     0,
    7033                                 'data-id':      this.model.get( 'id' )
     7122                                'tabindex':        '0',
     7123                                'data-id':         this.model.get( 'id' ),
     7124                                'aria-labelledby': 'attachment-details-title'
    70347125                        };
    70357126                },
    70367127
     
    70597150
    70607151                initialFocus: function() {
    70617152                        if ( ! isTouchDevice ) {
    7062                                 this.$( ':input' ).eq( 0 ).focus();
     7153                                // focuses the attachment details first available focusable element
     7154                                // this.$( ':input' ).eq( 0 ).focus();
    70637155                        }
    70647156                },
    70657157                /**
     
    73477439                },
    73487440
    73497441                initialize: function() {
    7350                         var self = this;
     7442                        var self = this, labelText;
    73517443
    73527444                        this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
    73537445                        this.input = this.$input[0];
    73547446
     7447                        this.labelText = '<span class="screen-reader-text">' + l10n.url + '</span>';
    73557448                        this.spinner = $('<span class="spinner" />')[0];
     7449                        this.$el.prepend([ this.input, this.labelText ]);
    73567450                        this.$el.append([ this.input, this.spinner ]);
    73577451
    73587452                        this.model.on( 'change:url', this.render, this );
  • src/wp-includes/media-template.php

     
    148148
    149149        <script type="text/html" id="tmpl-media-modal">
    150150                <div class="<?php echo $class; ?>">
    151                         <a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>
     151                        <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media dialog' ); ?></span></span></button>
    152152                        <div class="media-modal-content"></div>
    153153                </div>
    154154                <div class="media-modal-backdrop"></div>
     
    264264
    265265        <script type="text/html" id="tmpl-edit-attachment-frame">
    266266                <div class="edit-media-header">
     267                        <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
    267268                        <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
    268                         <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
    269269                </div>
    270270                <div class="media-frame-title"></div>
    271271                <div class="media-frame-content"></div>
     
    272272        </script>
    273273
    274274        <script type="text/html" id="tmpl-attachment-details-two-column">
     275                <h2 id="attachment-details-title" class="screen-reader-text">
     276                        <?php _e('Attachment Details'); ?>
     277                </h2>
     278
    275279                <div class="attachment-media-view {{ data.orientation }}">
    276280                        <div class="thumbnail thumbnail-{{ data.type }}">
    277281                                <# if ( data.uploading ) { #>
     
    451455                                <# } #>
    452456                        </div>
    453457                        <# if ( data.buttons.close ) { #>
    454                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
     458                                <a class="close" href="#" title="<?php esc_attr_e('Remove'); ?>" tabindex="0" role="checkbox" aria-checked="true"><div class="media-modal-icon"></div></a>
    455459                        <# } #>
    456460                </div>
    457461                <# if ( data.buttons.check ) { #>
    458                         <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
     462                        <a class="check" href="#" tabindex="-1" role="checkbox" aria-checked="false"><div class="media-modal-icon"></div><span class="screen-reader-text"><?php esc_attr_e('Deselect'); ?></span></a>
     463                        <a class="edit-details" href="#attachment-details" tabindex="0"><div class="media-modal-icon"></div><span class="screen-reader-text"><?php esc_attr_e('Edit details'); ?></span></a>
    459464                <# } #>
    460465                <#
    461466                var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
     
    477482        </script>
    478483
    479484        <script type="text/html" id="tmpl-attachment-details">
    480                 <h3>
     485                <h3 id="attachment-details-title">
    481486                        <?php _e('Attachment Details'); ?>
    482487
    483                         <span class="settings-save-status">
     488                        <span class="settings-save-status" aria-live="assertive">
    484489                                <span class="spinner"></span>
    485490                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
    486491                        </span>
     
    657662                                <# } #>
    658663                                </select>
    659664                        </label>
    660                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
     665                        <label class="setting link-to-custom-label">
     666                                <span><?php _e( 'URL' ); ?></span>
     667                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
     668                        </label>
    661669                </div>
    662670
    663671                <# if ( 'undefined' !== typeof data.sizes ) { #>
     
    855863                                        <?php esc_attr_e('None'); ?>
    856864                                </button>
    857865                        </div>
    858                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
     866                        <label class="setting link-to-custom-label">
     867                                <span><?php _e( 'Enter Custom URL' ); ?></span>
     868                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
     869                        </label>
    859870                </div>
    860871        </script>
    861872
     
    947958                                        <# } #>
    948959
    949960                                        <div class="setting link-to">
    950                                                 <span><?php _e('Link To'); ?></span>
    951                                                 <select data-setting="link">
    952                                                 <# if ( data.attachment ) { #>
    953                                                         <option value="file">
    954                                                                 <?php esc_attr_e('Media File'); ?>
    955                                                         </option>
    956                                                         <option value="post">
    957                                                                 <?php esc_attr_e('Attachment Page'); ?>
    958                                                         </option>
    959                                                 <# } else { #>
    960                                                         <option value="file">
    961                                                                 <?php esc_attr_e('Image URL'); ?>
    962                                                         </option>
    963                                                 <# } #>
    964                                                         <option value="custom">
    965                                                                 <?php esc_attr_e('Custom URL'); ?>
    966                                                         </option>
    967                                                         <option value="none">
    968                                                                 <?php esc_attr_e('None'); ?>
    969                                                         </option>
    970                                                 </select>
    971                                                 <input type="text" class="link-to-custom" data-setting="linkUrl" />
     961                                                <label class="setting">
     962                                                        <span><?php _e('Link To'); ?></span>
     963                                                        <select data-setting="link">
     964                                                        <# if ( data.attachment ) { #>
     965                                                                <option value="file">
     966                                                                        <?php esc_attr_e('Media File'); ?>
     967                                                                </option>
     968                                                                <option value="post">
     969                                                                        <?php esc_attr_e('Attachment Page'); ?>
     970                                                                </option>
     971                                                        <# } else { #>
     972                                                                <option value="file">
     973                                                                        <?php esc_attr_e('Image URL'); ?>
     974                                                                </option>
     975                                                        <# } #>
     976                                                                <option value="custom">
     977                                                                        <?php esc_attr_e('Custom URL'); ?>
     978                                                                </option>
     979                                                                <option value="none">
     980                                                                        <?php esc_attr_e('None'); ?>
     981                                                                </option>
     982                                                        </select>
     983                                                </label>
     984                                                <label class="setting link-to-custom-label">
     985                                                        <span><?php _e( 'URL' ); ?></span>
     986                                                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
     987                                                </label>
    972988                                        </div>
    973989                                        <div class="advanced-section">
    974990                                                <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>