Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights.

Improves cross-browsers rendering and addresses most of the reported edge cases.

See #47477.


git-svn-id: https://develop.svn.wordpress.org/trunk@46356 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-09-30 17:23:06 +00:00
parent 48564fa823
commit f93cd8ceea
9 changed files with 213 additions and 191 deletions

View File

@ -775,8 +775,7 @@ img.emoji {
border-bottom: 1px solid #ccd0d4;
}
.quicktags,
.search {
.quicktags {
background-color: #ccc;
color: #000;
font-size: 12px;
@ -1080,18 +1079,15 @@ th.action-links {
.wp-filter .search-form input[type="search"] {
margin: 0;
padding: 3px 5px;
width: 280px;
max-width: 100%;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
font-size: inherit;
/* inherits font size 13px */
line-height: 2.15384615; /* 28px */
}
.wp-filter .search-form select {
margin: 0;
height: 32px;
vertical-align: top;
}
.wp-filter .search-form.search-plugins {
@ -3910,7 +3906,7 @@ img {
.fileedit-sub input[type="submit"] {
margin-bottom: 0px;
padding: 8px 18px;
padding: 4px 18px;
}
#documentation label[for="docs-list"] {

View File

@ -71,7 +71,7 @@
color: #72777c;
position: absolute;
font-size: 1.7em;
padding: 11px 10px;
padding: 10px;
pointer-events: none;
}
@ -419,16 +419,15 @@ form#tags-filter {
}
#timestampdiv select {
height: 21px;
line-height: 1.16666666;
padding: 0;
vertical-align: top;
font-size: 12px;
line-height: 1.5; /* 18px */
}
#aa, #jj, #hh, #mn {
padding: 1px;
padding: 6px 1px;
font-size: 12px;
line-height: 1.16666666; /* 14px */
}
#jj, #hh, #mn {
@ -494,8 +493,6 @@ form#tags-filter {
}
#timestampdiv input {
border-width: 1px;
border-style: solid;
text-align: center;
}

View File

