IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests 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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@42624 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2018-03-07 22:27:31 +00:00
parent e34999f4aa
commit ffedf3d752
13 changed files with 102 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3368,7 +3368,8 @@ img {
.control-section.open .accordion-section-title:after,
#customize-info.open .accordion-section-title:after,
.nav-menus-php .menu-item-edit-active .item-edit:before,
.widget.open .widget-top .widget-action .toggle-indicator:before {
.widget.open .widget-top .widget-action .toggle-indicator:before,
.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
content: "\f142";
}

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

File diff suppressed because one or more lines are too long

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

@@ -3368,7 +3368,8 @@ img {
.control-section.open .accordion-section-title:after,
#customize-info.open .accordion-section-title:after,
.nav-menus-php .menu-item-edit-active .item-edit:before,
.widget.open .widget-top .widget-action .toggle-indicator:before {
.widget.open .widget-top .widget-action .toggle-indicator:before,
.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
content: "\f142";
}

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

File diff suppressed because one or more lines are too long

53
wp-admin/css/widgets-rtl.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 35px 10px 15px;
border-bottom: 1px solid #ccc;
background: #fff;
margin: 0;
cursor: pointer;
outline: none;
position: relative;
}
.widgets-chooser .widgets-chooser-button {
width: 100%;
padding: 10px 35px 10px 15px;
background: transparent;
border: 0;
box-sizing: border-box;
text-align: right;
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;
right: 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-left: 5px;
}
#available-widgets .widget .widget-top {
cursor: pointer;
}

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

File diff suppressed because one or more lines are too long

53
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;
}

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

File diff suppressed because one or more lines are too long