WordPress.org
Get WordPress

Make WordPress Core

Ticket #33301: 33301.14.a11y.patch

File 33301.14.a11y.patch, 8.9 KB (added by afercia, 7 years ago)

  • src/wp-includes/js/tinymce/plugins/wplink/plugin.js

     
    1 ( function( tinymce ) {
     1( function( tinymce, wp ) {
    22        tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
    33                url: '#',
    44                renderHtml: function() {
    … …  
    5656                renderHtml: function() {
    5757                        return (
    5858                                '<div id="' + this._id + '" class="wp-link-input">' +
    59                                         '<input type="text" value="" tabindex="-1" placeholder="' + tinymce.translate('Paste URL or type to search') + '" />' +
     59                                        '<input type="text" value="" placeholder="' + tinymce.translate( 'Paste URL or type to search' ) + '" />' +
    6060                                        '<input type="text" style="display:none" value="" />' +
    6161                                '</div>'
    6262                        );
    … …  
    231231
    232232                        inputInstance.reset();
    233233                        editor.nodeChanged();
     234                        // Audible confirmation message when a link has been inserted in the Editor.
     235                        wp.a11y.speak( ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.linkInserted : '' );
    234236                } );
    235237
    236238                editor.addCommand( 'wp_link_cancel', function() {
    … …  
    348350                                                },
    349351                                                focus: function( event, ui ) {
    350352                                                        $input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
     353                                                        /*
     354                                                         * Don't empty the URL input field, when using the arrow keys to
     355                                                         * highlight items. See api.jqueryui.com/autocomplete/#event-focus
     356                                                         */
    351357                                                        event.preventDefault();
    352358                                                },
    353359                                                select: function( event, ui ) {
    354360                                                        $input.val( ui.item.permalink );
    355361                                                        $( element.firstChild.nextSibling ).val( ui.item.title );
     362                                                        if ( 9 === event.keyCode ) {
     363                                                                // Audible confirmation message when a link has been selected.
     364                                                                wp.a11y.speak( ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.linkSelected : '' );
     365                                                        }
    356366                                                        return false;
    357367                                                },
    358368                                                open: function() {
    … …  
    390400                                                'aria-autocomplete': 'list',
    391401                                                'aria-expanded': 'false',
    392402                                                'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
    393                                         }  )
     403                                        } )
    394404                                        .on( 'focus', function() {
    395                                                 $input.autocomplete( 'search' );
     405                                                var $inputValue = $input.val();
     406                                                /*
     407                                                 * Don't trigger a search if the URL field already has a link or is empty.
     408                                                 * Also, avoids screen readers announce `No search results`.
     409                                                 */
     410                                                if ( ! /^https?:/.test( $inputValue ) && '' !== $inputValue ) {
     411                                                        $input.autocomplete( 'search' );
     412                                                }
    396413                                        } )
    397414                                        .autocomplete( 'widget' )
    398415                                                .addClass( 'wplink-autocomplete' )
    399                                                 .attr( 'role', 'listbox' );
     416                                                .attr( 'role', 'listbox' )
     417                                                .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
    400418                                }
    401419
    402420                                tinymce.$( input ).on( 'keydown', function( event ) {
    … …  
    460478                                        var url = inputInstance.getURL() || null,
    461479                                                text = inputInstance.getLinkText() || null;
    462480
    463                                         editor.focus(); // Needed for IE
     481                                        /*
     482                                         * Accessibility note: moving focus back to the editor confuses
     483                                         * screen readers. They will announce again the Editor ARIA role
     484                                         * `application` and the iframe `title` attribute.
     485                                         * Should be preferably limited to IE or removed if not strictly
     486                                         * necessary.
     487                                         */
     488                                        if ( tinymce.Env.ie ) {
     489                                                editor.focus(); // Needed for IE
     490                                        }
    464491                                        window.wpLink.open( editor.id, url, text, linkNode );
    465492
    466493                                        editToolbar.tempHide = true;
    … …  
    483510                        }
    484511                };
    485512        } );
    486 } )( window.tinymce );
     513} )( window.tinymce, window.wp );

  • src/wp-includes/js/wplink.js

     
    11
    22var wpLink;
    33
    4 ( function( $, wpLinkL10n ) {
     4( function( $, wpLinkL10n, wp ) {
    55        var editor, correctedURL, linkNode,
    66                inputs = {},
    77                isTouch = ( 'ontouchend' in document );
    … …  
    7676                                },
    7777                                focus: function( event, ui ) {
    7878                                        $input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
     79                                        /*
     80                                         * Don't empty the URL input field, when using the arrow keys to
     81                                         * highlight items. See api.jqueryui.com/autocomplete/#event-focus
     82                                         */
    7983                                        event.preventDefault();
    8084                                },
    8185                                select: function( event, ui ) {
    … …  
    8589                                                inputs.text.val( ui.item.title );
    8690                                        }
    8791
     92                                        // Audible confirmation message when a link has been selected.
     93                                        wp.a11y.speak( ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.linkSelected : '' );
    8894                                        return false;
    8995                                },
    9096                                open: function() {
    … …  
    117123
    118124                        $input.attr( {
    119125                                'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
    120                         }  )
     126                        } )
    121127                        .on( 'focus', function() {
    122                                 $input.autocomplete( 'search' );
     128                                var $inputValue = $input.val();
     129                                /*
     130                                 * Don't trigger a search if the URL field already has a link or is empty.
     131                                 * Also, avoids screen readers announce `No search results`.
     132                                 */
     133                                if ( ! /^https?:/.test( $inputValue ) && '' !== $inputValue ) {
     134                                        $input.autocomplete( 'search' );
     135                                }
    123136                        } )
    124137                        .autocomplete( 'widget' )
    125138                                .addClass( 'wplink-autocomplete' )
    126                                 .attr( 'role', 'listbox' );
    127 
    128 
     139                                .attr( 'role', 'listbox' )
     140                                .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
    129141                },
    130142
    131143                // If URL wasn't corrected last time and doesn't start with http:, https:, ? # or /, prepend http://
    … …  
    402414
    403415                        wpLink.close();
    404416                        textarea.focus();
     417                        // Audible confirmation message when a link has been inserted in the Editor.
     418                        wp.a11y.speak( ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.linkInserted : '' );
    405419                },
    406420
    407421                mceUpdate: function() {
    … …  
    450464                        wpLink.close( 'noReset' );
    451465                        editor.focus();
    452466                        editor.nodeChanged();
     467                        // Audible confirmation message when a link has been inserted in the Editor.
     468                        wp.a11y.speak( ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.linkInserted : '' );
    453469                },
    454470
    455471                keydown: function( event ) {
    … …  
    511527        };
    512528
    513529        $( document ).ready( wpLink.init );
    514 })( jQuery, window.wpLinkL10n );
     530})( jQuery, window.wpLinkL10n, window.wp );

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

     
    204204        $scripts->add( 'jquery-effects-transfer', "/wp-includes/js/jquery/ui/effect-transfer$dev_suffix.js", array('jquery-effects-core'), '1.11.4', 1 );
    205205
    206206        $scripts->add( 'jquery-ui-accordion', "/wp-includes/js/jquery/ui/accordion$dev_suffix.js", array('jquery-ui-core', 'jquery-ui-widget'), '1.11.4', 1 );
    207         $scripts->add( 'jquery-ui-autocomplete', "/wp-includes/js/jquery/ui/autocomplete$dev_suffix.js", array('jquery-ui-menu'), '1.11.4', 1 );
     207        $scripts->add( 'jquery-ui-autocomplete', "/wp-includes/js/jquery/ui/autocomplete$dev_suffix.js", array( 'jquery-ui-menu', 'wp-a11y' ), '1.11.4', 1 );
    208208        $scripts->add( 'jquery-ui-button', "/wp-includes/js/jquery/ui/button$dev_suffix.js", array('jquery-ui-core', 'jquery-ui-widget'), '1.11.4', 1 );
    209209        $scripts->add( 'jquery-ui-datepicker', "/wp-includes/js/jquery/ui/datepicker$dev_suffix.js", array('jquery-ui-core'), '1.11.4', 1 );
    210210        $scripts->add( 'jquery-ui-dialog', "/wp-includes/js/jquery/ui/dialog$dev_suffix.js", array('jquery-ui-resizable', 'jquery-ui-draggable', 'jquery-ui-button', 'jquery-ui-position'), '1.11.4', 1 );
    … …  
    226226
    227227        // Strings for 'jquery-ui-autocomplete' live region messages
    228228        did_action( 'init' ) && $scripts->localize( 'jquery-ui-autocomplete', 'uiAutocompleteL10n', array(
    229                         'noResults' => __( 'No search results.' ),
     229                        'noResults'    => __( 'No search results.' ),
    230230                        /* translators: Number of results found when using jQuery UI Autocomplete */
    231                         'oneResult' => __( '1 result found. Use up and down arrow keys to navigate.' ),
    232                         'manyResults' => __( '%d results found. Use up and down arrow keys to navigate.' ),
     231                        'oneResult'    => __( '1 result found. Use up and down arrow keys to navigate.' ),
     232                        'manyResults'  => __( '%d results found. Use up and down arrow keys to navigate.' ),
     233                        'linkSelected' => __( 'Link selected.' ),
     234                        'linkInserted' => __( 'Link inserted.' ),
    233235        ) );
    234236
    235237        // deprecated, not used in core, most functionality is included in jQuery 1.3
    … …  
    401403
    402404        $scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array(), false, 1 );
    403405
    404         $scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery' ), false, 1 );
     406        $scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
    405407        did_action( 'init' ) && $scripts->localize( 'wplink', 'wpLinkL10n', array(
    406408                'title' => __('Insert/edit link'),
    407409                'update' => __('Update'),