Changeset 8973

Timestamp:

06/20/2019 01:16:39 PM (7 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 ) {