Accessibility: Improve and modernize user interface controls. Third part: allow buttons and form controls to scale with text.

Props kjellr, abrightclearweb, audrasjb.
Fixes #47477.


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

src/wp-admin/css/forms.css

@@ -64,7 +64,7 @@ input[type="url"] {
 
 /* Vertically align the number selector with the input. */
 input[type="number"] {
-	height: 28px;
+	min-height: 28px;
 	line-height: 1;
 }
 
@@ -307,12 +307,37 @@ input[type="radio"].disabled:checked:before {
   2.0 - Forms
 ------------------------------------------------------------------------------*/
 
-
+/* Select styles are based on the default button in buttons.css */
 .wp-admin select {
-	padding: 2px;
+	color: #555;
-	line-height: 2;
+	border-color: #7e8993;
-	height: 28px;
+	box-shadow: none;
+	border-radius: 3px;
+	padding: 2px 24px 2px 8px;
+	min-height: 28px;
 	vertical-align: middle;
+	-webkit-appearance: none;
+	/* The SVG is arrow-down-alt2 from Dashicons. */
+	background: #f7f7f7 url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 4px top 50%;
+	background-size: 16px 16px;
+}
+
+.wp-admin select:hover {
+	background-color: #f3f5f6;
+	color: #007cba;
+}
+
+.wp-admin select:focus {
+	background-color: #f3f5f6;
+	border-color: #007cba;
+	color: #016087;
+	box-shadow: 0 0 0 1px #007cba;
+}
+
+.wp-admin select:active {
+	background-color: #eee;
+	border-color: #999;
+	box-shadow: none;
 }
 
 .wp-admin .button-cancel {
@@ -412,15 +437,15 @@ input[type="number"].tiny-text {
 .tablenav .actions select {
 	float: left;
 	margin-right: 6px;
-	max-width: 200px;
+	max-width: 12.5rem;
 }
 
 .ie8 .tablenav .actions select {
-	width: 155px;
+	width: 9.6875rem;
 }
 
 .ie8 .tablenav .actions select#cat {
-	width: 200px;
+	width: 12.5rem;
 }
 
 #timezone_string option {
@@ -1248,7 +1273,7 @@ table.form-table td .updated p {
 	}
 
 	input[type="number"] {
-		height: 40px;
+		min-height: 40px;
 	}
 
 	input.code {
@@ -1302,7 +1327,7 @@ table.form-table td .updated p {
 	}
 
 	#wpbody select {
-		height: 36px;
+		min-height: 36px;
 		font-size: 16px;
 	}
 
@@ -1372,7 +1397,7 @@ table.form-table td .updated p {
 	}
 
 	#wpbody .form-table td select {
-		height: 40px;
+		min-height: 40px;
 	}
 
 	input[type="text"].small-text,

src/wp-includes/css/buttons.css

@@ -47,9 +47,9 @@ TABLE OF CONTENTS:
 	text-decoration: none;
 	font-size: 13px;
 	line-height: 2;
-	height: 28px;
+	min-height: 28px;
 	margin: 0;
-	padding: 0 10px 1px;
+	padding: 0 10px;
 	cursor: pointer;
 	border-width: 1px;
 	border-style: solid;
@@ -71,14 +71,14 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button.button-large,
 .wp-core-ui .button-group.button-large .button {
-	height: 30px;
+	min-height: 30px;
 	line-height: 2.15384615;
 	padding: 0 12px 2px;
 }
 
 .wp-core-ui .button.button-small,
 .wp-core-ui .button-group.button-small .button {
-	height: 24px;
+	min-height: 24px;
 	line-height: 2;
 	padding: 0 8px 1px;
 	font-size: 11px;
@@ -87,7 +87,7 @@ TABLE OF CONTENTS:
 .wp-core-ui .button.button-hero,
 .wp-core-ui .button-group.button-hero .button {
 	font-size: 14px;
-	height: 46px;
+	min-height: 46px;
 	line-height: 3.14285714;
 	padding: 0 36px;
 }
@@ -348,7 +348,7 @@ TABLE OF CONTENTS:
 
 	#media-upload.wp-core-ui .button {
 		padding: 0 10px 1px;
-		height: 24px;
+		min-height: 24px;
 		line-height: 22px;
 		font-size: 13px;
 	}
@@ -369,7 +369,7 @@ TABLE OF CONTENTS:
 		padding: 0 10px 1px;
 		font-size: 13px;
 		line-height: 2;
-		height: 28px;
+		min-height: 28px;
 		margin: 0;
 		vertical-align: inherit;
 	}
@@ -382,7 +382,7 @@ TABLE OF CONTENTS:
 	/* Reset responsive styles on Log in button on iframed login form */
 
 	.interim-login .button.button-large {
-		height: 30px;
+		min-height: 30px;
 		line-height: 2;
 		padding: 0 12px 2px;
 	}

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

@@ -41,9 +41,7 @@
 
 .media-frame select,
 .wp-admin .media-frame select {
-	padding: 2px;
+	min-height: 28px;
-	line-height: 2;
-	height: 28px;
 	vertical-align: middle;
 }