Skip to content
Permalink
Browse files

Accessibility: Improve and modernize user interface controls. Third p…

…art: 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
  • Loading branch information...
afercia committed Sep 23, 2019
1 parent 82bded3 commit 3f58ce59d71acd5030808b427bed7437f277bbe3
Showing with 45 additions and 22 deletions.
  1. +36 −11 src/wp-admin/css/forms.css
  2. +8 −8 src/wp-includes/css/buttons.css
  3. +1 −3 src/wp-includes/css/media-views.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;
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;
}

.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,
@@ -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;
}
@@ -41,9 +41,7 @@

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

0 comments on commit 3f58ce5

Please sign in to comment.
You can’t perform that action at this time.