WordPress.org
Get WordPress

Make WordPress Core

Changeset 36984


Ignore:
Timestamp:
03/14/2016 12:52:20 AM (9 years ago)
Author:
azaozz
Message:

TinyMCE, inline link:

  • Add audible confirmation when a link has been selected or inserted in the editor for both the inline dialog and the modal.
  • Do not auto-search when the URL field is empty or already contains an URL.
  • Remove a few redundant tabindex.

Props afercia, azaozz.
See #33301.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r36982 r36984  
    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>'
    … …  
    236236            inputInstance.reset();
    237237            editor.nodeChanged();
     238
     239            // Audible confirmation message when a link has been inserted in the Editor.
     240            if ( typeof window.wp !== 'undefined' && window.wp.a11y && typeof window.wpLinkL10n !== 'undefined' ) {
     241                window.wp.a11y.speak( window.wpLinkL10n.linkInserted );
     242            }
    238243        } );
    239244
    … …  
    372377                        focus: function( event, ui ) {
    373378                            $input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
     379                            /*
     380                             * Don't empty the URL input field, when using the arrow keys to
     381                             * highlight items. See api.jqueryui.com/autocomplete/#event-focus
     382                             */
    374383                            event.preventDefault();
    375384                        },
    … …  
    377386                            $input.val( ui.item.permalink );
    378387                            $( element.firstChild.nextSibling ).val( ui.item.title );
     388
     389                            if ( 9 === event.keyCode && typeof window.wp !== 'undefined' &&
     390                                window.wp.a11y && typeof window.wpLinkL10n !== 'undefined' ) {
     391                                // Audible confirmation message when a link has been selected.
     392                                window.wp.a11y.speak( window.wpLinkL10n.linkSelected );
     393                            }
     394
    379395                            return false;
    380396                        },
    … …  
    414430                        'aria-expanded': 'false',
    415431                        'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
    416                     }  )
     432                    } )
    417433                    .on( 'focus', function() {
    418                         $input.autocomplete( 'search' );
     434                        var inputValue = $input.val();
     435                        /*
     436                         * Don't trigger a search if the URL field already has a link or is empty.
     437                         * Also, avoids screen readers announce `No search results`.
     438                         */
     439                        if ( inputValue && ! /^https?:/.test( inputValue ) ) {
     440                            $input.autocomplete( 'search' );
     441                        }
    419442                    } )
    420443                    .autocomplete( 'widget' )
    421444                        .addClass( 'wplink-autocomplete' )
    422                         .attr( 'role', 'listbox' );
     445                        .attr( 'role', 'listbox' )
     446                        .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
    423447                }
    424448
    … …  
    484508                        text = inputInstance.getLinkText() || null;
    485509
    486                     editor.focus(); // Needed for IE
     510                    /*
     511                     * Accessibility note: moving focus back to the editor confuses
     512                     * screen readers. They will announce again the Editor ARIA role
     513                     * `application` and the iframe `title` attribute.
     514                     *
     515                     * Unfortunately IE looses the selection when the editor iframe
     516                     * looses focus, so without returning focus to the editor, the code
     517                     * in the modal will not be able to get the selection, place the caret
     518                     * at the same location, etc.
     519                     */
     520                    if ( tinymce.Env.ie ) {
     521                        editor.focus(); // Needed for IE
     522                    }
     523
    487524                    window.wpLink.open( editor.id, url, text, linkNode );
    488525

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

    r36977 r36984  
    22var wpLink;
    33
    4 ( function( $, wpLinkL10n ) {
     4( function( $, wpLinkL10n, wp ) {
    55    var editor, correctedURL, linkNode,
    66        inputs = {},
    … …  
    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                },
    … …  
    8589                        inputs.text.val( ui.item.title );
    8690                    }
     91
     92                    // Audible confirmation message when a link has been selected.
     93                    wp.a11y.speak( wpLinkL10n.linkSelected );
    8794
    8895                    return false;
    … …  
    118125            $input.attr( {
    119126                'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
    120             }  )
     127            } )
    121128            .on( 'focus', function() {
    122                 $input.autocomplete( 'search' );
     129                var inputValue = $input.val();
     130                /*
     131                 * Don't trigger a search if the URL field already has a link or is empty.
     132                 * Also, avoids screen readers announce `No search results`.
     133                 */
     134                if ( inputValue && ! /^https?:/.test( inputValue ) ) {
     135                    $input.autocomplete( 'search' );
     136                }
    123137            } )
    124138            .autocomplete( 'widget' )
    125139                .addClass( 'wplink-autocomplete' )
    126                 .attr( 'role', 'listbox' );
    127 
    128 
     140                .attr( 'role', 'listbox' )
     141                .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
    129142        },
    130143
    … …  
    171184                }
    172185
    173                 if ( editor && window.tinymce.isIE && ! editor.windowManager.wplinkBookmark ) {
     186                if ( editor && window.tinymce.isIE ) {
    174187                    editor.windowManager.wplinkBookmark = editor.selection.getBookmark();
    175188                }
    … …  
    403416            wpLink.close();
    404417            textarea.focus();
     418
     419            // Audible confirmation message when a link has been inserted in the Editor.
     420            wp.a11y.speak( wpLinkL10n.linkInserted );
    405421        },
    406422
    … …  
    451467            editor.focus();
    452468            editor.nodeChanged();
     469
     470            // Audible confirmation message when a link has been inserted in the Editor.
     471            wp.a11y.speak( wpLinkL10n.linkInserted );
    453472        },
    454473
    … …  
    512531
    513532    $( document ).ready( wpLink.init );
    514 })( jQuery, window.wpLinkL10n );
     533})( jQuery, window.wpLinkL10n, window.wp );

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

    r36964 r36984  
    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 );
    … …  
    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.' ),
    230             /* 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.' ),
     229        'noResults' => __( 'No search results.' ),
     230        /* 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.' ),
    233233    ) );
    234234
    … …  
    253253    $scripts->add( 'thickbox', "/wp-includes/js/thickbox/thickbox.js", array('jquery'), '3.1-20121105', 1 );
    254254    did_action( 'init' ) && $scripts->localize( 'thickbox', 'thickboxL10n', array(
    255             'next' => __('Next &gt;'),
    256             'prev' => __('&lt; Prev'),
    257             'image' => __('Image'),
    258             'of' => __('of'),
    259             'close' => __('Close'),
    260             'noiframes' => __('This feature requires inline frames. You have iframes disabled or your browser does not support them.'),
    261             'loadingAnimation' => includes_url('js/thickbox/loadingAnimation.gif'),
     255        'next' => __('Next &gt;'),
     256        'prev' => __('&lt; Prev'),
     257        'image' => __('Image'),
     258        'of' => __('of'),
     259        'close' => __('Close'),
     260        'noiframes' => __('This feature requires inline frames. You have iframes disabled or your browser does not support them.'),
     261        'loadingAnimation' => includes_url('js/thickbox/loadingAnimation.gif'),
    262262    ) );
    263263
    … …  
    402402    $scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array(), false, 1 );
    403403
    404     $scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery' ), false, 1 );
     404    $scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
    405405    did_action( 'init' ) && $scripts->localize( 'wplink', 'wpLinkL10n', array(
    406406        'title' => __('Insert/edit link'),
    … …  
    408408        'save' => __('Add Link'),
    409409        'noTitle' => __('(no title)'),
    410         'noMatchesFound' => __('No results found.')
     410        'noMatchesFound' => __('No results found.'),
     411        'linkSelected' => __( 'Link selected.' ),
     412        'linkInserted' => __( 'Link inserted.' ),
    411413    ) );
    412414
Note: See TracChangeset for help on using the changeset viewer.