Changeset 8973

Timestamp:

06/20/2019 01:16:39 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Trac: Improve accessibility of keywords and focuses on Trac ticket pages.

Props afercia.
Fixes #4495.

Location:

sites/trunk/wordpress.org/public_html/style/trac

Files:

• wp-trac.css (modified) (8 diffs)
• wp-trac.js (modified) (12 diffs)

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

@@ -698 +698 @@
     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;
@@ -1027 +1034 @@
     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;
@@ -1036 +1053 @@
 }
 #propertyform[action*="/newticket"] #properties table.trac-properties > tbody > tr > td#focuses {
-    padding-left: 0;
+    padding-left: 58px;
 }
 #propertyform > p,
@@ -1452 +1469 @@
     cursor: help;
 }
-#keyword-bin span a {
+#keyword-bin .keyword-button-remove {
     margin: 1px 0 0 -15px;
+    padding: 0;
     cursor: pointer;
     width: 15px;
@@ -1467 +1485 @@
     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 {
@@ -1484 +1520 @@
 #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;
 }
 
@@ -1496 +1537 @@
 }
 #properties table.trac-properties > tbody > tr > td#focuses {
-    padding: .6em 0 .3em 60px;
-    height: 66px;
+    padding: .6em 0 .3em 52px;
 }
 #focuses span {
@@ -1511 +1551 @@
 #focuses li {
     font-size: 12px;
+    float: left;
+    margin: 0 6px 6px 0;
+}
+#focuses .core-focuses-button {
     display: inline-block;
-    float: left;
-    margin: 0 0 6px 6px;
-    -webkit-border-radius: 3px;
+    margin: 0;
+    padding: 4px 7px;
+    color: inherit;
+    border: 1px solid #ccc;
     border-radius: 3px;
     background: #eee;
-    color: #aaa;
-}
-#focuses a {
-    display: inline-block;
-    padding: 4px 7px;
-    color: inherit;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background: inherit;
-    text-decoration: none;
-    border-bottom: none;
-}
-#focuses li:hover,
-#focuses a:focus {
-    color: #000;
     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;
 }
 

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js

@@ -924 +924 @@
             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.
@@ -947 +950 @@
 
                     // 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' );
+                            } );
                     });
 
@@ -966 +975 @@
                     });
 
-                    // 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();
+                        }
+                    } );
                 },
 
@@ -978 +1011 @@
                     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.
@@ -990 +1023 @@
 
                     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 );
@@ -1012 +1046 @@
                     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]);
@@ -1087 +1121 @@
 
                     // 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);
@@ -1172 +1206 @@
 
                 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 />', {
@@ -1183 +1219 @@
                         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 );
-
-                container.on( 'click', 'a', addRemove );
+                ul.wrap( '<fieldset id="fieldset-focuses" />' );
+                ul.before( '<legend class="core-focuses-legend">Focuses:</legend>' );
+
+                container.on( 'click', '.core-focuses-button', addRemove );
                 container.closest( 'form' ).on( 'submit', submit );
                 $( '#field-component' ).on( 'change', componentSync );
@@ -1199 +1237 @@
                     add( focus );
                 }
-                return false;
             }
 
@@ -1207 +1244 @@
                 }
                 focus.addClass( 'active' );
+                focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'true' );
                 focuses.push( focus.data( 'focus' ) );
                 updateField();
@@ -1216 +1254 @@
                 }
                 focus.removeClass( 'active' );
+                focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'false' );
                 var remove = focus.data( 'focus' );
                 focuses = $.grep( focuses, function( value ) {