Accessibility: Improve the password form buttons accessibility.

- 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

src/wp-admin/css/login.css

@@ -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;
 }