diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 6ac62a5506..3f55f74c82 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -485,13 +485,14 @@ border color while dragging a file over the uploader drop area */ } .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors { - font-size: 0; - top: 0; - right: -6px; + top: -10px; + right: -14px; + padding: 10px; } .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before { content: "\f153"; + display: block; font: normal 16px/1 dashicons; color: #bbb; } @@ -636,11 +637,6 @@ border color while dragging a file over the uploader drop area */ font-size: 22px; } -.upload-php .media-modal-close .media-modal-icon { - margin: 14px; - width: 22px; -} - .upload-php .media-modal-close, .edit-attachment-frame .edit-media-header .left, .edit-attachment-frame .edit-media-header .right { @@ -693,6 +689,8 @@ border color while dragging a file over the uploader drop area */ border-color: #ccc; color: #000; outline: none; + -webkit-box-shadow: none; + box-shadow: none; } .upload-php .media-modal-close:focus .media-modal-icon:before, diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 99d5a6959a..b34f91a502 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -100,6 +100,10 @@ TABLE OF CONTENTS: outline: none; } +.ie8 .wp-core-ui .button-link:focus { + outline: #5b9dd9 solid 1px; +} + .wp-core-ui .button.hidden { display: none; } @@ -136,6 +140,13 @@ TABLE OF CONTENTS: vertical-align: baseline; } +.wp-core-ui .button-link { + border: 0; + background: none; + outline: none; + cursor: pointer; +} + .wp-core-ui .button.hover, .wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover, @@ -149,7 +160,8 @@ TABLE OF CONTENTS: .wp-core-ui .button.focus, .wp-core-ui .button:focus, -.wp-core-ui .button-secondary:focus { +.wp-core-ui .button-secondary:focus, +.wp-core-ui .button-link:focus { -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index f85e91fa38..8db350689d 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -153,11 +153,11 @@ .media-modal-close { position: absolute; - text-decoration: none; - top: 10px; - right: 10px; - width: 30px; - height: 30px; + top: 0; + right: 0; + width: 50px; + height: 50px; + padding: 0; 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; @@ -169,12 +169,7 @@ } .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 { @@ -209,7 +204,8 @@ -webkit-font-smoothing: subpixel-antialiased; } -.media-modal-icon { +/* higher specificity */ +.wp-core-ui .media-modal-icon { background-image: url(../images/uploader-icons.png); background-repeat: no-repeat; } @@ -935,7 +931,7 @@ position: absolute; } -.wp-core-ui .attachment .close { +.wp-core-ui .attachment-close { display: block; position: absolute; top: 5px; @@ -943,36 +939,24 @@ height: 22px; width: 22px; padding: 0; - font-size: 20px; - line-height: 20px; - text-align: center; - text-decoration: none; - color: #464646; background-color: #fff; background-position: -96px 4px; - border-width: 0; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 ); - -webkit-transition-duration: none; - transition-duration: none; - -webkit-transition-property: none; - transition-property: none; } -.wp-core-ui .attachment a.close:hover, -.wp-core-ui .attachment a.close:focus { - -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 ); +.wp-core-ui .attachment-close:hover, +.wp-core-ui .attachment-close:focus { background-position: -36px 4px; - } .wp-core-ui .attachment .check { display: none; height: 24px; width: 24px; + padding: 0; position: absolute; z-index: 10; top: 0; @@ -983,14 +967,15 @@ box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); } -.wp-core-ui .attachment .check div { +.wp-core-ui .attachment .check .media-modal-icon { + display: block; background-position: -1px 0; height: 15px; width: 15px; margin: 5px; } -.wp-core-ui .attachment .check:hover div { +.wp-core-ui .attachment .check:hover .media-modal-icon { background-position: -40px 0; } @@ -1010,14 +995,14 @@ 0 0 0 2px #1e8cbe; } -.wp-core-ui .attachment.details .check div, -.wp-core-ui .media-frame.mode-grid .attachment.selected .check div { +.wp-core-ui .attachment.details .check .media-modal-icon, +.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon { background-position: -21px 0; } -.wp-core-ui .attachment.details .check:hover div, -.wp-core-ui .attachment.selected .check:focus div, -.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div { +.wp-core-ui .attachment.details .check:hover .media-modal-icon, +.wp-core-ui .attachment.selected .check:focus .media-modal-icon, +.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon { background-position: -60px 0; } @@ -1391,34 +1376,35 @@ font-weight: bold; } -.media-selection .selection-info a { - display: block; +.media-selection .button-link { float: left; padding: 1px 8px; margin: 1px 8px 1px -8px; line-height: 16px; - text-decoration: none; border-right: 1px solid #dfdfdf; color: #21759B; } -.media-selection .selection-info a:hover { +.media-selection .button-link:hover, +.media-selection .button-link:focus { background: #21759B; color: #fff; border-color: transparent; } -.media-selection .selection-info a:last-child { +.media-selection .button-link:last-child { border-right: 0; margin-right: 0; } -.media-selection .selection-info .clear-selection { +.selection-info .clear-selection { color: red; } -.media-selection .selection-info .clear-selection:hover { +.selection-info .clear-selection:hover, +.selection-info .clear-selection:focus { background: red; + color: #fff; } .media-selection .selection-view { @@ -1640,12 +1626,17 @@ .media-modal .delete-attachment, .media-modal .trash-attachment, .media-modal .untrash-attachment { + display: inline; + padding: 0; color: #bc0b0b; } .media-modal .delete-attachment:hover, +.media-modal .delete-attachment:focus, .media-modal .trash-attachment:hover, -.media-modal .untrash-attachment:hover { +.media-modal .trash-attachment:focus, +.media-modal .untrash-attachment:hover, +.media-modal .untrash-attachment:focus { color: red; } @@ -1891,9 +1882,9 @@ } .image-details .advanced-toggle { + padding: 0; color: #666; - text-decoration: none; - display: block; + text-transform: uppercase; } .image-details .advanced-toggle:after { diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 3b215a0984..44e1df2c84 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -2625,10 +2625,8 @@ Attachment = View.extend({ 'change [data-setting] input': 'updateSetting', 'change [data-setting] select': 'updateSetting', 'change [data-setting] textarea': 'updateSetting', - 'click .close': 'removeFromLibrary', + 'click .attachment-close': 'removeFromLibrary', 'click .check': 'checkClickHandler', - 'click a': 'preventDefault', - 'keydown .close': 'removeFromLibrary', 'keydown': 'toggleSelectionHandler' }, @@ -2756,8 +2754,8 @@ Attachment = View.extend({ toggleSelectionHandler: function( event ) { var method; - // Don't do anything inside inputs. - if ( 'INPUT' === event.target.nodeName ) { + // Don't do anything inside inputs and on the attachment check and remove buttons. + if ( 'INPUT' === event.target.nodeName || 'BUTTON' === event.target.nodeName ) { return; } @@ -2942,12 +2940,6 @@ Attachment = View.extend({ details = selection.single(); this.$el.toggleClass( 'details', details === this.model ); }, - /** - * @param {Object} event - */ - preventDefault: function( event ) { - event.preventDefault(); - }, /** * @param {string} size * @returns {Object} @@ -3197,7 +3189,14 @@ Details = Attachment.extend({ initialFocus: function() { if ( ! wp.media.isTouchDevice ) { - this.$( ':input' ).eq( 0 ).focus(); + /* + Previously focused the first ':input' (the readonly URL text field). + Since the first ':input' is now a button (delete/trash): when pressing + spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment + as soon as focus is moved. Explicitly target the first text field for now. + @todo change initial focus logic, also for accessibility. + */ + this.$( 'input[type="text"]' ).eq( 0 ).focus(); } }, /** diff --git a/src/wp-includes/js/media/views/attachment.js b/src/wp-includes/js/media/views/attachment.js index 4744d0cb78..c8d83656d0 100644 --- a/src/wp-includes/js/media/views/attachment.js +++ b/src/wp-includes/js/media/views/attachment.js @@ -33,10 +33,8 @@ Attachment = View.extend({ 'change [data-setting] input': 'updateSetting', 'change [data-setting] select': 'updateSetting', 'change [data-setting] textarea': 'updateSetting', - 'click .close': 'removeFromLibrary', + 'click .attachment-close': 'removeFromLibrary', 'click .check': 'checkClickHandler', - 'click a': 'preventDefault', - 'keydown .close': 'removeFromLibrary', 'keydown': 'toggleSelectionHandler' }, @@ -164,8 +162,8 @@ Attachment = View.extend({ toggleSelectionHandler: function( event ) { var method; - // Don't do anything inside inputs. - if ( 'INPUT' === event.target.nodeName ) { + // Don't do anything inside inputs and on the attachment check and remove buttons. + if ( 'INPUT' === event.target.nodeName || 'BUTTON' === event.target.nodeName ) { return; } @@ -350,12 +348,6 @@ Attachment = View.extend({ details = selection.single(); this.$el.toggleClass( 'details', details === this.model ); }, - /** - * @param {Object} event - */ - preventDefault: function( event ) { - event.preventDefault(); - }, /** * @param {string} size * @returns {Object} diff --git a/src/wp-includes/js/media/views/attachment/details.js b/src/wp-includes/js/media/views/attachment/details.js index 5423a10744..7d385bebda 100644 --- a/src/wp-includes/js/media/views/attachment/details.js +++ b/src/wp-includes/js/media/views/attachment/details.js @@ -49,7 +49,14 @@ Details = Attachment.extend({ initialFocus: function() { if ( ! wp.media.isTouchDevice ) { - this.$( ':input' ).eq( 0 ).focus(); + /* + Previously focused the first ':input' (the readonly URL text field). + Since the first ':input' is now a button (delete/trash): when pressing + spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment + as soon as focus is moved. Explicitly target the first text field for now. + @todo change initial focus logic, also for accessibility. + */ + this.$( 'input[type="text"]' ).eq( 0 ).focus(); } }, /** diff --git a/src/wp-includes/js/mediaelement/wp-mediaelement.css b/src/wp-includes/js/mediaelement/wp-mediaelement.css index ae90c8ddb8..daa659d52b 100644 --- a/src/wp-includes/js/mediaelement/wp-mediaelement.css +++ b/src/wp-includes/js/mediaelement/wp-mediaelement.css @@ -106,12 +106,16 @@ } .media-embed-details .setting p, -.media-embed-details .setting a { +.media-embed-details .setting .remove-setting { color: #a00; font-size: 10px; text-transform: uppercase; } +.media-embed-details .setting .remove-setting { + padding: 0; +} + .media-embed-details .setting a:hover { color: #f00; } diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 3156f7bbac..171f560c2c 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -166,7 +166,7 @@ function wp_print_media_templates() {