Index: src/wp-admin/css/media.css =================================================================== --- src/wp-admin/css/media.css (revision 30575) +++ src/wp-admin/css/media.css (working copy) @@ -563,7 +563,6 @@ } .media-frame.mode-grid .media-toolbar select { - margin: 0 10px 0 0; font-size: 14px; } @@ -628,17 +627,17 @@ overflow: hidden; } -.upload-php .media-modal-close .media-modal-icon:before { +.media-modal-close .media-modal-icon:before { content: '\f335'; - font-size: 22px; + font: normal 20px/1 'dashicons'; + speak: none; + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #666; } -.upload-php .media-modal-close .media-modal-icon { - margin: 14px; - width: 22px; -} - -.upload-php .media-modal-close, +.media-modal-close, .edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .right { cursor: pointer; @@ -648,18 +647,27 @@ width: 50px; padding: 0; position: absolute; + z-index: 1000; text-align: center; border: 0; border-left: 1px solid #ddd; + outline: 0; -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out; } -.upload-php .media-modal-close { +.media-modal-close { top: 0; right: 0; } +.library .media-modal-close { + border-left: 0; +} +.media-modal-close span.media-modal-icon { + background-image: none; +} + .edit-attachment-frame .edit-media-header .left { right: 102px; } @@ -680,8 +688,8 @@ font-weight: 300; } -.upload-php .media-modal-close:hover, -.upload-php .media-modal-close:focus, +.media-modal-close:hover, +.media-modal-close:focus, .edit-attachment-frame .edit-media-header .left:hover, .edit-attachment-frame .edit-media-header .right:hover, .edit-attachment-frame .edit-media-header .left:focus, Index: src/wp-includes/css/media-views.css =================================================================== --- src/wp-includes/css/media-views.css (revision 30575) +++ src/wp-includes/css/media-views.css (working copy) @@ -100,7 +100,8 @@ color: #a9a9a9; } -.media-frame .hidden { +.media-frame .hidden, +.media-frame label.setting.hidden { display: none; } @@ -150,50 +151,6 @@ z-index: 559900; } -.media-modal-close { - position: absolute; - text-decoration: none; - top: 10px; - right: 10px; - width: 30px; - height: 30px; - z-index: 1000; - -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; - transition: color .1s ease-in-out, background .1s ease-in-out; -} - -.media-modal-close:active { - -webkit-box-shadow: none; - box-shadow: none; -} - -.media-modal-close span.media-modal-icon { - display: block; - margin-top: 5px; - width: 30px; - height: 15px; - background-image: none; - text-align: center; -} - -.media-modal-close .media-modal-icon:before { - content: '\f158'; - font: normal 20px/1 'dashicons'; - speak: none; - vertical-align: middle; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #666; -} - -.media-modal-close:hover .media-modal-icon:before { - color: #2ea2cc; -} - -.media-modal-close:active { - outline: 0; -} - .media-modal-content { position: absolute; top: 0; @@ -730,8 +687,9 @@ * Attachment Browser Filters */ .media-frame select.attachment-filters { - margin-top: 11px; + margin-top: 10px; margin-right: 10px; + vertical-align: top; } /** @@ -738,7 +696,7 @@ * Search */ .media-frame .search { - margin-top: 11px; + margin-top: 10px; padding: 4px; font-size: 13px; color: #464646; @@ -929,7 +887,6 @@ position: absolute; top: 5px; right: 5px; - height: 22px; width: 22px; padding: 0; font-size: 20px; @@ -938,7 +895,6 @@ text-decoration: none; color: #464646; background-color: #fff; - background-position: -96px 4px; border-width: 0; -webkit-border-radius: 3px; border-radius: 3px; @@ -950,15 +906,20 @@ transition-property: none; } -.attachment a.close:hover, -.attachment a.close:focus { +.attachment .close .media-modal-icon { + height: 22px; + background-position: -96px 4px; +} + +.attachment .close:hover .media-modal-icon, +.attachment .close:focus .media-modal-icon { -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); background-position: -36px 4px; - } -.attachment .check { +.attachment .check, +.attachment .edit-details { display: none; height: 24px; width: 24px; @@ -968,11 +929,29 @@ right: 0; outline: none; background: #eee; + text-decoration: none; + color: #222; -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); } -.attachment .check div { +.attachment .edit-details { + top: 30px; +} + +.attachment .edit-details .media-modal-icon { + background-image: none; +} +.attachment .edit-details .media-modal-icon:before { + content: "\f464"; + font: normal 20px/24px 'dashicons'; + speak: none; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.attachment .check .media-modal-icon { background-position: -1px 0; height: 15px; width: 15px; @@ -979,17 +958,21 @@ margin: 5px; } -.attachment .check:hover div { +.attachment .check:hover .media-modal-icon { background-position: -40px 0; } -.attachment.selected .check { +.attachment.selected .check, +.attachment.selected .edit-details { display: block; } .attachment.details .check, .attachment.selected .check:focus, +.attachment.details .edit-details, +.attachment.selected .edit-details:focus, .media-frame.mode-grid .attachment.selected .check { + color: #fff; background-color: #1e8cbe; -webkit-box-shadow: 0 0 0 1px #fff, @@ -999,17 +982,27 @@ 0 0 0 2px #1e8cbe; } -.attachment.details .check div, -.media-frame.mode-grid .attachment.selected .check div { +.attachment.details .check .media-modal-icon, +.media-frame.mode-grid .attachment.selected .check .media-modal-icon { background-position: -21px 0; } -.attachment.details .check:hover div, -.attachment.selected .check:focus div, -.media-frame.mode-grid .attachment.selected .check:hover div { +.attachment.details .check:hover .media-modal-icon, +.attachment.selected .check:focus .media-modal-icon, +.media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon { background-position: -60px 0; } +.attachment.selected .edit-details:hover { + color: #000; +} + +.attachment.selected .edit-details:focus, +.attachment.details .edit-details:hover, +.attachment.details .edit-details:focus { + color: #fff; +} + .media-frame .attachment .describe { position: relative; display: block; @@ -1044,7 +1037,7 @@ .attachments-browser .media-toolbar-primary > .media-button-group, .attachments-browser .media-toolbar-secondary > .media-button, .attachments-browser .media-toolbar-secondary > .media-button-group { - margin: 11px 0; + margin: 10px 0; } .attachments-browser .attachments { @@ -1095,7 +1088,7 @@ .attachments-browser .instructions { display: inline-block; - margin-top: 16px; + margin-top: 15px; line-height: 18px; font-size: 13px; color: #666; @@ -1535,7 +1528,7 @@ line-height: 18px; color: #666; border-bottom: 1px solid #ddd; - padding-bottom: 11px; + padding-bottom: 10px; } .attachment-info .filename { @@ -2209,7 +2202,7 @@ .media-frame:not(.hide-menu) .media-frame-title .dashicons { display: inline-block; - line-height: 50px; + line-height: 56px; } .media-frame:not(.hide-menu) .media-frame-title h1 { @@ -2359,7 +2352,7 @@ } .media-modal .attachments-browser .media-toolbar .attachment-filters { - margin: 11px 0 0; + margin: 10px 0 0; height: auto; max-width: 65%; max-width: -webkit-calc(100% - 38px); @@ -2472,11 +2465,6 @@ max-width: 90px; } - .media-modal-close { - top: 5px; - right: 5px; - } - .media-modal .media-frame-title { height: 40px; } Index: src/wp-includes/js/media-views.js =================================================================== --- src/wp-includes/js/media-views.js (revision 30575) +++ src/wp-includes/js/media-views.js (working copy) @@ -766,6 +766,12 @@ this.frame.on( 'content:activate', this.saveContentMode, this ); this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) ); } + + if ( this.frame.modal ) { + this.frame.modal.$el.addClass( 'library' ); + } else { + this.frame.$el.addClass( 'library' ); + } }, /** @@ -2249,6 +2255,7 @@ template: media.template('media-frame'), regions: ['menu','title','content','toolbar','router'], + // In the responsive view toggles the Menu visibility. events: { 'click div.media-frame-title h1': 'toggleMenu' }, @@ -2329,7 +2336,10 @@ createTitle: function( title ) { title.view = new media.View({ controller: this, - tagName: 'h1' + tagName: 'h1', + attributes: { + 'id': 'media-frame-title' + } }); }, /** @@ -3540,7 +3550,9 @@ template: media.template('media-modal'), attributes: { - tabindex: 0 + 'tabindex': '0', + 'role': 'dialog', + 'aria-labelledby': 'media-frame-title', }, events: { @@ -4618,9 +4630,11 @@ * @augments Backbone.View */ media.view.Button = media.View.extend({ - tagName: 'a', + tagName: 'button', className: 'media-button', - attributes: { href: '#' }, + attributes: { + 'type': 'button' + }, events: { 'click': 'click' @@ -4682,9 +4696,6 @@ * @param {Object} event */ click: function( event ) { - if ( '#' === this.attributes.href ) { - event.preventDefault(); - } if ( this.options.click && ! this.model.get('disabled') ) { this.options.click.apply( this, arguments ); @@ -5082,10 +5093,10 @@ attributes: function() { return { - 'tabIndex': 0, - 'role': 'checkbox', + 'tabindex': '0', + 'role': 'option', 'aria-label': this.model.get( 'title' ), - 'aria-checked': false, + 'aria-selected': false, 'data-id': this.model.get( 'id' ) }; }, @@ -5097,9 +5108,12 @@ 'change [data-setting] select': 'updateSetting', 'change [data-setting] textarea': 'updateSetting', 'click .close': 'removeFromLibrary', - 'click .check': 'checkClickHandler', + 'click .check': 'checkHandler', + 'click .edit-details': 'focusDetails', 'click a': 'preventDefault', 'keydown .close': 'removeFromLibrary', + 'keydown .check': 'checkHandler', + 'keydown .edit-details': 'focusDetails', 'keydown': 'toggleSelectionHandler' }, @@ -5265,6 +5279,8 @@ method = 'toggle'; } + event.preventDefault(); + this.toggleSelection({ method: method }); @@ -5379,12 +5395,13 @@ return; } - // Add 'selected' class to model, set aria-checked to true. - this.$el.addClass( 'selected' ).attr( 'aria-checked', true ); - // Make the checkbox tabable, except in media grid (bulk select mode). - if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) { - this.$( '.check' ).attr( 'tabindex', '0' ); - } + // Add 'selected' class to model, set aria-selected to true. + this.$el.addClass( 'selected' ).attr( 'aria-selected', true ); + // Make the checkbox tabable, except in media grid (bulk select mode). + // @todo why exclude bulk select mode? + // if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) { + this.$( '.check' ).attr({ 'tabindex': '0', 'aria-checked': 'true' }); + // } }, /** * @param {Backbone.Model} model @@ -5399,8 +5416,8 @@ if ( ! selection || ( collection && collection !== selection ) ) { return; } - this.$el.removeClass( 'selected' ).attr( 'aria-checked', false ) - .find( '.check' ).attr( 'tabindex', '-1' ); + this.$el.removeClass( 'selected' ).attr( 'aria-selected', false ) + .find( '.check' ).attr({ 'tabindex': '-1', 'aria-checked': 'false' }); }, /** * @param {Backbone.Model} model @@ -5541,6 +5558,11 @@ * @param {Object} event */ removeFromLibrary: function( event ) { + + var that = this.$el, + prev = that.prev(), + menuActive = $( '.media-menu-item.active' ); + // Catch enter and space events if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { return; @@ -5549,6 +5571,17 @@ // Stop propagation so the model isn't selected. event.stopPropagation(); + // Move focus to previous element or fallback elements + // after image is removed from selection + if ( prev.length ) { + prev.focus(); + } else if ( menuActive.length ) { + menuActive.focus(); + } else { + // Keep focus inside media modal + this.controller.modal.focusManager.focus(); + } + this.collection.remove( this.model ); }, @@ -5559,11 +5592,19 @@ * @param {[type]} event [description] * @return {[type]} [description] */ - checkClickHandler: function ( event ) { + checkHandler: function ( event ) { + + // Catch enter and space events + if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { + return; + } + var selection = this.options.selection; if ( ! selection ) { return; } + + event.preventDefault(); event.stopPropagation(); if ( selection.where( { id: this.model.get( 'id' ) } ).length ) { selection.remove( this.model ); @@ -5572,6 +5613,35 @@ } else { selection.add( this.model ); } + }, + + /** + * @param {Object} event + */ + focusDetails: function ( event ) { + + var details = $( '#attachment-details' ), + displaySettings = $( '.attachment-display-settings' ), + detailsBgColor = details.css( 'background-color' ), + mediaSidebar = $( '.media-sidebar' ), + mediaSidebarBgColor = mediaSidebar.css( 'background-color' ); + + // Catch enter and space events + if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { + return; + } + + var selection = this.options.selection; + if ( ! selection ) { + return; + } + + event.preventDefault(); + event.stopPropagation(); + + details.focus(); + // details.add( displaySettings ).css({ 'background-color': "#d5edf6" }).animate({ 'background-color': detailsBgColor }, 1000 ); + mediaSidebar.css({ 'background-color': "#d5edf6" }).animate({ 'background-color': mediaSidebarBgColor }, 1000 ); } }); @@ -5649,7 +5719,9 @@ className: 'attachments', attributes: { - tabIndex: -1 + 'tabindex': '-1', + 'role': 'listbox', + 'aria-live': 'polite' }, initialize: function() { @@ -5685,7 +5757,7 @@ this.collection.on( 'reset', this.render, this ); - this.listenTo( this.controller, 'library:selection:add', this.attachmentFocus ); + this.listenTo( this.controller, 'library:selection:add', this.attachmentFocus ); // Throttle the scroll handler and bind this. this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); @@ -6235,6 +6307,10 @@ tagName: 'div', className: 'attachments-browser', + attributes: { + 'role': 'application' + }, + initialize: function() { _.defaults( this.options, { filters: false, @@ -6246,12 +6322,14 @@ this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) ); this.controller.on( 'edit:selection', this.editSelection ); + this.createToolbar(); + this.createUploader(); + this.createAttachments(); + // Sidebar placed after Attachments in the markup. if ( this.options.sidebar ) { this.createSidebar(); } - this.createUploader(); - this.createAttachments(); this.updateContent(); if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) { @@ -6306,7 +6384,7 @@ this.toolbar.set( 'filtersLabel', new media.view.Label({ value: l10n.filterByType, attributes: { - 'for': 'media-attachment-filters' + 'for': 'media-attachment-filters' }, priority: -80 }).render() ); @@ -6910,6 +6988,10 @@ className: 'attachment-display-settings', template: media.template('attachment-display-settings'), + attributes: { + 'id': 'attachment-display-settings' + }, + initialize: function() { var attachment = this.options.attachment; @@ -6957,10 +7039,12 @@ updateLinkTo: function() { var linkTo = this.model.get('link'), $input = this.$('.link-to-custom'), + $inputLabel = this.$('.link-to-custom-label'), attachment = this.options.attachment; if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) { $input.addClass( 'hidden' ); + $inputLabel.addClass( 'hidden' ); return; } @@ -6977,10 +7061,15 @@ } $input.removeClass( 'hidden' ); + $inputLabel.removeClass( 'hidden' ); // If the input is visible, focus and select its contents. if ( ! isTouchDevice && $input.is(':visible') ) { - $input.focus()[0].select(); + // focuses the Custom URL field after uploading a new image + // $input.focus()[0].select(); + // should focus instead the first focusable element in the + // attachment display settings, whatever it is + this.$( ':input' ).eq( 0 ).focus(); } } }); @@ -7024,13 +7113,15 @@ */ media.view.Attachment.Details = media.view.Attachment.extend({ tagName: 'div', + id: 'attachment-details', className: 'attachment-details', template: media.template('attachment-details'), attributes: function() { return { - 'tabIndex': 0, - 'data-id': this.model.get( 'id' ) + 'tabindex': '0', + 'data-id': this.model.get( 'id' ), + 'aria-labelledby': 'attachment-details-title' }; }, @@ -7059,7 +7150,8 @@ initialFocus: function() { if ( ! isTouchDevice ) { - this.$( ':input' ).eq( 0 ).focus(); + // focuses the attachment details first available focusable element + // this.$( ':input' ).eq( 0 ).focus(); } }, /** @@ -7347,12 +7439,14 @@ }, initialize: function() { - var self = this; + var self = this, labelText; this.$input = $('').val( this.model.get('url') ); this.input = this.$input[0]; + this.labelText = '' + l10n.url + ''; this.spinner = $('