sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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


git-svn-id: https://develop.svn.wordpress.org/trunk@48293 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2020-07-04 10:42:41 +00:00
parent 8720355f87
commit 70f1b3c10c
4 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/wp-admin/css/common.css
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 {

17
src/wp-admin/css/customize-controls.css
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 {

3
src/wp-admin/css/customize-nav-menus.css
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 {

4
src/wp-admin/css/widgets.css
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 {