IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Accessibility: Add focus styles for Windows High Contrast mode.

Browse Source 
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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2019-01-10 16:47:50 +00:00
parent c40ae024cd
commit 7481337591
31 changed files with 175 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
wp-includes/css/admin-bar-rtl.css
View File

@@ -53,7 +53,6 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar a:hover,
#wpadminbar a img,
#wpadminbar a img:hover {
outline: none;
border: none;
text-decoration: none;
background: none;
@@ -71,7 +70,11 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar textarea,
#wpadminbar div {
box-shadow: none;
outline: none;
}
#wpadminbar a:focus {
/* Inherits transparent outline only visible in Windows High Contrast mode */
outline-offset: -1px;
}
#wpadminbar {

2
wp-includes/css/admin-bar-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
wp-includes/css/admin-bar.css
View File

@@ -53,7 +53,6 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar a:hover,
#wpadminbar a img,
#wpadminbar a img:hover {
outline: none;
border: none;
text-decoration: none;
background: none;
@@ -71,7 +70,11 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar textarea,
#wpadminbar div {
box-shadow: none;
outline: none;
}
#wpadminbar a:focus {
/* Inherits transparent outline only visible in Windows High Contrast mode */
outline-offset: -1px;
}
#wpadminbar {

2
wp-includes/css/admin-bar.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
wp-includes/css/buttons-rtl.css
View File

@@ -92,9 +92,12 @@ TABLE OF CONTENTS:
padding: 0 36px;
}
/* Only visible in Windows High Contrast mode */
.wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: none;
outline: 2px solid transparent;
/* Reset inherited offset from Gutenberg */
outline-offset: 0;
}
.wp-core-ui .button.hidden {
@@ -190,7 +193,6 @@ TABLE OF CONTENTS:
border: 0;
border-radius: 0;
background: none;
outline: none;
cursor: pointer;
text-align: right;
/* Mimics the default link style in common.css */
@@ -211,6 +213,8 @@ TABLE OF CONTENTS:
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.wp-core-ui .button-link-delete {
@@ -280,14 +284,14 @@ TABLE OF CONTENTS:
}
.wp-core-ui .button.button-primary.button-hero {
box-shadow: 0 2px 0 #006799;
box-shadow: 0 2px 0 #006799;
}
.wp-core-ui .button.button-primary.button-hero.active,
.wp-core-ui .button.button-primary.button-hero.active:hover,
.wp-core-ui .button.button-primary.button-hero.active:focus,
.wp-core-ui .button.button-primary.button-hero:active {
box-shadow: inset 0 3px 0 #006799;
box-shadow: inset 0 3px 0 #006799;
}
/* ----------------------------------------------------------------------------

2
wp-includes/css/buttons-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
wp-includes/css/buttons.css
View File

@@ -92,9 +92,12 @@ TABLE OF CONTENTS:
padding: 0 36px;
}
/* Only visible in Windows High Contrast mode */
.wp-core-ui .button:active,
.wp-core-ui .button:focus {
outline: none;
outline: 2px solid transparent;
/* Reset inherited offset from Gutenberg */
outline-offset: 0;
}
.wp-core-ui .button.hidden {
@@ -190,7 +193,6 @@ TABLE OF CONTENTS:
border: 0;
border-radius: 0;
background: none;
outline: none;
cursor: pointer;
text-align: left;
/* Mimics the default link style in common.css */
@@ -211,6 +213,8 @@ TABLE OF CONTENTS:
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.wp-core-ui .button-link-delete {
@@ -280,14 +284,14 @@ TABLE OF CONTENTS:
}
.wp-core-ui .button.button-primary.button-hero {
box-shadow: 0 2px 0 #006799;
box-shadow: 0 2px 0 #006799;
}
.wp-core-ui .button.button-primary.button-hero.active,
.wp-core-ui .button.button-primary.button-hero.active:hover,
.wp-core-ui .button.button-primary.button-hero.active:focus,
.wp-core-ui .button.button-primary.button-hero:active {
box-shadow: inset 0 3px 0 #006799;
box-shadow: inset 0 3px 0 #006799;
}
/* ----------------------------------------------------------------------------

2
wp-includes/css/buttons.min.css vendored
View File

File diff suppressed because one or more lines are too long

20
wp-includes/css/media-views-rtl.css
View File

@@ -48,8 +48,9 @@
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
outline: none;
color: #124964;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.media-frame a.button {
@@ -195,6 +196,9 @@
color: #00a0d2;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.media-modal-close span.media-modal-icon {
@@ -835,7 +839,9 @@
box-shadow:
inset 0 0 2px 3px #fff,
inset 0 0 0 7px #5b9dd9;
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -6px;
}
.wp-core-ui .selected.attachment {
@@ -1011,6 +1017,11 @@
0 0 0 2px #0073aa;
}
.wp-core-ui .attachment.selected .check:focus {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-core-ui .attachment.details .check .media-modal-icon,
.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
background-position: -21px 0;
@@ -1485,6 +1496,8 @@
box-shadow:
0 0 0 1px #fff,
0 0 2px 3px #5b9dd9;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-core-ui .media-selection .selected.attachment {
@@ -1777,8 +1790,9 @@
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
color: #0074a2;
border-color: #5b9dd9;
outline: none;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {

4
wp-includes/css/media-views-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

20
wp-includes/css/media-views.css
View File

@@ -48,8 +48,9 @@
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
outline: none;
color: #124964;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.media-frame a.button {
@@ -195,6 +196,9 @@
color: #00a0d2;
border-color: #5b9dd9;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.media-modal-close span.media-modal-icon {
@@ -835,7 +839,9 @@
box-shadow:
inset 0 0 2px 3px #fff,
inset 0 0 0 7px #5b9dd9;
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -6px;
}
.wp-core-ui .selected.attachment {
@@ -1011,6 +1017,11 @@
0 0 0 2px #0073aa;
}
.wp-core-ui .attachment.selected .check:focus {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-core-ui .attachment.details .check .media-modal-icon,
.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
background-position: -21px 0;
@@ -1485,6 +1496,8 @@
box-shadow:
0 0 0 1px #fff,
0 0 2px 3px #5b9dd9;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-core-ui .media-selection .selected.attachment {
@@ -1777,8 +1790,9 @@
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
color: #0074a2;
border-color: #5b9dd9;
outline: none;
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {

4
wp-includes/css/media-views.min.css vendored
View File

File diff suppressed because one or more lines are too long