WordPress.org
Get WordPress

Make WordPress Core

Changeset 36984


Ignore:
Timestamp:
03/14/2016 12:52:20 AM (11 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.