@ -1,12 +1,42 @@
/* Include margin and padding in the width calculation of input and textarea. */
input,
textarea {
select,
textarea,
button {
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
textarea,
input {
font-size: 14px;
}
textarea {
overflow: auto;
padding: 2px 6px;
/* inherits font size 14px */
line-height: 1.42857143; /* 20px */
resize: vertical;
}
label {
cursor: pointer;
}
input,
select {
margin: 1px;
}
textarea.code {
padding: 4px 6px 1px 6px;
}
input[type="text"],
input[type="password"],
input[type="checkbox"],
input[type="color"],
input[type="date"],
input[type="datetime"],
@ -15,22 +45,40 @@ input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="radio"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
padding: 6px 8px;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border-radius: 4px;
border: 1px solid #7e8993;
background-color: #fff;
color: #32373c;
outline: none;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
padding: 0 8px;
/* inherits font size 14px */
line-height: 2; /* 28px */
}
::-webkit-datetime-edit {
/* inherits font size 14px */
line-height: 1.85714286; /* 26px */
}
input[type="text"]:focus,
@ -44,7 +92,6 @@ input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
@ -64,15 +111,10 @@ input[type="url"] {
direction: ltr;
}
/* Vertically align the number selector with the input. */
input[type="number"] {
min-height: 28px;
line-height: 1;
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #7e8993;
border-radius: 4px;
background: #fff;
color: #555;
clear: none;
@ -118,6 +160,7 @@ td > input[type="checkbox"],
input[type="radio"] {
border-radius: 50%;
margin-right: 0.25rem;
/* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */
line-height: 0.71428571;
}
@ -146,8 +189,9 @@ input[type="radio"]:checked::before {
width: 0.5rem; /* 8px */
height: 0.5rem; /* 8px */
margin: 0.1875rem; /* 3px */
line-height: 0.76190476;
background-color: #1e8cbe;
/* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
line-height: 1.14285714;
}
@-moz-document url-prefix() {
@ -167,57 +211,11 @@ input[type="search"]::-webkit-search-decoration {
display: none;
}
.ie8 input[type="password"] {
font-family: sans-serif;
}
textarea,
input,
select,
button {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
textarea,
input,
select {
font-size: 14px;
padding: 3px 5px;
}
textarea {
overflow: auto;
padding: 2px 6px;
line-height: 1.4;
resize: vertical;
}
.wp-admin input[type="file"] {
padding: 3px 0;
cursor: pointer;
}
label {
cursor: pointer;
}
input,
select {
margin: 1px;
padding: 3px 5px;
}
input.code {
padding-top: 6px;
}
textarea.code {
line-height: 1.4;
padding: 4px 6px 1px 6px;
}
input.readonly,
input[readonly],
textarea.readonly,
@ -309,17 +307,27 @@ input[type="radio"].disabled:checked:before {
/* Select styles are based on the default button in buttons.css */
.wp-admin select {
color: #555;
font-size: 13px;
line-height: 1.38461538; /* 18px */
color: #32373c;
border-color: #7e8993;
box-shadow: none;
border-radius: 3px;
padding: 2px 24px 2px 8px;
padding: 3px 24px 3px 8px;
min-height: 28px;
vertical-align: middle;
-webkit-appearance: none;
/* The SVG is arrow-down-alt2 from Dashicons. */
background: #fff 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: #fff 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 5px top 55%;
background-size: 16px 16px;
cursor: pointer;
}
/* Color and font size in the core form tables. */
.wp-admin .form-table select {
font-size: 14px;
line-height: 1.28571428; /* 18px */
color: #32373c;
}
.wp-admin select:hover {
@ -350,7 +358,40 @@ input[type="radio"].disabled:checked:before {
transform: none;
}
/* Reset Firefox inner outline that appears on :focus. */
/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
.wp-admin select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #016087;
}
/* Remove background focus style from IE11 while keeping focus style available on option elements. */
.wp-admin select::-ms-value {
background: transparent;
color: #555;
}
.wp-admin select:hover::-ms-value {
color: #007cba;
}
.wp-admin select:focus::-ms-value {
color: #016087;
}
.wp-admin select.disabled::-ms-value,
.wp-admin select:disabled::-ms-value {
color: #a0a5aa;
}
/* Hide the native down arrow for select element on IE. */
.wp-admin select::-ms-expand {
display: none;
}
.wp-admin .button-cancel {
display: inline-block;
min-height: 28px;
padding: 0 5px;
line-height: 2;
}
@ -359,8 +400,14 @@ input[type="radio"].disabled:checked:before {
max-width: 100%;
}
.misc-pub-post-status select {
margin-top: 0;
}
.wp-admin select[multiple] {
height: auto;
padding-right: 8px;
background: #fff;
}
.submit {
@ -416,7 +463,7 @@ textarea.large-text {
input.small-text {
width: 50px;
padding: 1px 6px;
padding: 0 6px;
}
input[type="number"].small-text {
@ -450,14 +497,6 @@ input[type="number"].tiny-text {
max-width: 12.5rem;
}
.ie8 .tablenav .actions select {
width: 9.6875rem;
}
.ie8 .tablenav .actions select#cat {
width: 12.5rem;
}
#timezone_string option {
margin-left: 1em;
}
@ -590,18 +629,12 @@ p.search-box {
.tablenav .search-plugins input[name="s"],
.tagsdiv .newtag {
float: left;
height: 28px;
margin: 0 4px 0 0;
}
.js.plugins-php .search-box .wp-filter-search {
margin: 0;
width: 280px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
padding: 3px 5px;
height: 32px;
}
input[type="text"].ui-autocomplete-loading,
@ -952,6 +985,7 @@ table.form-table td .updated p {
.options-general-php input.small-text {
width: 56px;
margin: -2px 0;
}
.options-general-php .spinner {
@ -1188,9 +1222,6 @@ table.form-table td .updated p {
}
.privacy_requests .next_steps .button {
height: auto;
line-height: 1.5;
padding: 4px 10px;
word-break: break-all;
white-space: unset;
}
@ -1242,7 +1273,6 @@ table.form-table td .updated p {
}
.wp-privacy-request-form input {
line-height: 1.5;
margin: 0;
}
@ -1278,21 +1308,24 @@ table.form-table td .updated p {
}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"] {
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
-webkit-appearance: none;
padding: 6px 10px;
padding: 3px 10px;
}
input[type="number"] {
min-height: 40px;
}
input.code {
padding-bottom: 5px;
padding-top: 10px;
::-webkit-datetime-edit {
line-height: 1.875; /* 30px */
}
input[type="checkbox"],
@ -1340,14 +1373,19 @@ table.form-table td .updated p {
margin-top: 10px;
}
#wpbody select {
min-height: 36px;
.wp-admin select,
.wp-admin .form-table select {
min-height: 40px;
font-size: 16px;
line-height: 1.625; /* 26px */
padding: 5px 24px 5px 8px;
}
.wp-admin .button-cancel {
padding: 0;
margin-bottom: 0;
padding: 2px 0;
font-size: 14px;
vertical-align: middle;
}
#adduser .form-field input,
@ -1397,9 +1435,6 @@ table.form-table td .updated p {
.form-table span.description,
#profile-page .form-table textarea {
width: 100%;
font-size: 16px;
line-height: 1.5;
padding: 7px 10px;
display: block;
max-width: none;
box-sizing: border-box;
@ -1410,10 +1445,6 @@ table.form-table td .updated p {
margin: -30px 3px 0 0;
}
#wpbody .form-table td select {
min-height: 40px;
}
input[type="text"].small-text,
input[type="search"].small-text,
input[type="password"].small-text,
@ -1443,12 +1474,10 @@ table.form-table td .updated p {
}
p.search-box input[name="s"] {
height: auto;
float: none;
width: 100%;
margin-bottom: 10px;
vertical-align: middle;
-webkit-appearance: none;
}
p.search-box input[type="submit"] {
@ -1550,6 +1579,11 @@ table.form-table td .updated p {
display: none;
}
.wp-pwd [type="text"],
.wp-pwd [type="password"] {
line-height: 2;
}
.wp-cancel-pw .dashicons-no {
display: inline-block;
}

View File

@ -622,8 +622,6 @@ th.asc a:focus span.sorting-indicator {
.tablenav-pages .current-page {
margin: 0 2px 0 0;
padding-top: 5px;
padding-bottom: 5px;
font-size: 13px;
text-align: center;
}
@ -950,8 +948,8 @@ tr.inline-edit-row td,
.inline-edit-row fieldset.inline-edit-date label {
display: inline-block;
margin: 0;
line-height: 1.5;
vertical-align: baseline;
line-height: 2;
}
.inline-edit-row fieldset label.inline-edit-tags {
@ -975,11 +973,6 @@ tr.inline-edit-row td,
padding: 0;
}
.inline-edit-row fieldset.inline-edit-date select {
margin: 1px;
line-height: 2;
}
.inline-edit-row fieldset label span.input-text-wrap,
.inline-edit-row fieldset .timestamp-wrap {
display: block;
@ -1039,14 +1032,13 @@ tr.inline-edit-row td,
.inline-edit-row fieldset input[name=jj],
.inline-edit-row fieldset input[name=hh],
.inline-edit-row fieldset input[name=mn] {
font-size: 12px;
width: 2.3em;
}
.inline-edit-row fieldset input[name=mn],
.inline-edit-row fieldset input[name=aa] {
font-size: 12px;
width: 3.5em;
line-height: 1.16666666;
vertical-align: middle;
text-align: center;
padding: 6px 4px;
}
.inline-edit-row fieldset label input.inline-edit-password-input {
@ -1988,16 +1980,6 @@ div.action-links,
margin-left: 0;
}
.inline-edit-row fieldset input[name=jj],
.inline-edit-row fieldset input[name=hh],
.inline-edit-row fieldset input[name=mn] {
width: 3em;
}
.inline-edit-row fieldset input[name=aa] {
width: 4.5em;
}
.inline-edit-row .inline-edit-or {
margin: 0 6px 0 0;
}

View File

@ -273,6 +273,7 @@ p {
.login input[type="text"],
.login input[type="password"] {
font-size: 24px;
line-height: 1.16666666; /* 28px */
width: 100%;
padding: 5px;
margin: 3px 6px 16px 0;

View File

@ -34,9 +34,6 @@ body.js .theme-browser.search-loading {
left: 20px;
margin: 0;
width: 280px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
/* Position admin messages */

View File

@ -80,7 +80,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-group.button-small .button {
min-height: 24px;
line-height: 2;
padding: 0 8px 1px;
padding: 0 8px;
font-size: 11px;
}
@ -92,14 +92,6 @@ TABLE OF CONTENTS:
padding: 0 36px;
}
/* Only visible in Windows High Contrast mode */
.wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: 2px solid transparent;
/* Reset inherited offset from Gutenberg */
outline-offset: 0;
}
.wp-core-ui .button.hidden {
display: none;
}
@ -135,10 +127,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button.hover,
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
.wp-core-ui .button-secondary:hover{
background: #f1f1f1;
border-color: #016087;
color: #016087;
@ -151,6 +140,10 @@ TABLE OF CONTENTS:
border-color: #007cba;
color: #016087;
box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
/* Reset inherited offset from Gutenberg */
outline-offset: 0;
}
.wp-core-ui .button.active,
@ -332,8 +325,8 @@ TABLE OF CONTENTS:
input#publish,
input#save-post,
a.preview {
padding: 6px 14px;
line-height: normal;
padding: 1px 14px;
line-height: 2;
font-size: 14px;
vertical-align: middle;
height: auto;

View File

@ -1509,7 +1509,6 @@ i.mce-i-wp_code:before {
}
#wp-link .link-search-field {
float: left;
width: 250px;
max-width: 70%;
}
@ -1520,13 +1519,9 @@ i.mce-i-wp_code:before {
overflow: hidden;
}
#wp-link .link-search-wrapper span {
float: left;
margin-top: 4px;
}
#wp-link .link-search-wrapper .spinner {
margin-top: 5px;
float: none;
margin: -3px 0 0 4px;
}
#wp-link .link-target {
@ -1553,7 +1548,7 @@ i.mce-i-wp_code:before {
}
.has-text-field #wp-link .query-results {
top: 200px;
top: 210px;
}
#wp-link li {
@ -1781,6 +1776,7 @@ div.wp-link-input input {
width: 300px;
padding: 3px;
box-sizing: border-box;
line-height: 1.28571429;
}
.mce-toolbar div.wp-link-preview ~ .mce-btn,

View File

@ -34,17 +34,6 @@
line-height: 1.2;
}
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
}
.media-frame select,
.wp-admin .media-frame select {
min-height: 28px;
vertical-align: middle;
}
.media-frame a {
border-bottom: none;
color: #0073aa;
@ -77,21 +66,58 @@
color: #fff;
}
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
}
.media-frame select,
.wp-admin .media-frame select {
min-height: 28px;
vertical-align: middle;
}
.media-frame input[type="text"],
.media-frame input[type="password"],
.media-frame input[type="color"],
.media-frame input[type="date"],
.media-frame input[type="datetime"],
.media-frame input[type="datetime-local"],
.media-frame input[type="email"],
.media-frame input[type="month"],
.media-frame input[type="number"],
.media-frame input[type="search"],
.media-frame input[type="email"],
.media-frame input[type="tel"],
.media-frame input[type="time"],
.media-frame input[type="url"],
.media-frame input[type="week"],
.media-frame textarea,
.media-frame select {
padding: 6px 8px;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border: 1px solid #7e8993;
border-radius: 4px;
border: 1px solid #7e8993;
background-color: #fff;
color: #32373c;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 12px;
font-size: 13px;
}
.media-frame input[type="text"],
.media-frame input[type="password"],
.media-frame input[type="date"],
.media-frame input[type="datetime"],
.media-frame input[type="datetime-local"],
.media-frame input[type="email"],
.media-frame input[type="month"],
.media-frame input[type="number"],
.media-frame input[type="search"],
.media-frame input[type="tel"],
.media-frame input[type="time"],
.media-frame input[type="url"],
.media-frame input[type="week"] {
padding: 0 8px;
/* inherits font size 13px */
line-height: 2.15384615; /* 28px */
}
.media-frame input[type="text"]:focus,
@ -807,7 +833,7 @@
* Search
*/
.media-frame .search {
margin-top: 11px;
margin-top: 10px;
padding: 4px;
font-size: 13px;
color: #444;
@ -1047,7 +1073,7 @@
display: block;
width: 100%;
margin: 0;
padding: 8px;
padding: 0 8px;
font-size: 12px;
border-radius: 0;
}
@ -1075,7 +1101,7 @@
.attachments-browser .media-toolbar-primary > .media-button-group,
.attachments-browser .media-toolbar-secondary > .media-button,
.attachments-browser .media-toolbar-secondary > .media-button-group {
margin: 11px 0;
margin: 10px 0;
}
.attachments-browser .attachments {