Accessibility: Improve the focus style for Windows High Contrast mode in various parts of the admin interface.

Continues the introduction in core of new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline.
This change covers some parts of the interface for the meta boxes, Widgets, and the Customizer.

Props joedolson, kjellr, antpb, mikeschroder, Hareesh Pillai.
See #41286, #45910.
Fixes #47117.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48062 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2020-07-04 10:44:03 +00:00
parent 43cbe21a3e
commit 2e992505ac
17 changed files with 67 additions and 27 deletions

View File

@ -3058,13 +3058,16 @@ img {
.js .postbox .handlediv:focus {
box-shadow: none;
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.js .postbox .handlediv:focus .toggle-indicator:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
/* @todo: appears to be Press This only and overridden */
@ -3385,6 +3388,8 @@ img {
.sidebar-name:hover .toggle-indicator,
.accordion-section-title:hover:after {
color: #23282d;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.widget-top .widget-action:focus .toggle-indicator:before {
@ -3467,12 +3472,15 @@ img {
}
.accordion-section-title:focus {
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.accordion-section-title:hover:after,
.accordion-section-title:focus:after {
border-color: #a0a5aa transparent;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.cannot-expand .accordion-section-title {

File diff suppressed because one or more lines are too long

View File

@ -3057,13 +3057,16 @@ img {
.js .postbox .handlediv:focus {
box-shadow: none;
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.js .postbox .handlediv:focus .toggle-indicator:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
/* @todo: appears to be Press This only and overridden */
@ -3384,6 +3387,8 @@ img {
.sidebar-name:hover .toggle-indicator,
.accordion-section-title:hover:after {
color: #23282d;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.widget-top .widget-action:focus .toggle-indicator:before {
@ -3466,12 +3471,15 @@ img {
}
.accordion-section-title:focus {
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.accordion-section-title:hover:after,
.accordion-section-title:focus:after {
border-color: #a0a5aa transparent;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.cannot-expand .accordion-section-title {

File diff suppressed because one or more lines are too long

View File

@ -843,10 +843,16 @@ h3.customize-section-title {
background: #fff;
color: #0073aa;
border-top-color: #0073aa;
outline: none;
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
#customize-theme-controls .accordion-section-title:focus .customize-action {
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
outline-offset: 1px;
}
.customize-panel-back:hover,
.customize-panel-back:focus,
@ -855,8 +861,10 @@ h3.customize-section-title {
color: #0073aa;
background: #f3f3f5;
border-right-color: #0073aa;
outline: none;
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.customize-controls-close:before {
@ -1396,6 +1404,7 @@ p.customize-section-description {
border-color: #007cba;
border-style: solid;
box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@ -2213,8 +2222,10 @@ p.customize-section-description {
color: #0073aa;
background: #f3f3f5;
border-right-color: #0073aa;
outline: none;
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.showing-themes #customize-header-actions {

File diff suppressed because one or more lines are too long

View File

@ -842,10 +842,16 @@ h3.customize-section-title {
background: #fff;
color: #0073aa;
border-top-color: #0073aa;
outline: none;
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
#customize-theme-controls .accordion-section-title:focus .customize-action {
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
outline-offset: 1px;
}
.customize-panel-back:hover,
.customize-panel-back:focus,
@ -854,8 +860,10 @@ h3.customize-section-title {
color: #0073aa;
background: #f3f3f5;
border-left-color: #0073aa;
outline: none;
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.customize-controls-close:before {
@ -1395,6 +1403,7 @@ p.customize-section-description {
border-color: #007cba;
border-style: solid;
box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@ -2212,8 +2221,10 @@ p.customize-section-description {
color: #0073aa;
background: #f3f3f5;
border-left-color: #0073aa;
outline: none;
box-shadow: none;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
}
.showing-themes #customize-header-actions {

File diff suppressed because one or more lines are too long

View File

@ -270,7 +270,8 @@
.customize-screen-options-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:focus {
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.customize-screen-options-toggle:before {

File diff suppressed because one or more lines are too long

View File

@ -269,7 +269,8 @@
.customize-screen-options-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:focus {
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
.customize-screen-options-toggle:before {

File diff suppressed because one or more lines are too long

View File

@ -26,7 +26,6 @@
padding: 10px;
background: none;
cursor: pointer;
outline: none;
}
.widget-title h3,
@ -325,7 +324,8 @@
.sidebar-name .handlediv:focus {
box-shadow: none;
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
#widgets-left .sidebar-name .toggle-indicator {

File diff suppressed because one or more lines are too long

View File

@ -25,7 +25,6 @@
padding: 10px;
background: none;
cursor: pointer;
outline: none;
}
.widget-title h3,
@ -324,7 +323,8 @@
.sidebar-name .handlediv:focus {
box-shadow: none;
outline: none;
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
#widgets-left .sidebar-name .toggle-indicator {

File diff suppressed because one or more lines are too long

View File

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