Accessibility: Improve the Tags meta box accessibility.

- changes the "X" links in buttons, improves their color contrast ratio and focus style
- adds screen reader text "Remove item: + tagname"
- uses `wp.a11y.speak()` to give screen reader users feedback when adding/removing tags
- makes the `tagcloud-link` toggle a button, with an `aria-expanded` attribute to indicate the tag cloud collapsed/expanded state
- changes colors for the autocomplete highlighted option in order to have a better color contrast ratio
- reduces the font size for the autocomplete on Press This
- removes CSS related to the old `suggest.js` from Press This

Props joedolson, cgrymala, azaozz, afercia.
Fixes #27555.


git-svn-id: https://develop.svn.wordpress.org/trunk@38880 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2016-10-23 18:15:07 +00:00
parent dcd129e5b8
commit e232ed28dc
11 changed files with 244 additions and 121 deletions

View File

@@ -594,11 +594,18 @@ ul#add-to-blog-users {
padding: 4px 10px;
white-space: nowrap;
text-align: left;
cursor: pointer;
}
.ui-autocomplete li.ui-state-focus {
/* Colors for the wplink toolbar autocomplete. */
.ui-autocomplete .ui-state-focus {
background-color: #ddd;
cursor: pointer;
}
/* Colors for the tags autocomplete. */
.wp-tags-autocomplete .ui-state-focus {
background-color: #0073aa;
color: #fff;
}
/*------------------------------------------------------------------------------