WordPress.org
Get WordPress

Make WordPress Core

Ticket #30468: 30468.3.patch

File 30468.3.patch, 16.2 KB (added by afercia, 11 years ago)

  • src/wp-includes/class-wp-editor.php

     
    14361436                // display: none is required here, see #WP27605
    14371437                ?>
    14381438                <div id="wp-link-backdrop" style="display: none"></div>
    1439                 <div id="wp-link-wrap" class="wp-core-ui<?php echo $search_panel_visible; ?>" style="display: none">
     1439                <div id="wp-link-wrap" class="wp-core-ui<?php echo $search_panel_visible; ?>" style="display: none" role="dialog" aria-labelledby="link-modal-title" tabindex="0">
    14401440                <form id="wp-link" tabindex="-1">
    14411441                <?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
    1442                 <div id="link-modal-title">
    1443                         <?php _e( 'Insert/edit link' ) ?>
    1444                         <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    1445                 </div>
     1442                <h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1>
     1443                <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    14461444                <div id="link-selector">
    14471445                        <div id="link-options">
    1448                                 <p class="howto"><?php _e( 'Enter the destination URL' ); ?></p>
     1446                                <p class="howto" id="wp-link-howto-url"><?php _e( 'Enter the destination URL' ); ?></p>
    14491447                                <div class="wp-link-text-field">
    14501448                                        <label><span><?php _e( 'Link Text' ); ?></span><input id="wp-link-text" type="text" /></label>
    14511449                                </div>
    14521450                                <div>
    1453                                         <label><span><?php _e( 'URL' ); ?></span><input id="wp-link-url" type="text" /></label>
     1451                                        <label><span><?php _e( 'URL' ); ?></span><input id="wp-link-url" type="text" aria-describedby="wp-link-howto-url" /></label>
    14541452                                </div>
    14551453                                <div class="link-target">
    1456                                         <label><span>&nbsp;</span><input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
     1454                                        <label><span></span><input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
    14571455                                </div>
    14581456                        </div>
    1459                         <p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
     1457                        <div class="howto"><button type="button" id="wp-link-search-toggle" class="button" aria-expanded="false"><?php _e( 'Or link to existing content' ); ?></button></div>
    14601458                        <div id="search-panel">
    14611459                                <div class="link-search-wrapper">
    14621460                                        <label>
    1463                                                 <span class="search-label"><?php _e( 'Search' ); ?></span>
    1464                                                 <input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" />
     1461                                                <span class="search-label"><?php _e( 'Search' ); ?></span><input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" aria-describedby="query-notice-hint" />
    14651462                                                <span class="spinner"></span>
    14661463                                        </label>
    14671464                                </div>
    1468                                 <div id="search-results" class="query-results" tabindex="0">
    1469                                         <ul></ul>
    1470                                         <div class="river-waiting">
    1471                                                 <span class="spinner"></span>
     1465                                <div role="application" aria-label="<?php esc_attr_e( 'Links:' ); ?>">
     1466                                        <div id="search-results" class="query-results" tabindex="0" role="list" aria-label="<?php esc_attr_e( 'Search results:' ); ?>">
     1467                                                <ul aria-live="polite" aria-relevant="all" aria-atomic="true"></ul>
     1468                                                <div class="river-waiting">
     1469                                                        <span class="spinner"></span>
     1470                                                </div>
    14721471                                        </div>
    14731472                                </div>
    1474                                 <div id="most-recent-results" class="query-results" tabindex="0">
     1473                                <div id="most-recent-results" class="query-results" tabindex="0" role="list" aria-labelledby="query-notice-default">
    14751474                                        <div class="query-notice" id="query-notice-message">
    1476                                                 <em class="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
    1477                                                 <em class="query-notice-hint screen-reader-text"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em>
     1475                                                <em class="query-notice-default" id="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
     1476                                                <em class="query-notice-hint screen-reader-text" id="query-notice-hint"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em>
    14781477                                        </div>
    14791478                                        <ul></ul>
    14801479                                        <div class="river-waiting">
    … …  
    14851484                </div>
    14861485                <div class="submitbox">
    14871486                        <div id="wp-link-cancel">
    1488                                 <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
     1487                                <button type="button" id="wp-link-cancel-button" class="button"><?php _e( 'Cancel' ); ?></button>
    14891488                        </div>
    14901489                        <div id="wp-link-update">
    14911490                                <input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">

  • src/wp-includes/css/editor.css

     
    920920        padding: 10px;
    921921        margin: 1px 0 0;
    922922        line-height: 150%;
    923         border: 0 none;
     923        border: 0;
    924924        outline: none;
    925925        display: block;
    926926        resize: vertical;
    … …  
    12201220}
    12211221
    12221222#wp-link-wrap.search-panel-visible {
    1223         height: 500px;
    1224         margin-top: -250px;
     1223        height: 510px;
     1224        margin-top: -255px;
    12251225}
    12261226
    12271227#wp-link-wrap .wp-link-text-field {
    … …  
    12391239        font-size: 18px;
    12401240        font-weight: 600;
    12411241        line-height: 36px;
     1242        margin: 0;
    12421243        padding: 0 36px 0 16px;
    1243         top: 0;
    1244         right: 0;
    1245         left: 0;
    12461244}
    12471245
    12481246#wp-link-close {
    … …  
    13071305
    13081306#wp-link-search-toggle:after {
    13091307        display: inline-block;
    1310         font: normal 20px/1 'dashicons';
     1308        font: normal 20px/26px 'dashicons';
    13111309        vertical-align: top;
    13121310        speak: none;
    13131311        -webkit-font-smoothing: antialiased;
    … …  
    13291327        padding: 8px 0 12px;
    13301328}
    13311329
     1330#wp-link div.howto {
     1331        margin: 0 0 12px 85px;
     1332}
     1333
    13321334#wp-link p.howto {
    13331335        margin: 3px 0;
    13341336}
    … …  
    13381340        color: inherit;
    13391341}
    13401342
    1341 #wp-link-search-toggle {
    1342         cursor: pointer;
    1343 }
    1344 
    1345 #wp-link label input[type="text"] {
     1343#wp-link label input[type="text"],
     1344#wp-link label input[type="search"] {
    13461345        margin-top: 5px;
    13471346        width: 70%;
    13481347}
    … …  
    13561355        max-width: 24%;
    13571356}
    13581357
    1359 #wp-link .link-search-field {
    1360         float: left;
    1361         width: 250px;
    1362         max-width: 70%;
    1363 }
    1364 
    13651358#wp-link .link-search-wrapper {
    13661359        margin: 5px 0 9px;
    13671360        display: block;
    … …  
    13681361        overflow: hidden;
    13691362}
    13701363
    1371 #wp-link .link-search-wrapper span {
    1372         float: left;
    1373         margin-top: 4px;
    1374 }
    1375 
    13761364#wp-link .link-search-wrapper .spinner {
    13771365        display: none;
    13781366        vertical-align: text-bottom;
     1367        margin: 8px 20px 0 0;
    13791368}
    13801369
    13811370#wp-link .link-target {
    … …  
    13831372        white-space: nowrap;
    13841373        overflow: hidden;
    13851374        text-overflow: ellipsis;
     1375        max-width: 90%;
    13861376}
    13871377
    1388 #wp-link .link-target label {
    1389         max-width: 70%;
    1390 }
    1391 
    13921378#wp-link .query-results {
    13931379        border: 1px #dfdfdf solid;
    13941380        margin: 0;
    … …  
    14021388}
    14031389
    14041390.has-text-field #wp-link .query-results {
    1405         top: 205px;
     1391        top: 215px;
    14061392}
    14071393
    14081394#wp-link li {
    … …  
    14131399        padding: 4px 6px 4px 10px;
    14141400        cursor: pointer;
    14151401        position: relative;
     1402        outline: 0;
    14161403}
    14171404
    14181405#wp-link .query-notice {
    … …  
    15441531        }
    15451532
    15461533        #wp-link-wrap.search-panel-visible.has-text-field .query-results {
    1547                 top: 235px;
     1534                top: 270px;
    15481535        }
    15491536
    15501537        #link-selector {
    … …  
    15581545        #wp-link-cancel {
    15591546                line-height: 32px;
    15601547        }
     1548
     1549        #wp-link .link-target {
     1550                padding-top: 10px;
     1551        }
     1552
     1553        #wp-link-search-toggle {
     1554                line-height: 26px;
     1555        }
     1556
     1557        #wp-link-wrap.search-panel-visible #link-selector {
     1558                bottom: 48px;
     1559        }
     1560
     1561        #wp-link .link-search-wrapper .spinner {
     1562                margin-top: 12px;
     1563        }
    15611564}
    15621565
    15631566@media screen and ( max-width: 520px ) {
    … …  
    19011904
    19021905#wp-fullscreen-buttons .mce-btn button {
    19031906    margin: 0;
    1904     outline: 0 none;
    1905     border: 0 none;
     1907    outline: 0;
     1908    border: 0;
    19061909    white-space: nowrap;
    19071910    width: auto;
    19081911    background: none;

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

     
    55        var editor, searchTimer, River, Query, correctedURL,
    66                inputs = {},
    77                rivers = {},
    8                 isTouch = ( 'ontouchend' in document );
     8                isTouch = ( 'ontouchend' in document ),
     9                visible;
    910
    1011        function getLink() {
    1112                return editor.dom.getParent( editor.selection.getNode(), 'a' );
    … …  
    1516                timeToTriggerRiver: 150,
    1617                minRiverAJAXDuration: 200,
    1718                riverBottomThreshold: 5,
    18                 keySensitivity: 100,
     19                keySensitivity: 150,
    1920                lastSearch: '',
    2021                textarea: '',
    2122
    … …  
    3132                        inputs.url = $( '#wp-link-url' );
    3233                        inputs.nonce = $( '#_ajax_linking_nonce' );
    3334                        inputs.openInNewTab = $( '#wp-link-target' );
     35                        inputs.searchToggle = $( '#wp-link-search-toggle' );
    3436                        inputs.search = $( '#wp-link-search' );
    3537
    3638                        // Build Rivers
    … …  
    5052                                event.preventDefault();
    5153                                wpLink.update();
    5254                        });
    53                         inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
     55                        inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel-button' ).click( function( event ) {
    5456                                event.preventDefault();
    5557                                wpLink.close();
    5658                        });
    5759
    58                         $( '#wp-link-search-toggle' ).on( 'click', wpLink.toggleInternalLinking );
     60                        inputs.searchToggle.on( 'click', wpLink.toggleInternalLinking );
    5961
    6062                        rivers.elements.on( 'river-select', wpLink.updateFields );
    6163
    … …  
    145147                        // Refresh rivers (clear links, check visibility)
    146148                        rivers.search.refresh();
    147149                        rivers.recent.refresh();
     150                        visible = inputs.wrap.hasClass( 'search-panel-visible' );
    148151
    149152                        if ( wpLink.isMCE() ) {
    150153                                wpLink.mceRefresh();
    … …  
    156159
    157160                        if ( isTouch ) {
    158161                                // Close the onscreen keyboard
    159                                 inputs.url.focus().blur();
     162                                inputs.text.focus().blur();
    160163                        } else {
    161164                                // Focus the URL field and highlight its contents.
    162165                                // If this is moved above the selection changes,
    163166                                // IE will show a flashing cursor over the dialog.
    164                                 inputs.url.focus()[0].select();
     167                                inputs.text.focus()[0].select();
    165168                        }
    166169
    167170                        // Load the most recent results if this is the first time opening the panel.
    … …  
    170173                        }
    171174
    172175                        correctedURL = inputs.url.val().replace( /^http:\/\//, '' );
     176
     177                        // Toggle the button aria-expanded attribute.
     178                        if ( visible ) {
     179                                inputs.searchToggle.attr( 'aria-expanded', 'true' );
     180                        } else {
     181                                inputs.searchToggle.attr( 'aria-expanded', 'false' );
     182                        }
    173183                },
    174184
    175185                hasSelectedText: function( linkNode ) {
    … …  
    401411                                rivers.search.show();
    402412
    403413                                // Don't search if the keypress didn't change the title.
    404                                 if ( wpLink.lastSearch == search )
     414                                if ( wpLink.lastSearch == search ) {
    405415                                        return;
     416                                }
    406417
    407418                                wpLink.lastSearch = search;
    408419                                waiting = t.parent().find('.spinner').show();
    … …  
    452463                                return;
    453464                        }
    454465
    455                         if ( document.activeElement &&
    456                                 ( document.activeElement.id === 'link-title-field' || document.activeElement.id === 'url-field' ) ) {
     466                        if ( document.activeElement && (
     467                                'wp-link-close' === document.activeElement.id ||
     468                                'link-title-field' === document.activeElement.id ||
     469                                'url-field' === document.activeElement.id ||
     470                                'link-target-checkbox' === document.activeElement.id ||
     471                                'wp-link-search-toggle' === document.activeElement.id ||
     472                                'wp-link-cancel-button' === document.activeElement.id ||
     473                                'wp-link-submit' === document.activeElement.id
     474                                ) ) {
    457475                                return;
    458476                        }
    459477
    … …  
    476494                delayedCallback: function( func, delay ) {
    477495                        var timeoutTriggered, funcTriggered, funcArgs, funcContext;
    478496
    479                         if ( ! delay )
     497                        if ( ! delay ) {
    480498                                return func;
     499                        }
    481500
    482501                        setTimeout( function() {
    483                                 if ( funcTriggered )
     502                                if ( funcTriggered ) {
    484503                                        return func.apply( funcContext, funcArgs );
     504                                }
    485505                                // Otherwise, wait.
    486506                                timeoutTriggered = true;
    487507                        }, delay );
    488508
    489509                        return function() {
    490                                 if ( timeoutTriggered )
     510                                if ( timeoutTriggered ) {
    491511                                        return func.apply( this, arguments );
     512                                }
    492513                                // Otherwise, wait.
    493514                                funcArgs = arguments;
    494515                                funcContext = this;
    … …  
    497518                },
    498519
    499520                toggleInternalLinking: function( event ) {
    500                         var visible = inputs.wrap.hasClass( 'search-panel-visible' );
     521                        visible = inputs.wrap.hasClass( 'search-panel-visible' );
    501522
    502523                        inputs.wrap.toggleClass( 'search-panel-visible', ! visible );
    503524                        setUserSetting( 'wplink', visible ? '0' : '1' );
    504                         inputs[ ! visible ? 'search' : 'url' ].focus();
     525                        if ( ! visible ) {
     526                                inputs.search.focus();
     527                                inputs.searchToggle.attr( 'aria-expanded', 'true' );
     528                        } else {
     529                                inputs.searchToggle.attr( 'aria-expanded', 'false' );
     530                        }
    505531                        event.preventDefault();
    506532                }
    507533        };
    … …  
    544570                select: function( li, event ) {
    545571                        var liHeight, elHeight, liTop, elTop;
    546572
    547                         if ( li.hasClass( 'unselectable' ) || li == this.selected )
    548                                 return;
     573                        if ( li.hasClass( 'unselectable' ) || li == this.selected ) {
     574                                return;
     575                        }
    549576
    550577                        this.deselect();
    551                         this.selected = li.addClass( 'selected' );
     578                        this.selected = li.addClass( 'selected' ).attr( 'aria-selected', 'true' ).focus();
    552579                        // Make sure the element is visible
    553580                        liHeight = li.outerHeight();
    554581                        elHeight = this.element.height();
    … …  
    555582                        liTop = li.position().top;
    556583                        elTop = this.element.scrollTop();
    557584
    558                         if ( liTop < 0 ) // Make first visible element
     585                        if ( liTop < 0 ) { // Make first visible element
    559586                                this.element.scrollTop( elTop + liTop );
    560                         else if ( liTop + liHeight > elHeight ) // Make last visible element
     587                        } else if ( liTop + liHeight > elHeight ) { // Make last visible element
    561588                                this.element.scrollTop( elTop + liTop - elHeight + liHeight );
     589                        }
    562590
    563591                        // Trigger the river-select event
    564592                        this.element.trigger( 'river-select', [ li, event, this ] );
    565593                },
    566594                deselect: function() {
    567                         if ( this.selected )
    568                                 this.selected.removeClass( 'selected' );
     595                        if ( this.selected ) {
     596                                this.selected.removeClass( 'selected' ).attr( 'aria-selected', 'false' );
     597                        }
    569598                        this.selected = false;
    570599                },
    571600                prev: function() {
    572                         if ( ! this.visible )
     601                        if ( ! this.visible ) {
    573602                                return;
     603                        }
    574604
    575605                        var to;
    576606                        if ( this.selected ) {
    577607                                to = this.selected.prev( 'li' );
    578                                 if ( to.length )
     608                                if ( to.length ) {
    579609                                        this.select( to );
     610                                }
    580611                        }
    581612                },
    582613                next: function() {
    583                         if ( ! this.visible )
     614                        if ( ! this.visible ) {
    584615                                return;
     616                        }
    585617
    586618                        var to = this.selected ? this.selected.next( 'li' ) : $( 'li:not(.unselectable):first', this.element );
    587                         if ( to.length )
     619                        if ( to.length ) {
    588620                                this.select( to );
     621                        }
    589622                },
    590623                ajax: function( callback ) {
    591624                        var self = this,
    … …  
    592625                                delay = this.query.page == 1 ? 0 : wpLink.minRiverAJAXDuration,
    593626                                response = wpLink.delayedCallback( function( results, params ) {
    594627                                        self.process( results, params );
    595                                         if ( callback )
     628                                        if ( callback ) {
    596629                                                callback( results, params );
     630                                        }
    597631                                }, delay );
    598632
    599633                        this.query.ajax( response );
    600634                },
    601635                change: function( search ) {
    602                         if ( this.query && this._search == search )
     636                        if ( this.query && this._search == search ) {
    603637                                return;
     638                        }
    604639
    605640                        this._search = search;
    606641                        this.query = new Query( search );
    … …  
    619654                                $.each( results, function() {
    620655                                        classes = alt ? 'alternate' : '';
    621656                                        classes += this.title ? '' : ' no-title';
    622                                         list += classes ? '<li class="' + classes + '">' : '<li>';
     657                                        list += classes ? '<li class="' + classes + '" tabindex="-1" role="listitem">' : '<li tabindex="-1" role="listitem">';
    623658                                        list += '<input type="hidden" class="item-permalink" value="' + this.permalink + '" />';
    624659                                        list += '<span class="item-title">';
    625660                                        list += this.title ? this.title : wpLinkL10n.noTitle;
    … …  
    635670                                el = this.element,
    636671                                bottom = el.scrollTop() + el.height();
    637672
    638                         if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold )
     673                        if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold ) {
    639674                                return;
     675                        }
    640676
    641677                        setTimeout(function() {
    642678                                var newTop = el.scrollTop(),
    643679                                        newBottom = newTop + el.height();
    644680
    645                                 if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold )
     681                                if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold ) {
    646682                                        return;
     683                                }
    647684
    648685                                self.waiting.show();
    649686                                el.scrollTop( newTop + self.waiting.outerHeight() );
    … …  
    674711                                        '_ajax_linking_nonce' : inputs.nonce.val()
    675712                                };
    676713
    677                         if ( this.search )
     714                        if ( this.search ) {
    678715                                query.search = this.search;
     716                        }
    679717
    680718                        this.querying = true;
    681719