vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-05 07:07:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Improve the password form buttons accessibility.

Browse Source 
- makes the "Cancel" button always visible: this allows to generate a new password also on small screens
- moves focus back to the Generate Password button when closing the form
- changes the password reset show/hide button from a clickable `<span>` element to a real `<button>` element
- improves the CSS

Props janak007, afercia.
Fixes #42853.


git-svn-id: https://develop.svn.wordpress.org/trunk@44895 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-03-13 23:36:45 +00:00
parent 4a7b41e6cf
commit cdca702477
6 changed files with 79 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/forms.css
+38 -14
View File
@@ -427,11 +427,16 @@ input[type="number"].tiny-text {
margin-left: 1em;
}
button.wp-hide-pw > .dashicons {
.wp-hide-pw > .dashicons,
.wp-cancel-pw > .dashicons {
position: relative;
top: 3px;
}
.wp-cancel-pw .dashicons-no {
display: none;
}
label,
#your-profile label + a {
vertical-align: middle;
@@ -459,7 +464,7 @@ fieldset label,
background-color: #eee;
border: 1px solid #ddd;
color: #23282d;
margin: -2px 5px 5px 1px;
margin: -1px 0 5px;
padding: 3px 5px;
text-align: center;
width: 25em;
@@ -515,13 +520,25 @@ fieldset label,
padding-top: 8px;
}
.wp-pwd [type="text"],
.wp-pwd [type="password"] {
margin: 0;
/* Same height as the buttons */
line-height: 20px;
min-height: 28px;
max-height: 40px;
}
#pass1-text,
.show-password #pass1 {
display: none;
}
.show-password #pass1-text
{
#pass1-text::-ms-clear {
display: none;
}
.show-password #pass1-text {
display: inline-block;
}
@@ -1462,31 +1479,44 @@ table.form-table td .updated p {
.wp-pwd [type="text"],
.wp-pwd [type="password"] {
padding-right: 40px;
padding-right: 88px;
}
.wp-pwd button.button {
background: transparent;
border: none;
border: 1px solid transparent;
box-shadow: none;
line-height: 2;
margin: 0;
padding: 5px 10px;
padding: 5px 9px;
position: absolute;
right: 0;
top: 0;
}
.wp-pwd button.wp-hide-pw {
right: 40px;
}
.wp-pwd button.button:hover,
.wp-pwd button.button:focus,
.wp-pwd button.button:focus {
background: transparent;
}
.wp-pwd button.button:active {
background: transparent;
box-shadow: none;
transform: none;
}
.wp-pwd .button .text {
display: none;
}
.wp-cancel-pw .dashicons-no {
display: inline-block;
}
.options-general-php input[type="text"].small-text {
max-width: 6.25em;
margin: 0;
@@ -1533,12 +1563,6 @@ table.form-table td .updated p {
.form-wrap .form-field {
padding: 0;
}
/* users */
#profile-page .form-table textarea {
max-width: 400px;
width: auto;
}
}
@media only screen and (max-height: 480px), screen and (max-width: 450px) {
src/wp-admin/css/login.css
+33 -7
View File
@@ -79,22 +79,49 @@ p {
}
.login .password-input-wrapper {
display: table;
position: relative;
}
.login .input.password-input {
display: table-cell;
margin: 0;
}
.login .input::-ms-clear {
display: none;
}
.login .pw-weak {
margin-bottom: 15px;
}
.login .button.button-secondary {
display: table-cell;
border-radius: 0;
vertical-align: middle;
background: transparent;
border: 1px solid transparent;
box-shadow: none;
font-size: 14px;
line-height: 2;
height: auto;
margin: 0;
padding: 5px 9px;
position: absolute;
right: 0;
top: 0;
}
.login .button.button-secondary:hover {
background: transparent;
}
.login .button.button-secondary:focus {
background: transparent;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
}
.login .button.button-secondary:active {
background: transparent;
box-shadow: none;
transform: none;
}
.login form {
@@ -127,7 +154,6 @@ p {
}
.login label {
color: #72777c;
font-size: 14px;
}
@@ -209,7 +235,7 @@ p {
.login input[type="text"] {
font-size: 24px;
width: 100%;
padding: 3px;
padding: 5px 45px 5px 5px;
margin: 2px 6px 16px 0;
}