Changeset 46243

Timestamp:

09/23/2019 03:26:23 PM (4 years ago)

Author:

afercia

Message:

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

Props kjellr, abrightclearweb, audrasjb.
Fixes #47477.

Location:

trunk/src

Files:

• wp-admin/css/forms.css (modified) (6 diffs)
• wp-includes/css/buttons.css (modified) (7 diffs)
• wp-includes/css/media-views.css (modified) (1 diff)

trunk/src/wp-admin/css/forms.css

@@ -65 +65 @@
 /* Vertically align the number selector with the input. */
 input[type="number"] {
-    height: 28px;
+    min-height: 28px;
     line-height: 1;
 }
@@ -308 +308 @@
 ------------------------------------------------------------------------------*/
 
-
+/* Select styles are based on the default button in buttons.css */
 .wp-admin select {
-    padding: 2px;
-    line-height: 2;
-    height: 28px;
+    color: #555;
+    border-color: #7e8993;
+    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;
 }
 
@@ -413 +438 @@
     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;
 }
 
@@ -1249 +1274 @@
 
     input[type="number"] {
-        height: 40px;
+        min-height: 40px;
     }
 
@@ -1303 +1328 @@
 
     #wpbody select {
-        height: 36px;
+        min-height: 36px;
         font-size: 16px;
     }
@@ -1373 +1398 @@
 
     #wpbody .form-table td select {
-        height: 40px;
+        min-height: 40px;
     }
 

trunk/src/wp-includes/css/buttons.css

@@ -48 +48 @@
     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;
@@ -72 +72 @@
 .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;
@@ -79 +79 @@
 .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;
@@ -88 +88 @@
 .wp-core-ui .button-group.button-hero .button {
     font-size: 14px;
-    height: 46px;
+    min-height: 46px;
     line-height: 3.14285714;
     padding: 0 36px;
@@ -349 +349 @@
     #media-upload.wp-core-ui .button {
         padding: 0 10px 1px;
-        height: 24px;
+        min-height: 24px;
         line-height: 22px;
         font-size: 13px;
@@ -370 +370 @@
         font-size: 13px;
         line-height: 2;
-        height: 28px;
+        min-height: 28px;
         margin: 0;
         vertical-align: inherit;
@@ -383 +383 @@
 
     .interim-login .button.button-large {
-        height: 30px;
+        min-height: 30px;
         line-height: 2;
         padding: 0 12px 2px;

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

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