WordPress.org
Get WordPress

Make WordPress Core

Ticket #33902: 33902.2.patch

File 33902.2.patch, 7.9 KB (added by afercia, 10 years ago)

  • src/wp-admin/css/edit.css

     
    11051105}
    11061106
    11071107.ac_results {
     1108        display: none;
     1109        margin: -1px 0 0;
    11081110        padding: 0;
    1109         margin: 0;
    11101111        list-style: none;
    11111112        position: absolute;
    11121113        z-index: 10000;
    1113         display: none;
    1114         border: 1px solid #808080;
     1114        border: 1px solid #5b9dd9;
    11151115        background-color: #fff;
    11161116}
    11171117
    … …  
    11201120}
    11211121
    11221122.ac_results li {
    1123         padding: 2px 5px;
     1123        margin: 0;
     1124        padding: 5px 10px;
    11241125        white-space: nowrap;
    1125         color: #101010;
    1126         text-align: left;
     1126        cursor: pointer;
    11271127}
    11281128
    1129 .ac_over {
    1130         background-color: #f0f0b8;
    1131         cursor: pointer;
     1129.ac_results .ac_over,
     1130.ac_over .ac_match {
     1131        background-color: #0073aa;
     1132        color: #fff;
    11321133}
    11331134
    11341135.ac_match {

  • src/wp-includes/js/jquery/suggest.js

     
    1212 *
    1313 */
    1414
    15 (function($) {
     15window.wp = window.wp || {};
    1616
     17( function( $, wp ) {
     18
     19        var uid = 1,
     20                l10n = window.suggestL10n;
     21
    1722        $.suggest = function(input, options) {
    1823                var $input, $results, timeout, prevLength, cache, cacheSize;
    1924
    20                 $input = $(input).attr("autocomplete", "off");
    21                 $results = $("<ul/>");
     25                $input = $( input ).attr({
     26                        'autocomplete': 'off',
     27                        'autocorrect': 'off',
     28                        'autocapitalize': 'none',
     29                        'spellcheck': 'false',
     30                        'role': 'combobox',
     31                        'aria-owns': 'results-list-' + uid,
     32                        'aria-autocomplete': 'list',
     33                        'aria-expanded': 'false'
     34                });
    2235
    23                 timeout = false;                // hold timeout ID for suggestion results to appear
    24                 prevLength = 0;                 // last recorded length of $input.val()
    25                 cache = [];                             // cache MRU list
    26                 cacheSize = 0;                  // size of cache in chars (bytes?)
     36                $results = $("<ul/>").attr({
     37                        'id': 'results-list-' + uid,
     38                        'role': 'listbox'
     39                });
    2740
     41                // Increment the unique ID in case of multiple suggest on the same page.
     42                uid++;
     43
     44                // Hold timeout ID for suggestion results to appear.
     45                timeout = false;
     46                // Last recorded length of $input.val().
     47                prevLength = 0;
     48                // Cache MRU list
     49                cache = [];
     50                // Size of cache in chars (bytes?).
     51                cacheSize = 0;
     52
    2853                $results.addClass(options.resultsClass).appendTo('body');
    2954
     55                resetPosition();
    3056
    31                 resetPosition();
    3257                $(window)
    3358                        .on( 'load', resetPosition ) // just in case user is changing size of page while loading
    3459                        .on( 'resize', resetPosition );
    3560
    36                 $input.blur(function() {
    37                         setTimeout(function() { $results.hide() }, 200);
    38                 });
     61                $input.blur( function() {
     62                        if ( timeout ) {
     63                                clearTimeout( timeout );
     64                        }
    3965
     66                        setTimeout( function() {
     67                                hideItems();
     68                        }, 200 );
     69                });
     70
    4071                $input.keydown(processKey);
    4172
    4273                function resetPosition() {
    … …  
    4879                        });
    4980                }
    5081
    51 
    5282                function processKey(e) {
    5383
    5484                        // handling up/down/escape requires results to be visible
    … …  
    80110                                                break;
    81111
    82112                                        case 27: //     escape
    83                                                 $results.hide();
     113                                                hideItems();
    84114                                                break;
    85115
    86116                                }
    … …  
    93123                                prevLength = $input.val().length;
    94124
    95125                        }
    96 
    97 
    98126                }
    99127
    100 
    101128                function suggest() {
    102129
    103130                        var q = $.trim($input.val()), multipleSepPos, items;
    … …  
    120147
    121148                                        $.get(options.source, {q: q}, function(txt) {
    122149
    123                                                 $results.hide();
     150                                                hideItems();
    124151
    125152                                                items = parseTxt(txt, q);
    126153
    … …  
    133160
    134161                        } else {
    135162
    136                                 $results.hide();
     163                                hideItems();
    137164
    138165                        }
    139166
    … …  
    170197                }
    171198
    172199                function displayItems(items) {
    173                         var html = '', i;
     200                        var html = '', i, ariaLabel;
    174201                        if (!items)
    175202                                return;
    176203
    177204                        if (!items.length) {
    178                                 $results.hide();
     205                                hideItems();
    179206                                return;
    180207                        }
    181208
    182209                        resetPosition(); // when the form moves after the page has loaded
    183210
    184                         for (i = 0; i < items.length; i++)
    185                                 html += '<li>' + items[i] + '</li>';
     211                        for ( i = 0; i < items.length; i++ ) {
     212                                uid++;
     213                                /*
     214                                 * `aria-label` is used just to override the results text which
     215                                 * is split in two parts, the highlighted term and other parts of the term.
     216                                 */
     217                                ariaLabel = '<span>' + items[i] + '</span>';
     218                                ariaLabel = $( ariaLabel ).text();
     219                                html += '<li role="option" id="suggestion-' + uid + '" aria-label="' + ariaLabel + '">' + items[i] + '</li>';
     220                        }
    186221
    187222                        $results.html(html).show();
    188223
     224                        $input.attr( 'aria-expanded', 'true' );
     225
     226                        setTimeout( function() {
     227                                wp.a11y.speak( l10n.suggestionsFound.replace( '%d', items.length ) );
     228                        }, 10 );
     229
    189230                        $results
    190231                                .children('li')
    191232                                .mouseover(function() {
    … …  
    200241
    201242                }
    202243
     244                function hideItems() {
     245                        $results.hide();
     246                        $input.attr( 'aria-expanded', 'false' );
     247                }
     248
    203249                function parseTxt(txt, q) {
    204250
    205251                        var items = [], tokens = txt.split(options.delimiter), i, token;
    … …  
    249295                                } else {
    250296                                        $input.val($currentResult.text());
    251297                                }
    252                                 $results.hide();
    253                                 $input.trigger('change');
     298                                hideItems();
     299                                $input.trigger( 'change' ).removeAttr( 'aria-activedescendant' );
     300                                wp.a11y.speak( l10n.selected + ' ' + $currentResult.text() );
    254301
    255302                                if (options.onSelect)
    256303                                        options.onSelect.apply($input[0]);
    … …  
    263310
    264311                        $currentResult = getCurrentResult();
    265312
    266                         if ($currentResult)
     313                        if ( $currentResult ) {
    267314                                $currentResult
    268315                                        .removeClass(options.selectClass)
    269316                                        .next()
    270317                                                .addClass(options.selectClass);
    271                         else
     318
     319                                if ( $currentResult.next().length ) {
     320                                        $input.attr( 'aria-activedescendant', $currentResult.next().attr( 'id' ) );
     321                                } else {
     322                                        $input.removeAttr( 'aria-activedescendant' );
     323                                }
     324                        } else {
    272325                                $results.children('li:first-child').addClass(options.selectClass);
    273 
     326                                $input.attr( 'aria-activedescendant', $results.children( 'li:first-child' ).attr( 'id' ) );
     327                        }
    274328                }
    275329
    276330                function prevResult() {
    277331                        var $currentResult = getCurrentResult();
    278332
    279                         if ($currentResult)
     333                        if ( $currentResult ) {
    280334                                $currentResult
    281335                                        .removeClass(options.selectClass)
    282336                                        .prev()
    283337                                                .addClass(options.selectClass);
    284                         else
    285                                 $results.children('li:last-child').addClass(options.selectClass);
    286338
     339                                if ( $currentResult.prev().length ) {
     340                                        $input.attr( 'aria-activedescendant', $currentResult.prev().attr( 'id' ) );
     341                                } else {
     342                                        $input.removeAttr( 'aria-activedescendant' );
     343                                }
     344                        } else {
     345                                $results.children( 'li:last-child' ).addClass( options.selectClass );
     346                                $input.attr( 'aria-activedescendant', $results.children( 'li:last-child' ).attr( 'id' ) );
     347                        }
    287348                }
    288349        }
    289350
    … …  
    313374
    314375        };
    315376
    316 })(jQuery);
     377})( jQuery, window.wp );

  • src/wp-includes/script-loader.php

     
    235235        // jQuery plugins
    236236        $scripts->add( 'jquery-color', "/wp-includes/js/jquery/jquery.color.min.js", array('jquery'), '2.1.1', 1 );
    237237        $scripts->add( 'suggest', "/wp-includes/js/jquery/suggest$suffix.js", array('jquery'), '1.1-20110113', 1 );
     238        did_action( 'init' ) && $scripts->localize( 'suggest', 'suggestL10n', array(
     239                'suggestionsFound' => __( 'Suggestions found: %d' ),
     240                'selected'         => __( 'Selected:' ),
     241        ) );
     242
    238243        $scripts->add( 'schedule', '/wp-includes/js/jquery/jquery.schedule.js', array('jquery'), '20m', 1 );
    239244        $scripts->add( 'jquery-query', "/wp-includes/js/jquery/jquery.query.js", array('jquery'), '2.1.7', 1 );
    240245        $scripts->add( 'jquery-serialize-object', "/wp-includes/js/jquery/jquery.serialize-object.js", array('jquery'), '0.2', 1 );
    … …  
    499504                        'postBoxEmptyString' => __( 'Drag boxes here' ),
    500505                ) );
    501506
    502                 $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
     507                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest', 'wp-a11y' ), false, 1 );
    503508                did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(
    504509                        'tagDelimiter' => _x( ',', 'tag delimiter' ),
    505510                ) );