<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[38880] trunk/src: Accessibility: Improve the Tags meta box accessibility.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/38880">38880</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/38880","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>afercia</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-10-23 18:15:07 +0000 (Sun, 23 Oct 2016)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/27555">#27555</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincsseditcss">trunk/src/wp-admin/css/edit.css</a></li>
<li><a href="#trunksrcwpadmincssformscss">trunk/src/wp-admin/css/forms.css</a></li>
<li><a href="#trunksrcwpadmincssiecss">trunk/src/wp-admin/css/ie.css</a></li>
<li><a href="#trunksrcwpadmincsspressthiscss">trunk/src/wp-admin/css/press-this.css</a></li>
<li><a href="#trunksrcwpadminincludesclasswppressthisphp">trunk/src/wp-admin/includes/class-wp-press-this.php</a></li>
<li><a href="#trunksrcwpadminincludesmetaboxesphp">trunk/src/wp-admin/includes/meta-boxes.php</a></li>
<li><a href="#trunksrcwpadminjstagsboxjs">trunk/src/wp-admin/js/tags-box.js</a></li>
<li><a href="#trunksrcwpadminjstagssuggestjs">trunk/src/wp-admin/js/tags-suggest.js</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/css/common.css 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -759,7 +759,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* @todo can we combine these into a class or use an existing dashicon one? */
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:before,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span a:before,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton .remove-tag-icon:before,
</ins><span class="cx" style="display: block; padding: 0 10px"> #bulk-titles div a:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .notice-dismiss:before {
</span><span class="cx" style="display: block; padding: 0 10px"> background: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -779,18 +779,41 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span a:before,
</del><span class="cx" style="display: block; padding: 0 10px"> #bulk-titles div a:before {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 1px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton .remove-tag-icon:before {
+ margin-left: 2px;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ color: #0073aa;
+ /* vertically center the icon cross browsers */
+ line-height: 1.28;
+}
+
+.tagchecklist .ntdelbutton:focus {
+ outline: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:hover:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:focus:before,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span a:hover:before,
-#bulk-titles div a:hover:before {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
+#bulk-titles div a:hover:before,
+#bulk-titles div a:focus:before {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #c00;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+ -webkit-box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .key-labels label {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 24px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3571,9 +3594,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .sidebar-name-arrow,
</span><span class="cx" style="display: block; padding: 0 10px"> .sidebar-name:hover .sidebar-name-arrow,
</span><span class="cx" style="display: block; padding: 0 10px"> .meta-box-sortables .postbox:hover .handlediv,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .tagchecklist span a,
</del><span class="cx" style="display: block; padding: 0 10px"> #bulk-titles div a,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .tagchecklist span a:hover,
</del><span class="cx" style="display: block; padding: 0 10px"> #bulk-titles div a:hover {
</span><span class="cx" style="display: block; padding: 0 10px"> background: none !important;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/css/customize-controls.css 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -276,7 +276,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
</span><span class="cx" style="display: block; padding: 0 10px"> transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ -webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
</ins><span class="cx" style="display: block; padding: 0 10px"> transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ -webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
</ins><span class="cx" style="display: block; padding: 0 10px"> transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadmincsseditcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/edit.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/edit.css 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/css/edit.css 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -582,10 +582,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist > span {
+ float: left;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 25px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- display: block;
- float: left;
</del><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.8em;
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: default;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -594,16 +593,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> text-overflow: ellipsis;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span a {
- margin: 1px 0 0 -17px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton {
+ position: absolute;
+ width: 24px;
+ height: 24px;
+ border: none;
+ margin: 0 0 0 -19px;
+ padding: 0;
+ background: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: 20px;
- height: 20px;
- display: block;
- float: left;
</del><span class="cx" style="display: block; padding: 0 10px"> text-indent: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- overflow: hidden;
- position: absolute;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #poststuff h3.hndle, /* Back-compat for pre-4.4 */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1027,6 +1026,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 260px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagcloud-link.button-link {
+ color: #0073aa;
+ text-decoration: underline;
+}
+
+.tagcloud-link.button-link:hover {
+ color: #00a0d2;
+}
+
+.tagcloud-link.button-link:focus {
+ color: #124964;
+ -webkit-box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #post-body-content .tagsdiv .the-tags {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 5px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1052,6 +1070,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 2px 0 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Suggest.js autocomplete, no more used by core. */
</ins><span class="cx" style="display: block; padding: 0 10px"> .ac_results {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: -1px 0 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1438,7 +1457,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 25px 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .tagchecklist span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .tagchecklist > span {
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.4;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincssformscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/forms.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/forms.css 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/css/forms.css 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -594,13 +594,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 4px 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> white-space: nowrap;
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: left;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ cursor: pointer;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.ui-autocomplete li.ui-state-focus {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Colors for the wplink toolbar autocomplete. */
+.ui-autocomplete .ui-state-focus {
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: #ddd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- cursor: pointer;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Colors for the tags autocomplete. */
+.wp-tags-autocomplete .ui-state-focus {
+ background-color: #0073aa;
+ color: #fff;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*------------------------------------------------------------------------------
</span><span class="cx" style="display: block; padding: 0 10px"> 15.0 - Comments Screen
</span><span class="cx" style="display: block; padding: 0 10px"> ------------------------------------------------------------------------------*/
</span></span></pre></div>
<a id="trunksrcwpadmincssiecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/ie.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/ie.css 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/css/ie.css 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -441,11 +441,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 1px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span, .tagchecklist span a {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist > span, .tagchecklist .ntdelbutton {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+ outline: 1px solid #5b9dd9;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .tablenav .button,
</span><span class="cx" style="display: block; padding: 0 10px"> .nav .button {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: 2px;
</span></span></pre></div>
<a id="trunksrcwpadmincsspressthiscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/press-this.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/press-this.css 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/css/press-this.css 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -770,38 +770,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 10px 0 6px 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-/* Tag hint TODO needed? */
-/* Tag suggestions */
-.ac_results {
- padding: 0;
- margin: -1px 0 0 -1px;
- list-style: none;
- position: absolute;
- z-index: 10000;
- display: none;
- border: 1px solid #d8d8d8;
- background-color: #fff;
- font-size: 14px;
-}
-
-.ac_results li {
- padding: 6px 16px;
- white-space: nowrap;
- text-align: left;
-}
-
-.ac_results .ac_over {
- background-color: #e5e5e5;
- background-color: #00a0d2;
- color: #fff;
- cursor: pointer;
-}
-
-.ac_match {
- text-decoration: underline;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Tags */
</span><span class="cx" style="display: block; padding: 0 10px"> .tagchecklist {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 16px 28px 5px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -817,10 +785,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist span {
- display: block;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist > span {
+ float: left;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 25px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- float: left;
</del><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.8;
</span><span class="cx" style="display: block; padding: 0 10px"> white-space: nowrap;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -828,7 +795,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media (max-width: 600px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .tagchecklist span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .tagchecklist > span {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.3;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -836,37 +803,52 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .tagchecklist .ntdelbutton {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 1px 0 0 -17px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: absolute;
+ width: 24px;
+ height: 24px;
+ border: none;
+ margin: 0 0 0 -19px;
+ padding: 0;
+ background: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: 20px;
- height: 20px;
- display: block;
- float: left;
- text-indent: 0;
- overflow: hidden;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-indent: 0;;
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist .ntdelbutton:before {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton .remove-tag-icon:before {
</ins><span class="cx" style="display: block; padding: 0 10px"> content: "\f153";
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 2px 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> height: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 20px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: 0 0;
- color: #9ea7af;
- font: 400 16px/1 dashicons;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ background: transparent;
+ color: #0073aa;
+ /* line-height tweak to vertically center the icon cross browsers */
+ font: 400 16px/1.28 dashicons;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- speak: none;
</del><span class="cx" style="display: block; padding: 0 10px"> -webkit-font-smoothing: antialiased;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.tagchecklist .ntdelbutton:focus:before {
- color: #00a0d2;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton:focus {
+ outline: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+ color: #c00;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+ -webkit-box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* THE TAG CLOUD. */
</span><span class="cx" style="display: block; padding: 0 10px"> .tagsdiv + p {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2194,6 +2176,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-size: 14px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .ui-autocomplete li {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2201,9 +2184,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 4px 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> white-space: nowrap;
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: left;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ cursor: pointer;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.ui-autocomplete li.ui-state-focus {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Colors for the wplink toolbar autocomplete. */
+.ui-autocomplete .ui-state-focus {
</ins><span class="cx" style="display: block; padding: 0 10px"> background-color: #ddd;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- cursor: pointer;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/* Colors for the tags autocomplete. */
+.wp-tags-autocomplete .ui-state-focus {
+ background-color: #0073aa;
+ color: #fff;
+}
</ins></span></pre></div>
<a id="trunksrcwpadminincludesclasswppressthisphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/class-wp-press-this.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/class-wp-press-this.php 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/includes/class-wp-press-this.php 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -940,7 +940,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $user_can_assign_terms ) {
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button-link tagcloud-link" id="link-post_tag" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludesmetaboxesphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/meta-boxes.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/meta-boxes.php 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/includes/meta-boxes.php 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -442,7 +442,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="tagchecklist"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( $user_can_assign_terms ) : ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<p class="hide-if-no-js"><a href="#titlediv" class="tagcloud-link" id="link-<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->choose_from_most_used; ?></a></p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<p class="hide-if-no-js"><button type="button" class="button-link tagcloud-link" id="link-<?php echo $tax_name; ?>" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminjstagsboxjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/tags-box.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/tags-box.js 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/js/tags-box.js 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -86,16 +86,28 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // If tags editing isn't disabled, create the X button.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! disabled ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- xbutton = $( '<a id="' + id + '-check-num-' + key + '" class="ntdelbutton" tabindex="0">X</a>' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Build the X buttons, hide the X icon with aria-hidden and
+ * use visually hidden text for screen readers.
+ */
+ xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
+ '<span class="remove-tag-icon" aria-hidden="true"></span>' +
+ '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + val + '</span>' +
+ '</button>' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> xbutton.on( 'click keypress', function( e ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Trigger function if pressed Enter - keyboard navigation
- if ( e.type === 'click' || e.keyCode === 13 ) {
- // When using keyboard, move focus back to the new tag field.
- if ( e.keyCode === 13 ) {
- $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // On click or when using the Enter/Spacebar keys.
+ if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
+ /*
+ * When using the keyboard, move focus back to the
+ * add new tag field. Note: when releasing the pressed
+ * key this will fire the `keyup` event on the input.
+ */
+ if ( 13 === e.keyCode || 32 === e.keyCode ) {
+ $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tagBox.userAction = 'remove';
</ins><span class="cx" style="display: block; padding: 0 10px"> tagBox.parseTags( this );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -106,6 +118,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Append the span to the tag list.
</span><span class="cx" style="display: block; padding: 0 10px"> tagchecklist.append( span );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // The buttons list is built now, give feedback to screen reader users.
+ tagBox.screenReadersMessage();
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> flushTags : function( el, a, f ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -117,7 +131,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> text = a ? $(a).text() : newtag.val();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( 'undefined' == typeof( text ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Return if there's no new tag or if the input field is empty.
+ * Note: when using the keyboard to add tags, focus is moved back to
+ * the input field and the `keyup` event attached on this field will
+ * fire when releasing the pressed key. Checking also for the field
+ * emptiness avoids to set the tags and call quickClicks() again.
+ */
+ if ( 'undefined' == typeof( text ) || '' === text ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -148,6 +169,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'a', r ).click( function() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tagBox.userAction = 'add';
</ins><span class="cx" style="display: block; padding: 0 10px"> tagBox.flushTags( $( '#' + tax ), this );
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -156,6 +178,37 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Track the user's last action.
+ *
+ * @since 4.7.0
+ */
+ userAction: '',
+
+ /**
+ * Dispatch an audible message to screen readers.
+ *
+ * @since 4.7.0
+ */
+ screenReadersMessage: function() {
+ var message;
+
+ switch ( this.userAction ) {
+ case 'remove':
+ message = window.tagsSuggestL10n.termRemoved;
+ break;
+
+ case 'add':
+ message = window.tagsSuggestL10n.termAdded;
+ break;
+
+ default:
+ return;
+ }
+
+ window.wp.a11y.speak( message, 'assertive' );
+ },
+
</ins><span class="cx" style="display: block; padding: 0 10px"> init : function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var ajaxtag = $('div.ajaxtag');
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -164,11 +217,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( '.tagadd', ajaxtag ).click( function() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tagBox.userAction = 'add';
</ins><span class="cx" style="display: block; padding: 0 10px"> tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'input.newtag', ajaxtag ).keyup( function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 13 == event.which ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tagBox.userAction = 'add';
</ins><span class="cx" style="display: block; padding: 0 10px"> tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> event.stopPropagation();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -189,14 +244,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // tag cloud
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Fetch and toggle the Tag cloud.
</ins><span class="cx" style="display: block; padding: 0 10px"> $('.tagcloud-link').click(function(){
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- tagBox.get( $(this).attr('id') );
- $(this).unbind().click(function(){
- $(this).siblings('.the-tagcloud').toggle();
- return false;
- });
- return false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // On the first click, fetch the tag cloud and insert it in the DOM.
+ tagBox.get( $( this ).attr( 'id' ) );
+ // Update button state, remove previous click event and attach a new one to toggle the cloud.
+ $( this )
+ .attr( 'aria-expanded', 'true' )
+ .unbind()
+ .click( function() {
+ $( this )
+ .attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
+ .siblings( '.the-tagcloud' ).toggle();
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span></span></pre></div>
<a id="trunksrcwpadminjstagssuggestjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/tags-suggest.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/tags-suggest.js 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-admin/js/tags-suggest.js 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,13 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Default settings for jQuery UI Autocomplete for use with non-hierarchical taxonomies.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> ( function( $ ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( typeof window.tagsSuggestL10n === 'undefined' || typeof window.uiAutocompleteL10n === 'undefined' ) {
+ return;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var tempID = 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var separator = ( window.tagsSuggestL10n && window.tagsSuggestL10n.tagDelimiter ) || ',';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var separator = window.tagsSuggestL10n.tagDelimiter || ',';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> function split( val ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return val.split( new RegExp( separator + '\\s*' ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10,19 +17,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return split( term ).pop();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Add UI Autocomplete to an input or textarea element with presets for use
+ * with non-hierarchical taxonomies.
+ *
+ * Example: `$( element ).wpTagsSuggest( options )`.
+ *
+ * The taxonomy can be passed in a `data-wp-taxonomy` attribute on the element or
+ * can be in `options.taxonomy`.
+ *
+ * @since 4.7
+ *
+ * @param {object} options Options that are passed to UI Autocomplete. Can be used to override the default settings.
+ * @returns {object} jQuery instance.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $.fn.wpTagsSuggest = function( options ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var cache;
</span><span class="cx" style="display: block; padding: 0 10px"> var last;
</span><span class="cx" style="display: block; padding: 0 10px"> var $element = $( this );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> options = options || {};
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> var taxonomy = options.taxonomy || $element.attr( 'data-wp-taxonomy' ) || 'post_tag';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> delete( options.taxonomy );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> options = $.extend( {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- source: function( request, response ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ source: function( request, response ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var term;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( last === request.term ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -39,25 +60,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } ).always( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> $element.removeClass( 'ui-autocomplete-loading' ); // UI fails to remove this sometimes?
</span><span class="cx" style="display: block; padding: 0 10px"> } ).done( function( data ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var value;
- var terms = [];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var tagName;
+ var tags = [];
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( data ) {
</span><span class="cx" style="display: block; padding: 0 10px"> data = data.split( '\n' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- for ( value in data ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ for ( tagName in data ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var id = ++tempID;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- terms.push({
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tags.push({
</ins><span class="cx" style="display: block; padding: 0 10px"> id: id,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- name: data[value]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ name: data[tagName]
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- cache = terms;
- response( terms );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ cache = tags;
+ response( tags );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- response( terms );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ response( tags );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -80,11 +101,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $element.val( tags.join( separator + ' ' ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $.ui.keyCode.TAB === event.keyCode ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
- // Audible confirmation message when a tag has been selected.
- window.wp.a11y.speak( window.uiAutocompleteL10n.itemSelected );
- }
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Audible confirmation message when a tag has been selected.
+ window.wp.a11y.speak( window.tagsSuggestL10n.termSelected, 'assertive' );
</ins><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> } else if ( $.ui.keyCode.ENTER === event.keyCode ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Do not close Quick Edit / Bulk Edit
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -105,15 +123,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> my: 'left top+2'
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> messages: {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- noResults: ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.noResults : '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ noResults: window.uiAutocompleteL10n.noResults,
</ins><span class="cx" style="display: block; padding: 0 10px"> results: function( number ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
- if ( number > 1 ) {
- return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( number > 1 ) {
+ return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return window.uiAutocompleteL10n.oneResult;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return window.uiAutocompleteL10n.oneResult;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }, options );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -160,7 +176,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // so we need to find the active item with other means.
</span><span class="cx" style="display: block; padding: 0 10px"> $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> return this;
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2016-10-23 15:55:53 UTC (rev 38879)
+++ trunk/src/wp-includes/script-loader.php 2016-10-23 18:15:07 UTC (rev 38880)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -538,6 +538,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'tags-suggest', "/wp-admin/js/tags-suggest$suffix.js", array( 'jquery-ui-autocomplete', 'wp-a11y' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->localize( 'tags-suggest', 'tagsSuggestL10n', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'tagDelimiter' => _x( ',', 'tag delimiter' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'removeTerm' => __( 'Remove term:' ),
+ 'termSelected' => __( 'Term selected.' ),
+ 'termAdded' => __( 'Term added.' ),
+ 'termRemoved' => __( 'Term removed.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );
</span></span></pre>
</div>
</div>
</body>
</html>