In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links.

Props afercia.
Fixes #26550.


git-svn-id: https://develop.svn.wordpress.org/trunk@32952 602fd350-edb4-49c9-b593-d223f7449a82

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: -10px;
-	top: 0;
+	right: -14px;
-	right: -6px;
+	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,

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);

src/wp-includes/css/media-views.css

@@ -153,11 +153,11 @@
 
 .media-modal-close {
 	position: absolute;
-	text-decoration: none;
+	top: 0;
-	top: 10px;
+	right: 0;
-	right: 10px;
+	width: 50px;
-	width: 30px;
+	height: 50px;
-	height: 30px;
+	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-close:hover,
-.wp-core-ui .attachment a.close:focus {
+.wp-core-ui .attachment-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 );
 	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 .attachment.details .check .media-modal-icon,
-.wp-core-ui .media-frame.mode-grid .attachment.selected .check div {
+.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.details .check:hover .media-modal-icon,
-.wp-core-ui .attachment.selected .check:focus div,
+.wp-core-ui .attachment.selected .check:focus .media-modal-icon,
-.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div {
+.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 {
+.media-selection .button-link {
-	display: block;
 	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;
+	text-transform: uppercase;
-	display: block;
 }
 
 .image-details .advanced-toggle:after {

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.
+		// Don't do anything inside inputs and on the attachment check and remove buttons.
-		if ( 'INPUT' === event.target.nodeName ) {
+		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();
 		}
 	},
 	/**

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.
+		// Don't do anything inside inputs and on the attachment check and remove buttons.
-		if ( 'INPUT' === event.target.nodeName ) {
+		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}

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();
 		}
 	},
 	/**

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;
 }

src/wp-includes/media-template.php

@@ -166,7 +166,7 @@ function wp_print_media_templates() {
 
 	<script type="text/html" id="tmpl-media-modal">
 		<div class="<?php echo $class; ?>">
-			<a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>
+			<button type="button" class="button-link media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
 			<div class="media-modal-content"></div>
 		</div>
 		<div class="media-modal-backdrop"></div>
@@ -261,7 +261,7 @@ function wp_print_media_templates() {
 
 	<script type="text/html" id="tmpl-uploader-status">
 		<h3><?php _e( 'Uploading' ); ?></h3>
-		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
+		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
 
 		<div class="media-progress-bar"><div></div></div>
 		<div class="upload-details">
@@ -434,12 +434,12 @@ function wp_print_media_templates() {
 				<# if ( ! data.uploading && data.can.remove ) { #> |
 					<?php if ( MEDIA_TRASH ): ?>
 						<# if ( 'trash' === data.status ) { #>
-							<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
+							<button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
 						<# } else { #>
-							<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
+							<button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
 						<# } #>
 					<?php else: ?>
-						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
+						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
 					<?php endif; ?>
 				<# } #>
 			</div>
@@ -470,11 +470,11 @@ function wp_print_media_templates() {
 				<# } #>
 			</div>
 			<# if ( data.buttons.close ) { #>
-				<a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
+				<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
 			<# } #>
 		</div>
 		<# if ( data.buttons.check ) { #>
-			<a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
+			<button type="button" class="button-link check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
 		<# } #>
 		<#
 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
@@ -536,12 +536,12 @@ function wp_print_media_templates() {
 				<# if ( ! data.uploading && data.can.remove ) { #>
 					<?php if ( MEDIA_TRASH ): ?>
 					<# if ( 'trash' === data.status ) { #>
-						<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
+						<button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
 					<# } else { #>
-						<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
+						<button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
 					<# } #>
 					<?php else: ?>
-						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
+						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
 					<?php endif; ?>
 				<# } #>
 
@@ -595,10 +595,10 @@ function wp_print_media_templates() {
 		<div class="selection-info">
 			<span class="count"></span>
 			<# if ( data.editable ) { #>
-				<a class="edit-selection" href="#"><?php _e( 'Edit Selection' ); ?></a>
+				<button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button>
 			<# } #>
 			<# if ( data.clearable ) { #>
-				<a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
+				<button type="button" class="button-link clear-selection"><?php _e( 'Clear' ); ?></button>
 			<# } #>
 		</div>
 		<div class="selection-view"></div>
@@ -991,7 +991,7 @@ function wp_print_media_templates() {
 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
 					</div>
 					<div class="advanced-section">
-						<h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
+						<h3><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h3>
 						<div class="advanced-settings hidden">
 							<div class="advanced-image">
 								<label class="setting title-text">
@@ -1048,7 +1048,7 @@ function wp_print_media_templates() {
 				<label class="setting">
 					<span>SRC</span>
 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
-					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
+					<button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
 				</label>
 				<# } #>
 				<?php
@@ -1062,7 +1062,7 @@ function wp_print_media_templates() {
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>
 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
-					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
+					<button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
 				</label>
 				<# } #>
 				<?php endforeach ?>
@@ -1131,7 +1131,7 @@ function wp_print_media_templates() {
 				<label class="setting">
 					<span>SRC</span>
 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
-					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
+					<button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
 				</label>
 				<# } #>
 				<?php foreach ( $video_types as $type ):
@@ -1143,7 +1143,7 @@ function wp_print_media_templates() {
 				<label class="setting">
 					<span><?php echo strtoupper( $type ) ?></span>
 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
-					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
+					<button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
 				</label>
 				<# } #>
 				<?php endforeach ?>
@@ -1164,7 +1164,7 @@ function wp_print_media_templates() {
 				<label class="setting">
 					<span><?php _e( 'Poster Image' ); ?></span>
 					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
-					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
+					<button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
 				</label>
 				<# } #>
 				<div class="setting preload">
@@ -1196,7 +1196,7 @@ function wp_print_media_templates() {
 							content += track.outerHTML; #>
 						<p>
 							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
-							<a class="remove-setting remove-track"><?php _e( 'Remove' ); ?></a>
+							<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove', 'media' ); ?></button>
 						</p>
 						<# } ); #>
 					<# } else { #>