Index: wordpress.org/public_html/style/trac/wp-trac.css
===================================================================
--- wordpress.org/public_html/style/trac/wp-trac.css	(revision 8903)
+++ wordpress.org/public_html/style/trac/wp-trac.css	(working copy)
@@ -697,6 +697,13 @@
 	top: auto;
 	left: auto;
 }
+/* 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;
+}
 input[type=text], input.textwidget, textarea {
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -1026,6 +1033,16 @@
 #propertyform[action*="/newticket"] #properties legend {
 	display: none;
 }
+.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,
 #propertyform[action*="/newticket"] fieldset {
 	padding: 0;
 	border: none;
@@ -1035,7 +1052,7 @@
 	display: none;
 }
 #propertyform[action*="/newticket"] #properties table.trac-properties > tbody > tr > td#focuses {
-	padding-left: 0;
+	padding-left: 58px;
 }
 #propertyform > p,
 #propertyform > .buttons {
@@ -1451,8 +1468,9 @@
 #keyword-bin span[title] {
 	cursor: help;
 }
-#keyword-bin span a {
+#keyword-bin .keyword-button-remove {
 	margin: 1px 0 0 -15px;
+	padding: 0;
 	cursor: pointer;
 	width: 15px;
 	height: 15px;
@@ -1466,15 +1484,33 @@
 	background: none;
 	color: #999;
 }
-#keyword-bin span a:hover {
+#keyword-bin .keyword-button-remove:hover,
+#keyword-bin .keyword-button-remove:focus {
 	color: #c00;
 }
 #edit-keywords {
 	cursor: pointer;
-	font-size: 8px;
-	color: #999;
-	margin: 6px 6px 0 6px;
+	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;
 }
+#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;
+}
 .has-js #field-keywords {
 	width: 92%;
 	display: none;
@@ -1483,9 +1519,14 @@
 }
 #keyword-label {
 	float: left;
-	padding: 5px 6px 5px 0;
+	padding: 2px 0.4em 2px 0.1em; /* emulates table cell padding */
 	text-align: right;
+	white-space: nowrap;
 }
+#keyword-add {
+	margin-left: calc( 2px + .3em ); /* emulates table cell padding */
+	margin-right: 6px;
+}
 
 /* =Focuses */
 body.core #reportfilters {
@@ -1495,8 +1536,7 @@
 	display: none;
 }
 #properties table.trac-properties > tbody > tr > td#focuses {
-	padding: .6em 0 .3em 60px;
-	height: 66px;
+	padding: .6em 0 .3em 52px;
 }
 #focuses span {
 	float: left;
@@ -1510,33 +1550,30 @@
 }
 #focuses li {
 	font-size: 12px;
-	display: inline-block;
 	float: left;
-	margin: 0 0 6px 6px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	background: #eee;
-	color: #aaa;
+	margin: 0 6px 6px 0;
 }
-#focuses a {
+#focuses .core-focuses-button {
 	display: inline-block;
+	margin: 0;
 	padding: 4px 7px;
 	color: inherit;
-	-webkit-border-radius: 3px;
+	border: 1px solid #ccc;
 	border-radius: 3px;
-	background: inherit;
-	text-decoration: none;
-	border-bottom: none;
-}
-#focuses li:hover,
-#focuses a:focus {
-	color: #000;
+	background: #eee;
 	cursor: pointer;
 }
-#focuses li.active,
-#focuses li.active a:focus {
+#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 {
 	background: #666;
 	color: #fff;
