vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-03-31 02:34:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Widgets: Make the "Available Widgets" section operable with a keyboard.

Browse Source 
For a number of years, the "Available Widgets" section has been off-limits for
keyboard users. Now it can be used also with the keyboard. This change introduces
also some improvements for assistive technologies.

- makes the widget toggles focusable and adds an `aria-expanded` attribute to indicate their state
- improves the toggles labelling to clarify context (add/edit)
- changes the controls to choose a sidebar from list items to buttons
- adds an `aria-label` attribute to the buttons to clarify their purpose
- adds an `aria-pressed` attribute to the buttons to indicate which one is selected
- improves color contrast of the selected button
- uses a `wp.a11y.speak()` message to announce to screen reader users when a widget has been added to a sidebar
- moves focus back to the toggle button when closing a widget

See #40677.


git-svn-id: https://develop.svn.wordpress.org/trunk@42794 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2018-03-07 22:26:39 +00:00
parent 77fbbbdbec
commit 9054719d29
5 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/wp-admin/css/widgets.css
View File

@@ -381,10 +381,6 @@ div#widgets-left .widget-holder {
box-shadow: none;
}
#available-widgets .widget-action {
display: none;
}
#available-widgets .widget {
margin: 0;
}
@@ -516,8 +512,11 @@ div#widgets-right .closed .widgets-sortables {
}
#available-widgets .widget-control-edit .edit,
#available-widgets .widget-action .edit,
#widgets-left .inactive-sidebar .widget-control-edit .add,
#widgets-right .widget-control-edit .add {
#widgets-left .inactive-sidebar .widget-action .add,
#widgets-right .widget-control-edit .add,
#widgets-right .widget-action .add {
display: none;
}
@@ -664,44 +663,40 @@ div#widgets-right .widget-top:hover,
}
.widgets-chooser li {
padding: 10px 15px 10px 35px;
border-bottom: 1px solid #ccc;
background: #fff;
margin: 0;
cursor: pointer;
outline: none;
position: relative;
}
.widgets-chooser .widgets-chooser-button {
width: 100%;
padding: 10px 15px 10px 35px;
background: transparent;
border: 0;
box-sizing: border-box;
text-align: left;
cursor: pointer;
transition: background 0.2s ease-in-out;
}
/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
.widgets-chooser li:hover,
.widgets-chooser li:focus {
background: rgba(255,255,255,0.7);
}
.widgets-chooser li:focus:before {
content: "\f147";
display: block;
-webkit-font-smoothing: antialiased;
font: normal 26px/1 dashicons;
color: #555d66;
position: absolute;
top: 7px;
left: 5px;
/* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
.widgets-chooser .widgets-chooser-button:hover,
.widgets-chooser .widgets-chooser-button:focus {
outline: none;
text-decoration: underline;
}
.widgets-chooser li:last-child {
border: none;
}
.widgets-chooser li.widgets-chooser-selected {
background: #00a0d2;
.widgets-chooser .widgets-chooser-selected .widgets-chooser-button {
background: #0073aa;
color: #fff;
}
.widgets-chooser li.widgets-chooser-selected:before,
.widgets-chooser li.widgets-chooser-selected:focus:before {
.widgets-chooser .widgets-chooser-selected:before {
content: "\f147";
display: block;
-webkit-font-smoothing: antialiased;
@@ -717,10 +712,6 @@ div#widgets-right .widget-top:hover,
text-align: center;
}
.widgets-chooser button {
margin-right: 5px;
}
#available-widgets .widget .widget-top {
cursor: pointer;
}