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

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 {