+	border-color: #666;
 }
 
 /*
Index: wordpress.org/public_html/style/trac/wp-trac.js
===================================================================
--- wordpress.org/public_html/style/trac/wp-trac.js	(revision 8903)
+++ wordpress.org/public_html/style/trac/wp-trac.js	(working copy)
@@ -923,11 +923,15 @@
 
 			return {
 				init: function() {
-					elements.hiddenEl = $('#field-keywords');
+					elements.hiddenEl = $( '#field-keywords' ).attr( 'aria-label', 'Manual keywords' );
+
 					if ( ! elements.hiddenEl.length ) {
 						return;
 					}
 
+					// Attach change event handler on the field-keywords input.
+					elements.hiddenEl.change( wpTrac.workflow.populate );
+
 					// Designed so the list could have come from another file.
 					if ( typeof coreKeywordList === 'undefined' ) {
 						return;
@@ -946,9 +950,15 @@
 					elements.hiddenEl.parents('form').submit( wpTrac.workflow.submit );
 
 					// Keyword removal.
-					elements.bin.on( 'click', 'a', function(e) {
-						e.preventDefault();
+					elements.bin.on( 'click', '.keyword-button-remove', function() {
 						wpTrac.workflow.removeKeyword( $(this).parent() );
+						// 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' );
+							} );
 					});
 
 					// Keyword adds.
@@ -965,12 +975,36 @@
 						$(this).val('');
 					});
 
-					// Manual link.
+					// Manual keyword button.
 					$('#edit-keywords').click( function() {
+						if ( elements.hiddenEl.is( ':visible' ) ) {
+							elements.hiddenEl.hide();
+							$( this ).attr( 'aria-expanded', 'false' );
+							return;
+						}
+
+						$( this ).attr( 'aria-expanded', 'true' );
 						elements.hiddenEl.show().focus();
-						$(this).hide();
-						elements.hiddenEl.change( wpTrac.workflow.populate );
 					});
+
+					// 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();
+						}
+					} );
 				},
 
 				// Generates the workflow template.
@@ -977,8 +1011,8 @@
 				template : function() {
 					var container = elements.hiddenEl.parent(), html, labelWidth;
 
-					// Necessary to keep everything in line. The + 4 is a careful CSS balance.
-					labelWidth = container.prev().width() + 4;
+					// Necessary to keep everything in line.
+					labelWidth = container.prev().width();
 
 					// Rearrange the table to suit our needs.
 					container.prev().detach().end()
@@ -989,7 +1023,8 @@
 					$('#field-owner').parents('tr').hide();
 
 					html = '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
-					html += '<select id="keyword-add"><option value=""> - Add - </option></select> <a id="edit-keywords">manual</a></div>';
+					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>';
 					html += '<div id="keyword-bin"></div>';
 					container.prepend( html );
 					elements.bin = $('#keyword-bin');
@@ -1011,7 +1046,7 @@
 					// If we have a non-empty keyword, let's go through the process of adding the spans.
 					if ( 1 !== keywords.length || keywords[0] !== '' ) {
 						$.each( keywords, function( k, v ) {
-							var html = $('<span />').text(v).attr('data-keyword', v).prepend('<a class="dashicons dashicons-dismiss" href="#" />');
+							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" />' );
 							if ( v in coreKeywordList ) {
 								html.attr('title', coreKeywordList[v]);
 							}
@@ -1086,7 +1121,7 @@
 					}
 
 					// Add it to the bin, and refresh the hidden input.
-					html = $('<span />').text(keyword).attr('data-keyword', keyword).prepend('<a class="dashicons dashicons-dismiss" href="#" />');
+					html = $( '<span />' ).text( keyword ).attr( 'data-keyword', keyword ).prepend( '<button type="button" aria-label="Remove ' + keyword +' keyword" class="keyword-button-remove dashicons dashicons-dismiss" />' );
 					if ( title ) {
 						html.attr('title', title);
 					}
@@ -1171,22 +1206,26 @@
 				originalFocuses = $.merge( [], focuses );
 
 				container = $( '#focuses' );
-				container.append( '<span>Focuses:</span>' );
+
 				ul = $( '<ul />' );
 				$.each( coreFocusesList, function( focus, description ) {
+					var ariaPressed = 'false';
 					classes = focus.replace( ' ', '-' );
 					if ( -1 !== $.inArray( focus, focuses ) ) {
 						classes += ' active';
+						ariaPressed = 'true';
 					}
 					ul.append( $( '<li />', {
 						'data-focus' : focus,
 						title: description,
 						class: classes
-					} ).html( '<a href="#">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );
+					} ).html( '<button type="button" class="core-focuses-button" aria-pressed="' + ariaPressed + '">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );
 				});
 				ul.appendTo( container );
+				ul.wrap( '<fieldset id="fieldset-focuses" />' );
+				ul.before( '<legend class="core-focuses-legend">Focuses:</legend>' );
 
-				container.on( 'click', 'a', addRemove );
+				container.on( 'click', '.core-focuses-button', addRemove );
 				container.closest( 'form' ).on( 'submit', submit );
 				$( '#field-component' ).on( 'change', componentSync );
 			}
@@ -1198,7 +1237,6 @@
 				} else {
 					add( focus );
 				}
-				return false;
 			}
 
 			function add( focus ) {
@@ -1206,6 +1244,7 @@
 					focus = container.find( 'li.' + focus );
 				}
 				focus.addClass( 'active' );
+				focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'true' );
 				focuses.push( focus.data( 'focus' ) );
 				updateField();
 			}
@@ -1215,6 +1254,7 @@
 					focus = container.find( 'li.' + focus );
 				}
 				focus.removeClass( 'active' );
+				focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'false' );
 				var remove = focus.data( 'focus' );
 				focuses = $.grep( focuses, function( value ) {
 					return value !== remove;