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

Props kjellr, abrightclearweb, audrasjb.
Fixes #47477.

Built from https://develop.svn.wordpress.org/trunk@46243


git-svn-id: http://core.svn.wordpress.org/trunk@46055 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2019-09-23 15:27:57 +00:00
parent 271f45072d
commit 38be855367
7 changed files with 49 additions and 26 deletions

View File

@ -64,7 +64,7 @@ input[type="url"] {
/* Vertically align the number selector with the input. */ /* Vertically align the number selector with the input. */
input[type="number"] { input[type="number"] {
height: 28px; min-height: 28px;
line-height: 1; line-height: 1;
} }
@ -307,12 +307,37 @@ input[type="radio"].disabled:checked:before {
2.0 - Forms 2.0 - Forms
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
/* Select styles are based on the default button in buttons.css */
.wp-admin select { .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; 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 { .wp-admin .button-cancel {
@ -412,15 +437,15 @@ input[type="number"].tiny-text {
.tablenav .actions select { .tablenav .actions select {
float: left; float: left;
margin-right: 6px; margin-right: 6px;
max-width: 200px; max-width: 12.5rem;
} }
.ie8 .tablenav .actions select { .ie8 .tablenav .actions select {
width: 155px; width: 9.6875rem;
} }
.ie8 .tablenav .actions select#cat { .ie8 .tablenav .actions select#cat {
width: 200px; width: 12.5rem;
} }
#timezone_string option { #timezone_string option {
@ -1248,7 +1273,7 @@ table.form-table td .updated p {
} }
input[type="number"] { input[type="number"] {
height: 40px; min-height: 40px;
} }
input.code { input.code {
@ -1302,7 +1327,7 @@ table.form-table td .updated p {
} }
#wpbody select { #wpbody select {
height: 36px; min-height: 36px;
font-size: 16px; font-size: 16px;
} }
@ -1372,7 +1397,7 @@ table.form-table td .updated p {
} }
#wpbody .form-table td select { #wpbody .form-table td select {
height: 40px; min-height: 40px;
} }
input[type="text"].small-text, input[type="text"].small-text,

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@ -1,5 +1,5 @@
/*! This file is auto-generated */ /*! This file is auto-generated */
.media-modal *{box-sizing:content-box}.media-modal input,.media-modal select,.media-modal textarea{box-sizing:border-box}.media-frame,.media-modal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12px;-webkit-overflow-scrolling:touch}.media-modal legend{padding:0;font-size:13px}.media-modal label{font-size:13px}.media-modal .legend-inline{position:absolute;transform:translate(-100%,50%);margin-left:-1%;line-height:1.2}.media-frame input,.media-frame textarea{padding:6px 8px}.media-frame select,.wp-admin .media-frame select{padding:2px;line-height:2;height:28px;vertical-align:middle}.media-frame a{border-bottom:none;color:#0073aa}.media-frame a:active,.media-frame a:hover{color:#00a0d2}.media-frame a:focus{box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);color:#124964;outline:1px solid transparent}.media-frame a.button{color:#32373c}.media-frame a.button:hover{color:#23282d}.media-frame a.button-primary,.media-frame a.button-primary:hover{color:#fff}.media-frame input[type=email],.media-frame input[type=number],.media-frame input[type=password],.media-frame input[type=search],.media-frame input[type=text],.media-frame input[type=url],.media-frame select,.media-frame textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12px;border-width:1px;border-style:solid;border-color:#ddd}.media-frame input[type=email]:focus,.media-frame input[type=number]:focus,.media-frame input[type=password]:focus,.media-frame input[type=search]:focus,.media-frame input[type=text]:focus,.media-frame input[type=url]:focus,.media-frame select:focus,.media-frame textarea:focus{border-color:#5b9dd9}.media-frame input:disabled,.media-frame input[readonly],.media-frame textarea:disabled,.media-frame textarea[readonly]{background-color:#eee}.media-frame input[type=search]{-webkit-appearance:textfield}.media-frame ::-webkit-input-placeholder{color:#72777c}.media-frame ::-moz-placeholder{color:#72777c;opacity:1}.media-frame :-ms-input-placeholder{color:#72777c}.media-frame .hidden,.media-frame .setting.hidden{display:none}/*! .media-modal *{box-sizing:content-box}.media-modal input,.media-modal select,.media-modal textarea{box-sizing:border-box}.media-frame,.media-modal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12px;-webkit-overflow-scrolling:touch}.media-modal legend{padding:0;font-size:13px}.media-modal label{font-size:13px}.media-modal .legend-inline{position:absolute;transform:translate(-100%,50%);margin-left:-1%;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}.media-frame a:active,.media-frame a:hover{color:#00a0d2}.media-frame a:focus{box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);color:#124964;outline:1px solid transparent}.media-frame a.button{color:#32373c}.media-frame a.button:hover{color:#23282d}.media-frame a.button-primary,.media-frame a.button-primary:hover{color:#fff}.media-frame input[type=email],.media-frame input[type=number],.media-frame input[type=password],.media-frame input[type=search],.media-frame input[type=text],.media-frame input[type=url],.media-frame select,.media-frame textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12px;border-width:1px;border-style:solid;border-color:#ddd}.media-frame input[type=email]:focus,.media-frame input[type=number]:focus,.media-frame input[type=password]:focus,.media-frame input[type=search]:focus,.media-frame input[type=text]:focus,.media-frame input[type=url]:focus,.media-frame select:focus,.media-frame textarea:focus{border-color:#5b9dd9}.media-frame input:disabled,.media-frame input[readonly],.media-frame textarea:disabled,.media-frame textarea[readonly]{background-color:#eee}.media-frame input[type=search]{-webkit-appearance:textfield}.media-frame ::-webkit-input-placeholder{color:#72777c}.media-frame ::-moz-placeholder{color:#72777c;opacity:1}.media-frame :-ms-input-placeholder{color:#72777c}.media-frame .hidden,.media-frame .setting.hidden{display:none}/*!
* jQuery UI Draggable/Sortable 1.11.4 * jQuery UI Draggable/Sortable 1.11.4
* http://jqueryui.com * http://jqueryui.com
* *

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.3-alpha-46242'; $wp_version = '5.3-alpha-46243';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.