Accessibility: Add focus styles for Windows High Contrast mode.

Introduces in core new focus styles dedicated to Windows High Contrast mode. The 
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.

Fixes #41286.


git-svn-id: https://develop.svn.wordpress.org/trunk@44544 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-01-10 16:46:44 +00:00
parent 3b3808feeb
commit 2d4ae6ce6d
7 changed files with 78 additions and 23 deletions

View File

@@ -52,6 +52,8 @@ select:focus,
textarea:focus {
border-color: #5b9dd9;
box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
/* rtl:ignore */
@@ -236,10 +238,12 @@ textarea[readonly] {
color: #72777c;
}
.form-invalid input, .form-invalid input:focus,
.form-invalid select, .form-invalid select:focus {
.form-invalid input,
.form-invalid input:focus,
.form-invalid select,
.form-invalid select:focus {
border-color: #dc3232 !important;
box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
}
.form-table .form-required.form-invalid td:after {