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

Accessibility: Improve the sidebar toggles in the Widgets screen.

Browse Source 
- uses button elements for the toggles
- uses `aria-expanded` on the toggles to communicate to assistive technologies the panels expanded/collapsed state
- adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
- standardizes CSS class names to `.toggle-indicator` and `.handlediv` as these names are already used across the admin for similar controls

Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes #37013.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41456 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2017-09-27 16:29:44 +00:00
parent ddfa468e38
commit 8c7a2b1d54
13 changed files with 177 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
wp-admin/css/common-rtl.css
View File

@@ -2966,7 +2966,7 @@ img {
}
/* Metabox collapse arrow indicators */
.js .sidebar-name .sidebar-name-arrow:before,
.sidebar-name .toggle-indicator:before,
.js .meta-box-sortables .postbox .toggle-indicator:before,
.bulk-action-notice .toggle-indicator:before {
content: "\f142";
@@ -2978,26 +2978,12 @@ img {
text-decoration: none !important;
}
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .widgets-holder-wrap.closed .toggle-indicator:before,
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
content: "\f140";
}
.js .sidebar-name .sidebar-name-arrow:before {
padding: 10px;
right: 0;
}
.js #widgets-left .sidebar-name .sidebar-name-arrow {
display: none;
}
.js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow,
.js #widgets-left .sidebar-name:hover .sidebar-name-arrow {
display: block;
}
.js .postbox .handlediv .toggle-indicator:before {
margin-top: 4px;
width: 20px;
@@ -3171,7 +3157,7 @@ img {
.handlediv,
.postbox .handlediv.button-link,
.item-edit,
.sidebar-name-arrow,
.toggle-indicator,
.accordion-section-title:after {
color: #72777c;
}
@@ -3188,7 +3174,7 @@ img {
.postbox .handlediv.button-link:focus,
.item-edit:hover,
.item-edit:focus,
.sidebar-name:hover .sidebar-name-arrow,
.sidebar-name:hover .toggle-indicator,
.accordion-section-title:hover:after {
color: #23282d;
}
@@ -3488,8 +3474,8 @@ img {
#screen-meta-links a.show-settings,
.widget-top .widget-action,
.widget-top .widget-action:hover,
.sidebar-name-arrow,
.sidebar-name:hover .sidebar-name-arrow,
.sidebar-name .toggle-indicator,
.sidebar-name:hover .toggle-indicator,
.meta-box-sortables .postbox:hover .handlediv,
#bulk-titles div a,
#bulk-titles div a:hover {

4
wp-admin/css/common-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

26
wp-admin/css/common.css
View File

@@ -2966,7 +2966,7 @@ img {
}
/* Metabox collapse arrow indicators */
.js .sidebar-name .sidebar-name-arrow:before,
.sidebar-name .toggle-indicator:before,
.js .meta-box-sortables .postbox .toggle-indicator:before,
.bulk-action-notice .toggle-indicator:before {
content: "\f142";
@@ -2978,26 +2978,12 @@ img {
text-decoration: none !important;
}
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .widgets-holder-wrap.closed .toggle-indicator:before,
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
content: "\f140";
}
.js .sidebar-name .sidebar-name-arrow:before {
padding: 10px;
left: 0;
}
.js #widgets-left .sidebar-name .sidebar-name-arrow {
display: none;
}
.js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow,
.js #widgets-left .sidebar-name:hover .sidebar-name-arrow {
display: block;
}
.js .postbox .handlediv .toggle-indicator:before {
margin-top: 4px;
width: 20px;
@@ -3171,7 +3157,7 @@ img {
.handlediv,
.postbox .handlediv.button-link,
.item-edit,
.sidebar-name-arrow,
.toggle-indicator,
.accordion-section-title:after {
color: #72777c;
}
@@ -3188,7 +3174,7 @@ img {
.postbox .handlediv.button-link:focus,
.item-edit:hover,
.item-edit:focus,
.sidebar-name:hover .sidebar-name-arrow,
.sidebar-name:hover .toggle-indicator,
.accordion-section-title:hover:after {
color: #23282d;
}
@@ -3488,8 +3474,8 @@ img {
#screen-meta-links a.show-settings,
.widget-top .widget-action,
.widget-top .widget-action:hover,
.sidebar-name-arrow,
.sidebar-name:hover .sidebar-name-arrow,
.sidebar-name .toggle-indicator,
.sidebar-name:hover .toggle-indicator,
.meta-box-sortables .postbox:hover .handlediv,
#bulk-titles div a,
#bulk-titles div a:hover {

4
wp-admin/css/common.min.css vendored
View File

File diff suppressed because one or more lines are too long

59
wp-admin/css/widgets-rtl.css
View File

@@ -260,17 +260,52 @@
box-sizing: border-box;
}
.sidebar-name-arrow {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.js .sidebar-name {
cursor: pointer;
}
.sidebar-name .handlediv {
float: left;
width: 38px;
height: 38px;
border: 0;
margin: 0;
padding: 8px;
background: none;
cursor: pointer;
outline: none;
}
#widgets-right .sidebar-name .handlediv {
margin: 5px 0 0 3px;
}
.sidebar-name .handlediv:focus {
box-shadow: none;
outline: none;
}
#widgets-left .sidebar-name .toggle-indicator {
display: none;
}
#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
#widgets-left .sidebar-name:hover .toggle-indicator,
#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
display: block;
}
.sidebar-name .toggle-indicator:before {
padding: 1px 0 1px 2px;
border-radius: 50%;
}
.sidebar-name .handlediv:focus .toggle-indicator:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
.sidebar-name h2,
.sidebar-name h3 {
margin: 0;
@@ -325,10 +360,6 @@ div#widgets-left .sidebar-name h3 {
margin: 0 0 0 10px;
}
#widgets-left .sidebar-name .sidebar-name-arrow:before {
padding: 9px;
}
#widgets-left .widgets-holder-wrap,
div#widgets-left .widget-holder {
background: transparent;
@@ -423,10 +454,6 @@ div#widgets-right .sidebar-name h3 {
padding: 15px 7px;
}
div#widgets-right .sidebar-name .sidebar-name-arrow:before {
top: 2px;
}
div#widgets-right .widget-top {
padding: 0;
}
@@ -556,7 +583,7 @@ div#widgets-right .closed .widgets-sortables {
.widget-control-noform,
#access-off,
.widgets_access .widget-action,
.widgets_access .sidebar-name-arrow,
.widgets_access .handlediv,
.widgets_access #access-on,
.widgets_access .widget-holder .description,
.no-js .widget-holder .description {

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

File diff suppressed because one or more lines are too long

59
wp-admin/css/widgets.css
View File

@@ -260,17 +260,52 @@
box-sizing: border-box;
}
.sidebar-name-arrow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.js .sidebar-name {
cursor: pointer;
}
.sidebar-name .handlediv {
float: right;
width: 38px;
height: 38px;
border: 0;
margin: 0;
padding: 8px;
background: none;
cursor: pointer;
outline: none;
}
#widgets-right .sidebar-name .handlediv {
margin: 5px 3px 0 0;
}
.sidebar-name .handlediv:focus {
box-shadow: none;
outline: none;
}
#widgets-left .sidebar-name .toggle-indicator {
display: none;
}
#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
#widgets-left .sidebar-name:hover .toggle-indicator,
#widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
display: block;
}
.sidebar-name .toggle-indicator:before {
padding: 1px 2px 1px 0;
border-radius: 50%;
}
.sidebar-name .handlediv:focus .toggle-indicator:before {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
.sidebar-name h2,
.sidebar-name h3 {
margin: 0;
@@ -325,10 +360,6 @@ div#widgets-left .sidebar-name h3 {
margin: 0 10px 0 0;
}
#widgets-left .sidebar-name .sidebar-name-arrow:before {
padding: 9px;
}
#widgets-left .widgets-holder-wrap,
div#widgets-left .widget-holder {
background: transparent;
@@ -423,10 +454,6 @@ div#widgets-right .sidebar-name h3 {
padding: 15px 7px;
}
div#widgets-right .sidebar-name .sidebar-name-arrow:before {
top: 2px;
}
div#widgets-right .widget-top {
padding: 0;
}
@@ -556,7 +583,7 @@ div#widgets-right .closed .widgets-sortables {
.widget-control-noform,
#access-off,
.widgets_access .widget-action,
.widgets_access .sidebar-name-arrow,
.widgets_access .handlediv,
.widgets_access #access-on,
.widgets_access .widget-holder .description,
.no-js .widget-holder .description {

2
wp-admin/css/widgets.min.css vendored
View File

File diff suppressed because one or more lines are too long