Changeset 49907

Timestamp:

12/26/2020 07:52:48 PM (4 years ago)

Author:

SergeyBiryukov

Message:

Accessibility: Upgrade/Install: Add more contrast to input borders during installation.

This brings the accessibility improvements previously made for other areas of the admin in WordPress 5.3 to the installation screens too.

Follow-up to [46241-46244], [46247], [46248], [46293], [46425].

Props Maigret, audrasjb.
Fixes #51854.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (1 diff)
• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-admin/css/install.css (modified) (3 diffs)
• wp-includes/functions.php (modified) (4 diffs)

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

@@ -1377 +1377 @@
     border: 1px solid #ccd0d4;
     border-left-width: 4px;
-    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
     margin: 5px 15px 2px;
     padding: 1px 12px;

trunk/src/wp-admin/css/customize-controls.css

@@ -2355 +2355 @@
     height: auto;
     background: #fff;
+    border: 1px solid #ccd0d4;
     margin: 50px auto 2em;
     padding: 1em 2em;
     max-width: 700px;
     min-width: 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
 }
 

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

@@ -6 +6 @@
 body {
     background: #fff;
+    border: 1px solid #ccd0d4;
     color: #444;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -12 +13 @@
     max-width: 700px;
     -webkit-font-smoothing: subpixel-antialiased;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
 }
 
@@ -150 +151 @@
     font-size: 15px;
     padding: 3px 5px;
-    border: 1px solid #ddd;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
 }
 

trunk/src/wp-includes/functions.php

@@ -3503 +3503 @@
         body {
             background: #fff;
+            border: 1px solid #ccd0d4;
             color: #444;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -3508 +3509 @@
             padding: 1em 2em;
             max-width: 700px;
-            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
+            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
         }
         h1 {
@@ -3554 +3555 @@
         }
         .button {
-            background: #f7f7f7;
-            border: 1px solid #ccc;
-            color: #555;
+            background: #f3f5f6;
+            border: 1px solid #016087;
+            color: #016087;
             display: inline-block;
             text-decoration: none;
@@ -3573 +3574 @@
             box-sizing:         border-box;
 
-            -webkit-box-shadow: 0 1px 0 #ccc;
-            box-shadow: 0 1px 0 #ccc;
             vertical-align: top;
         }
 
         .button.button-large {
-            height: 30px;
-            line-height: 2.15384615;
-            padding: 0 12px 2px;
+            line-height: 2.30769231;
+            min-height: 32px;
+            padding: 0 12px;
         }
 
         .button:hover,
         .button:focus {
-            background: #fafafa;
-            border-color: #999;
-            color: #23282d;
+            background: #f1f1f1;
         }
 
         .button:focus {
-            border-color: #5b9dd9;
-            -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
-            box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
-            outline: none;
+            background: #f3f5f6;
+            border-color: #007cba;
+            -webkit-box-shadow: 0 0 0 1px #007cba;
+            box-shadow: 0 0 0 1px #007cba;
+            color: #016087;
+            outline: 2px solid transparent;
+            outline-offset: 0;
         }
 
         .button:active {
-            background: #eee;
-            border-color: #999;
-            -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
-            box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
+            background: #f3f5f6;
+            border-color: #7e8993;
+            -webkit-box-shadow: none;
+            box-shadow: none;
         }