<!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>[8973] sites/trunk/wordpress.org/public_html/style/trac: Trac: Improve accessibility of keywords and focuses on Trac ticket pages.</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 { white-space: pre-line; 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="http://meta.trac.wordpress.org/changeset/8973">8973</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/8973","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>SergeyBiryukov</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-06-20 13:16:39 +0000 (Thu, 20 Jun 2019)</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'>Trac: Improve accessibility of keywords and focuses on Trac ticket pages.
Props afercia.
Fixes <a href="http://meta.trac.wordpress.org/ticket/4495">#4495</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlstyletracwptraccss">sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlstyletracwptracjs">sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlstyletracwptraccss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css 2019-06-20 13:15:50 UTC (rev 8972)
+++ sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css 2019-06-20 13:16:39 UTC (rev 8973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -697,6 +697,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> top: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* hide focus while clicking the buttons, pending better focus styles */
+button:focus:active,
+input[type=button]:focus:active,
+input[type=submit]:focus:active,
+input[type=reset]:focus:active {
+ outline: none;
+}
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type=text], input.textwidget, textarea {
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-border-radius: 3px;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 3px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1026,6 +1033,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #propertyform[action*="/newticket"] #properties legend {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.core-focuses-legend {
+ display: block !important;
+ color: inherit;
+ margin: 0 0 6px;
+ padding: 0;
+ font-size: inherit;
+ font-weight: normal;
+ transform: translateY(-2px);
+}
+#fieldset-focuses,
</ins><span class="cx" style="display: block; padding: 0 10px"> #propertyform[action*="/newticket"] fieldset {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> border: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1035,7 +1052,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #propertyform[action*="/newticket"] #properties table.trac-properties > tbody > tr > td#focuses {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding-left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: 58px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #propertyform > p,
</span><span class="cx" style="display: block; padding: 0 10px"> #propertyform > .buttons {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1451,8 +1468,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #keyword-bin span[title] {
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: help;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#keyword-bin span a {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#keyword-bin .keyword-button-remove {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 1px 0 0 -15px;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> height: 15px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1466,15 +1484,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: none;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #999;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#keyword-bin span a:hover {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#keyword-bin .keyword-button-remove:hover,
+#keyword-bin .keyword-button-remove:focus {
</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"> #edit-keywords {
</span><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">- font-size: 8px;
- color: #999;
- margin: 6px 6px 0 6px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-size: 13px;
+ color: inherit;
+ margin: 2px 0;
+ border-radius: 3px;
+ vertical-align: middle;
+ background: #f7f7f7;
+ border: 1px solid #ccc;
+ box-shadow: 0 1px 0 #ccc;
+ color: #555;
+ box-shadow: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#edit-keywords:hover,
+#edit-keywords:focus {
+ background: #fafafa;
+ color: #23282d;
+ border-color: #999;
+}
+/* hide focus when moved programmatically, pending better focus styles */
+#edit-keywords.hide-programmatic-focus:focus {
+ outline: none;
+}
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-js #field-keywords {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 92%;
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1483,9 +1519,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #keyword-label {
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 5px 6px 5px 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 2px 0.4em 2px 0.1em; /* emulates table cell padding */
</ins><span class="cx" style="display: block; padding: 0 10px"> text-align: right;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ white-space: nowrap;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#keyword-add {
+ margin-left: calc( 2px + .3em ); /* emulates table cell padding */
+ margin-right: 6px;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* =Focuses */
</span><span class="cx" style="display: block; padding: 0 10px"> body.core #reportfilters {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1495,8 +1536,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #properties table.trac-properties > tbody > tr > td#focuses {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: .6em 0 .3em 60px;
- height: 66px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: .6em 0 .3em 52px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #focuses span {
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1510,33 +1550,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #focuses li {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 12px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- display: inline-block;
</del><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0 0 6px 6px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- background: #eee;
- color: #aaa;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0 6px 6px 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#focuses a {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#focuses .core-focuses-button {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 4px 7px;
</span><span class="cx" style="display: block; padding: 0 10px"> color: inherit;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- -webkit-border-radius: 3px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 1px solid #ccc;
</ins><span class="cx" style="display: block; padding: 0 10px"> border-radius: 3px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: inherit;
- text-decoration: none;
- border-bottom: none;
-}
-#focuses li:hover,
-#focuses a:focus {
- color: #000;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #eee;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#focuses li.active,
-#focuses li.active a:focus {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#focuses .core-focuses-button:hover,
+#focuses .core-focuses-button:focus {
+ background: #fafafa;
+ color: #23282d;
+ border-color: #999;
+}
+#focuses li.active .core-focuses-button,
+#focuses li.active .core-focuses-button:focus {
</ins><span class="cx" style="display: block; padding: 0 10px"> background: #666;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: #666;
</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="sitestrunkwordpressorgpublic_htmlstyletracwptracjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js 2019-06-20 13:15:50 UTC (rev 8972)
+++ sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js 2019-06-20 13:16:39 UTC (rev 8973)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -923,11 +923,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return {
</span><span class="cx" style="display: block; padding: 0 10px"> init: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- elements.hiddenEl = $('#field-keywords');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ elements.hiddenEl = $( '#field-keywords' ).attr( 'aria-label', 'Manual keywords' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! elements.hiddenEl.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</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">+ // Attach change event handler on the field-keywords input.
+ elements.hiddenEl.change( wpTrac.workflow.populate );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Designed so the list could have come from another file.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( typeof coreKeywordList === 'undefined' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -946,9 +949,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> elements.hiddenEl.parents('form').submit( wpTrac.workflow.submit );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Keyword removal.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- elements.bin.on( 'click', 'a', function(e) {
- e.preventDefault();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ elements.bin.on( 'click', '.keyword-button-remove', function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> wpTrac.workflow.removeKeyword( $(this).parent() );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Move focus to the Manual keyword button to avoid focus loss on keyword removal.
+ $( '#edit-keywords' )
+ .addClass( 'hide-programmatic-focus' )
+ .focus()
+ .on( 'blur', function() {
+ $( this ).removeClass( 'hide-programmatic-focus' );
+ } );
</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"> // Keyword adds.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -965,12 +974,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $(this).val('');
</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">- // Manual link.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Manual keyword button.
</ins><span class="cx" style="display: block; padding: 0 10px"> $('#edit-keywords').click( function() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( elements.hiddenEl.is( ':visible' ) ) {
+ elements.hiddenEl.hide();
+ $( this ).attr( 'aria-expanded', 'false' );
+ return;
+ }
+
+ $( this ).attr( 'aria-expanded', 'true' );
</ins><span class="cx" style="display: block; padding: 0 10px"> elements.hiddenEl.show().focus();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $(this).hide();
- elements.hiddenEl.change( wpTrac.workflow.populate );
</del><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Handle keyboard interaction on the field-keywords field.
+ $( '#field-keywords' ).on( 'keydown', function( event ) {
+ // When pressing Enter or Escape.
+ if ( event.which === 13 || event.which === 27 ) {
+ // Prevent form submission.
+ event.preventDefault();
+ // Hide the input field and populate the keywords.
+ elements.hiddenEl.hide();
+ /*
+ * Move focus back to the Manual keyword button.
+ * This blurs the field and triggers the `change`
+ * event thus the keywords are populated.
+ */
+ $( '#edit-keywords' )
+ .attr( 'aria-expanded', 'false' )
+ .focus();
+ }
+ } );
</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"> // Generates the workflow template.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -977,8 +1010,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> template : function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var container = elements.hiddenEl.parent(), html, labelWidth;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Necessary to keep everything in line. The + 4 is a careful CSS balance.
- labelWidth = container.prev().width() + 4;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Necessary to keep everything in line.
+ labelWidth = container.prev().width();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Rearrange the table to suit our needs.
</span><span class="cx" style="display: block; padding: 0 10px"> container.prev().detach().end()
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -989,7 +1022,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $('#field-owner').parents('tr').hide();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> html = '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- html += '<select id="keyword-add"><option value=""> - Add - </option></select> <a id="edit-keywords">manual</a></div>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ html += '<select id="keyword-add"><option value=""> - Add - </option></select>';
+ html += '<button type="button" id="edit-keywords" aria-label="Manual keyword" aria-expanded="false">Manual</button></div>';
</ins><span class="cx" style="display: block; padding: 0 10px"> html += '<div id="keyword-bin"></div>';
</span><span class="cx" style="display: block; padding: 0 10px"> container.prepend( html );
</span><span class="cx" style="display: block; padding: 0 10px"> elements.bin = $('#keyword-bin');
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1011,7 +1045,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // If we have a non-empty keyword, let's go through the process of adding the spans.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 1 !== keywords.length || keywords[0] !== '' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $.each( keywords, function( k, v ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var html = $('<span />').text(v).attr('data-keyword', v).prepend('<a class="dashicons dashicons-dismiss" href="#" />');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var html = $( '<span />' ).text( v ).attr( 'data-keyword', v ).prepend( '<button type="button" aria-label="Remove ' + v +' keyword" class="keyword-button-remove dashicons dashicons-dismiss" />' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( v in coreKeywordList ) {
</span><span class="cx" style="display: block; padding: 0 10px"> html.attr('title', coreKeywordList[v]);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1086,7 +1120,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"> // Add it to the bin, and refresh the hidden input.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- html = $('<span />').text(keyword).attr('data-keyword', keyword).prepend('<a class="dashicons dashicons-dismiss" href="#" />');
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ html = $( '<span />' ).text( keyword ).attr( 'data-keyword', keyword ).prepend( '<button type="button" aria-label="Remove ' + keyword +' keyword" class="keyword-button-remove dashicons dashicons-dismiss" />' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( title ) {
</span><span class="cx" style="display: block; padding: 0 10px"> html.attr('title', title);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1171,22 +1205,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> originalFocuses = $.merge( [], focuses );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> container = $( '#focuses' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- container.append( '<span>Focuses:</span>' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> ul = $( '<ul />' );
</span><span class="cx" style="display: block; padding: 0 10px"> $.each( coreFocusesList, function( focus, description ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var ariaPressed = 'false';
</ins><span class="cx" style="display: block; padding: 0 10px"> classes = focus.replace( ' ', '-' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( -1 !== $.inArray( focus, focuses ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> classes += ' active';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ariaPressed = 'true';
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> ul.append( $( '<li />', {
</span><span class="cx" style="display: block; padding: 0 10px"> 'data-focus' : focus,
</span><span class="cx" style="display: block; padding: 0 10px"> title: description,
</span><span class="cx" style="display: block; padding: 0 10px"> class: classes
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } ).html( '<a href="#">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } ).html( '<button type="button" class="core-focuses-button" aria-pressed="' + ariaPressed + '">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> ul.appendTo( container );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ul.wrap( '<fieldset id="fieldset-focuses" />' );
+ ul.before( '<legend class="core-focuses-legend">Focuses:</legend>' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- container.on( 'click', 'a', addRemove );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.on( 'click', '.core-focuses-button', addRemove );
</ins><span class="cx" style="display: block; padding: 0 10px"> container.closest( 'form' ).on( 'submit', submit );
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#field-component' ).on( 'change', componentSync );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1198,7 +1236,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> add( focus );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return false;
</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"> function add( focus ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1206,6 +1243,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> focus = container.find( 'li.' + focus );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> focus.addClass( 'active' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'true' );
</ins><span class="cx" style="display: block; padding: 0 10px"> focuses.push( focus.data( 'focus' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> updateField();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1215,6 +1253,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> focus = container.find( 'li.' + focus );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> focus.removeClass( 'active' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'false' );
</ins><span class="cx" style="display: block; padding: 0 10px"> var remove = focus.data( 'focus' );
</span><span class="cx" style="display: block; padding: 0 10px"> focuses = $.grep( focuses, function( value ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return value !== remove;
</span></span></pre>
</div>
</div>
</body>
</html>