Making WordPress.org

Ticket #4495: 4495.diff

File 4495.diff, 10.4 KB (added by afercia, 5 years ago)
  • wordpress.org/public_html/style/trac/wp-trac.css

     
    697697        top: auto;
    698698        left: auto;
    699699}
     700/* hide focus while clicking the buttons, pending better focus styles */
     701button:focus:active,
     702input[type=button]:focus:active,
     703input[type=submit]:focus:active,
     704input[type=reset]:focus:active {
     705        outline: none;
     706}
    700707input[type=text], input.textwidget, textarea {
    701708        -webkit-border-radius: 3px;
    702709        border-radius: 3px;
     
    10261033#propertyform[action*="/newticket"] #properties legend {
    10271034        display: none;
    10281035}
     1036.core-focuses-legend {
     1037        display: block !important;
     1038        color: inherit;
     1039        margin: 0 0 6px;
     1040        padding: 0;
     1041        font-size: inherit;
     1042        font-weight: normal;
     1043        transform: translateY(-2px);
     1044}
     1045#fieldset-focuses,
    10291046#propertyform[action*="/newticket"] fieldset {
    10301047        padding: 0;
    10311048        border: none;
     
    10351052        display: none;
    10361053}
    10371054#propertyform[action*="/newticket"] #properties table.trac-properties > tbody > tr > td#focuses {
    1038         padding-left: 0;
     1055        padding-left: 58px;
    10391056}
    10401057#propertyform > p,
    10411058#propertyform > .buttons {
     
    14511468#keyword-bin span[title] {
    14521469        cursor: help;
    14531470}
    1454 #keyword-bin span a {
     1471#keyword-bin .keyword-button-remove {
    14551472        margin: 1px 0 0 -15px;
     1473        padding: 0;
    14561474        cursor: pointer;
    14571475        width: 15px;
    14581476        height: 15px;
     
    14661484        background: none;
    14671485        color: #999;
    14681486}
    1469 #keyword-bin span a:hover {
     1487#keyword-bin .keyword-button-remove:hover,
     1488#keyword-bin .keyword-button-remove:focus {
    14701489        color: #c00;
    14711490}
    14721491#edit-keywords {
    14731492        cursor: pointer;
    1474         font-size: 8px;
    1475         color: #999;
    1476         margin: 6px 6px 0 6px;
     1493        font-size: 13px;
     1494        color: inherit;
     1495        margin: 2px 0;
     1496        border-radius: 3px;
     1497        vertical-align: middle;
     1498        background: #f7f7f7;
     1499        border: 1px solid #ccc;
     1500        box-shadow: 0 1px 0 #ccc;
     1501        color: #555;
     1502        box-shadow: none;
    14771503}
     1504#edit-keywords:hover,
     1505#edit-keywords:focus {
     1506        background: #fafafa;
     1507        color: #23282d;
     1508        border-color: #999;
     1509}
     1510/* hide focus when moved programmatically, pending better focus styles */
     1511#edit-keywords.hide-programmatic-focus:focus {
     1512        outline: none;
     1513}
    14781514.has-js #field-keywords {
    14791515        width: 92%;
    14801516        display: none;
     
    14831519}
    14841520#keyword-label {
    14851521        float: left;
    1486         padding: 5px 6px 5px 0;
     1522        padding: 2px 0.4em 2px 0.1em; /* emulates table cell padding */
    14871523        text-align: right;
     1524        white-space: nowrap;
    14881525}
     1526#keyword-add {
     1527        margin-left: calc( 2px + .3em ); /* emulates table cell padding */
     1528        margin-right: 6px;
     1529}
    14891530
    14901531/* =Focuses */
    14911532body.core #reportfilters {
     
    14951536        display: none;
    14961537}
    14971538#properties table.trac-properties > tbody > tr > td#focuses {
    1498         padding: .6em 0 .3em 60px;
    1499         height: 66px;
     1539        padding: .6em 0 .3em 52px;
    15001540}
    15011541#focuses span {
    15021542        float: left;
     
    15101550}
    15111551#focuses li {
    15121552        font-size: 12px;
    1513         display: inline-block;
    15141553        float: left;
    1515         margin: 0 0 6px 6px;
    1516         -webkit-border-radius: 3px;
    1517         border-radius: 3px;
    1518         background: #eee;
    1519         color: #aaa;
     1554        margin: 0 6px 6px 0;
    15201555}
    1521 #focuses a {
     1556#focuses .core-focuses-button {
    15221557        display: inline-block;
     1558        margin: 0;
    15231559        padding: 4px 7px;
    15241560        color: inherit;
    1525         -webkit-border-radius: 3px;
     1561        border: 1px solid #ccc;
    15261562        border-radius: 3px;
    1527         background: inherit;
    1528         text-decoration: none;
    1529         border-bottom: none;
    1530 }
    1531 #focuses li:hover,
    1532 #focuses a:focus {
    1533         color: #000;
     1563        background: #eee;
    15341564        cursor: pointer;
    15351565}
    1536 #focuses li.active,
    1537 #focuses li.active a:focus {
     1566#focuses .core-focuses-button:hover,
     1567#focuses .core-focuses-button:focus {
     1568        background: #fafafa;
     1569        color: #23282d;
     1570        border-color: #999;
     1571}
     1572#focuses li.active .core-focuses-button,
     1573#focuses li.active .core-focuses-button:focus {
    15381574        background: #666;
    15391575        color: #fff;
     1576        border-color: #666;
    15401577}
    15411578
    15421579/*
  • wordpress.org/public_html/style/trac/wp-trac.js

     
    923923
    924924                        return {
    925925                                init: function() {
    926                                         elements.hiddenEl = $('#field-keywords');
     926                                        elements.hiddenEl = $( '#field-keywords' ).attr( 'aria-label', 'Manual keywords' );
     927
    927928                                        if ( ! elements.hiddenEl.length ) {
    928929                                                return;
    929930                                        }
    930931
     932                                        // Attach change event handler on the field-keywords input.
     933                                        elements.hiddenEl.change( wpTrac.workflow.populate );
     934
    931935                                        // Designed so the list could have come from another file.
    932936                                        if ( typeof coreKeywordList === 'undefined' ) {
    933937                                                return;
     
    946950                                        elements.hiddenEl.parents('form').submit( wpTrac.workflow.submit );
    947951
    948952                                        // Keyword removal.
    949                                         elements.bin.on( 'click', 'a', function(e) {
    950                                                 e.preventDefault();
     953                                        elements.bin.on( 'click', '.keyword-button-remove', function() {
    951954                                                wpTrac.workflow.removeKeyword( $(this).parent() );
     955                                                // Move focus to the Manual keyword button to avoid focus loss on keyword removal.
     956                                                $( '#edit-keywords' )
     957                                                        .addClass( 'hide-programmatic-focus' )
     958                                                        .focus()
     959                                                        .on( 'blur', function() {
     960                                                                $( this ).removeClass( 'hide-programmatic-focus' );
     961                                                        } );
    952962                                        });
    953963
    954964                                        // Keyword adds.
     
    965975                                                $(this).val('');
    966976                                        });
    967977
    968                                         // Manual link.
     978                                        // Manual keyword button.
    969979                                        $('#edit-keywords').click( function() {
     980                                                if ( elements.hiddenEl.is( ':visible' ) ) {
     981                                                        elements.hiddenEl.hide();
     982                                                        $( this ).attr( 'aria-expanded', 'false' );
     983                                                        return;
     984                                                }
     985
     986                                                $( this ).attr( 'aria-expanded', 'true' );
    970987                                                elements.hiddenEl.show().focus();
    971                                                 $(this).hide();
    972                                                 elements.hiddenEl.change( wpTrac.workflow.populate );
    973988                                        });
     989
     990                                        // Handle keyboard interaction on the field-keywords field.
     991                                        $( '#field-keywords' ).on( 'keydown', function( event ) {
     992                                                // When pressing Enter or Escape.
     993                                                if ( event.which === 13 || event.which === 27 ) {
     994                                                        // Prevent form submission.
     995                                                        event.preventDefault();
     996                                                        // Hide the input field and populate the keywords.
     997                                                        elements.hiddenEl.hide();
     998                                                        /*
     999                                                         * Move focus back to the Manual keyword button.
     1000                                                         * This blurs the field and triggers the `change`
     1001                                                         * event thus the keywords are populated.
     1002                                                         */
     1003                                                        $( '#edit-keywords' )
     1004                                                                .attr( 'aria-expanded', 'false' )
     1005                                                                .focus();
     1006                                                }
     1007                                        } );
    9741008                                },
    9751009
    9761010                                // Generates the workflow template.
     
    9771011                                template : function() {
    9781012                                        var container = elements.hiddenEl.parent(), html, labelWidth;
    9791013
    980                                         // Necessary to keep everything in line. The + 4 is a careful CSS balance.
    981                                         labelWidth = container.prev().width() + 4;
     1014                                        // Necessary to keep everything in line.
     1015                                        labelWidth = container.prev().width();
    9821016
    9831017                                        // Rearrange the table to suit our needs.
    9841018                                        container.prev().detach().end()
     
    9891023                                        $('#field-owner').parents('tr').hide();
    9901024
    9911025                                        html = '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
    992                                         html += '<select id="keyword-add"><option value=""> - Add - </option></select> <a id="edit-keywords">manual</a></div>';
     1026                                        html += '<select id="keyword-add"><option value=""> - Add - </option></select>';
     1027                                        html += '<button type="button" id="edit-keywords" aria-label="Manual keyword" aria-expanded="false">Manual</button></div>';
    9931028                                        html += '<div id="keyword-bin"></div>';
    9941029                                        container.prepend( html );
    9951030                                        elements.bin = $('#keyword-bin');
     
    10111046                                        // If we have a non-empty keyword, let's go through the process of adding the spans.
    10121047                                        if ( 1 !== keywords.length || keywords[0] !== '' ) {
    10131048                                                $.each( keywords, function( k, v ) {
    1014                                                         var html = $('<span />').text(v).attr('data-keyword', v).prepend('<a class="dashicons dashicons-dismiss" href="#" />');
     1049                                                        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" />' );
    10151050                                                        if ( v in coreKeywordList ) {
    10161051                                                                html.attr('title', coreKeywordList[v]);
    10171052                                                        }
     
    10861121                                        }
    10871122
    10881123                                        // Add it to the bin, and refresh the hidden input.
    1089                                         html = $('<span />').text(keyword).attr('data-keyword', keyword).prepend('<a class="dashicons dashicons-dismiss" href="#" />');
     1124                                        html = $( '<span />' ).text( keyword ).attr( 'data-keyword', keyword ).prepend( '<button type="button" aria-label="Remove ' + keyword +' keyword" class="keyword-button-remove dashicons dashicons-dismiss" />' );
    10901125                                        if ( title ) {
    10911126                                                html.attr('title', title);
    10921127                                        }
     
    11711206                                originalFocuses = $.merge( [], focuses );
    11721207
    11731208                                container = $( '#focuses' );
    1174                                 container.append( '<span>Focuses:</span>' );
     1209
    11751210                                ul = $( '<ul />' );
    11761211                                $.each( coreFocusesList, function( focus, description ) {
     1212                                        var ariaPressed = 'false';
    11771213                                        classes = focus.replace( ' ', '-' );
    11781214                                        if ( -1 !== $.inArray( focus, focuses ) ) {
    11791215                                                classes += ' active';
     1216                                                ariaPressed = 'true';
    11801217                                        }
    11811218                                        ul.append( $( '<li />', {
    11821219                                                'data-focus' : focus,
    11831220                                                title: description,
    11841221                                                class: classes
    1185                                         } ).html( '<a href="#">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );
     1222                                        } ).html( '<button type="button" class="core-focuses-button" aria-pressed="' + ariaPressed + '">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );
    11861223                                });
    11871224                                ul.appendTo( container );
     1225                                ul.wrap( '<fieldset id="fieldset-focuses" />' );
     1226                                ul.before( '<legend class="core-focuses-legend">Focuses:</legend>' );
    11881227
    1189                                 container.on( 'click', 'a', addRemove );
     1228                                container.on( 'click', '.core-focuses-button', addRemove );
    11901229                                container.closest( 'form' ).on( 'submit', submit );
    11911230                                $( '#field-component' ).on( 'change', componentSync );
    11921231                        }
     
    11981237                                } else {
    11991238                                        add( focus );
    12001239                                }
    1201                                 return false;
    12021240                        }
    12031241
    12041242                        function add( focus ) {
     
    12061244                                        focus = container.find( 'li.' + focus );
    12071245                                }
    12081246                                focus.addClass( 'active' );
     1247                                focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'true' );
    12091248                                focuses.push( focus.data( 'focus' ) );
    12101249                                updateField();
    12111250                        }
     
    12151254                                        focus = container.find( 'li.' + focus );
    12161255                                }
    12171256                                focus.removeClass( 'active' );
     1257                                focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'false' );
    12181258                                var remove = focus.data( 'focus' );
    12191259                                focuses = $.grep( focuses, function( value ) {
    12201260                                        return value !== remove;