WordPress.org
Get WordPress

Make WordPress Core

Ticket #30468: 30468.patch

File 30468.patch, 16.8 KB (added by afercia, 12 years ago)

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

     
    14061406                // display: none is required here, see #WP27605
    14071407                ?>
    14081408                <div id="wp-link-backdrop" style="display: none"></div>
    1409                 <div id="wp-link-wrap" class="wp-core-ui<?php echo $search_panel_visible; ?>" style="display: none">
     1409                <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">
    14101410                <form id="wp-link" tabindex="-1">
    14111411                <?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
    1412                 <div id="link-modal-title">
    1413                         <?php _e( 'Insert/edit link' ) ?>
    1414                         <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    1415                 </div>
     1412                <h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1>
     1413                <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    14161414                <div id="link-selector">
    14171415                        <div id="link-options">
    1418                                 <p class="howto"><?php _e( 'Enter the destination URL' ); ?></p>
     1416                                <p class="howto" id="wp-link-howto-url"><?php _e( 'Enter the destination URL' ); ?></p>
    14191417                                <div>
    1420                                         <label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" /></label>
     1418                                        <label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" aria-describedby="wp-link-howto-url" /></label>
    14211419                                </div>
    14221420                                <div>
    14231421                                        <label><span><?php _e( 'Title' ); ?></span><input id="link-title-field" type="text" name="linktitle" /></label>
    14241422                                </div>
    14251423                                <div class="link-target">
    1426                                         <label><span>&nbsp;</span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
     1424                                        <label><span></span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
    14271425                                </div>
    14281426                        </div>
    1429                         <p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
     1427                        <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>
    14301428                        <div id="search-panel">
    14311429                                <div class="link-search-wrapper">
    14321430                                        <label>
    14331431                                                <span class="search-label"><?php _e( 'Search' ); ?></span>
    1434                                                 <input type="search" id="search-field" class="link-search-field" autocomplete="off" />
     1432                                                <input type="search" id="search-field" class="link-search-field" autocomplete="off" aria-describedby="query-notice-hint" />
    14351433                                                <span class="spinner"></span>
    14361434                                        </label>
    14371435                                </div>
    1438                                 <div id="search-results" class="query-results" tabindex="0">
    1439                                         <ul></ul>
    1440                                         <div class="river-waiting">
    1441                                                 <span class="spinner"></span>
     1436                                <div role="application" aria-label="<?php esc_attr_e( 'Links:' ); ?>">
     1437                                        <div id="search-results" class="query-results" tabindex="0" role="list" aria-label="<?php esc_attr_e( 'Search results:' ); ?>">
     1438                                                <ul aria-live="polite"></ul>
     1439                                                <div class="river-waiting">
     1440                                                        <span class="spinner"></span>
     1441                                                </div>
    14421442                                        </div>
    1443                                 </div>
    1444                                 <div id="most-recent-results" class="query-results" tabindex="0">
    1445                                         <div class="query-notice" id="query-notice-message">
    1446                                                 <em class="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
    1447                                                 <em class="query-notice-hint screen-reader-text"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em>
     1443                                        <div id="most-recent-results" class="query-results" tabindex="0" role="list" aria-labelledby="query-notice-default">
     1444                                                <div class="query-notice" id="query-notice-message">
     1445                                                        <em class="query-notice-default" id="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
     1446                                                        <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>
     1447                                                </div>
     1448                                                <ul></ul>
     1449                                                <div class="river-waiting">
     1450                                                        <span class="spinner"></span>
     1451                                                </div>
    14481452                                        </div>
    1449                                         <ul></ul>
    1450                                         <div class="river-waiting">
    1451                                                 <span class="spinner"></span>
    1452                                         </div>
    14531453                                </div>
    14541454                        </div>
    14551455                </div>
    14561456                <div class="submitbox">
    14571457                        <div id="wp-link-cancel">
    1458                                 <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
     1458                                <button type="button" id="wp-link-cancel-button" class="button"><?php _e( 'Cancel' ); ?></button>
    14591459                        </div>
    14601460                        <div id="wp-link-update">
    14611461                                <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

     
    158158        border: 1px solid #aaa;
    159159        -webkit-border-radius: 2px;
    160160        border-radius: 2px;
    161         -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
    162         box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
     161        -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
     162        box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
    163163        -webkit-box-sizing: border-box;
    164164        -moz-box-sizing: border-box;
    165165        -webkit-box-sizing: border-box;
    … …  
    919919        padding: 10px;
    920920        margin: 1px 0 0;
    921921        line-height: 150%;
    922         border: 0 none;
     922        border: 0;
    923923        outline: none;
    924924        display: block;
    925925        resize: vertical;
    … …  
    11831183        -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
    11841184        box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
    11851185        width: 500px;
    1186         height: 250px;
     1186        height: 260px;
    11871187        overflow: hidden;
    11881188        margin-left: -250px;
    11891189        margin-top: -125px;
    … …  
    12151215}
    12161216
    12171217#wp-link-wrap.search-panel-visible {
    1218         height: 500px;
    1219         margin-top: -250px;
     1218        height: 510px;
     1219        margin-top: -255px;
    12201220}
    12211221
    12221222#link-modal-title {
    … …  
    12261226        font-size: 18px;
    12271227        font-weight: 600;
    12281228        line-height: 36px;
     1229        margin: 0;
    12291230        padding: 0 36px 0 16px;
    1230         top: 0;
    1231         right: 0;
    1232         left: 0;
    12331231}
    12341232
    12351233#wp-link-close {
    … …  
    12941292
    12951293#wp-link-search-toggle:after {
    12961294        display: inline-block;
    1297         font: normal 20px/1 'dashicons';
     1295        font: normal 20px/26px 'dashicons';
    12981296        vertical-align: top;
    12991297        speak: none;
    13001298        -webkit-font-smoothing: antialiased;
    … …  
    13201318        margin: 3px 0;
    13211319}
    13221320
     1321#wp-link div.howto {
     1322        margin: 0 0 12px 85px;
     1323}
     1324
    13231325#wp-link p.howto a {
    13241326        text-decoration: none;
    13251327        color: inherit;
    13261328}
    13271329
    1328 #wp-link-search-toggle {
    1329         cursor: pointer;
    1330 }
    1331 
    13321330#wp-link label input[type="text"] {
    13331331        margin-top: 5px;
    13341332        width: 70%;
    … …  
    13451343
    13461344#wp-link .link-search-field {
    13471345        float: left;
    1348         width: 250px;
    1349         max-width: 70%;
     1346        width: 70%;
    13501347}
    13511348
    13521349#wp-link .link-search-wrapper {
    … …  
    13701367        white-space: nowrap;
    13711368        overflow: hidden;
    13721369        text-overflow: ellipsis;
     1370        max-width: 90%;
    13731371}
    13741372
    1375 #wp-link .link-target label {
    1376         max-width: 70%;
    1377 }
    1378 
    13791373#wp-link .query-results {
    13801374        border: 1px #dfdfdf solid;
    13811375        margin: 0;
    … …  
    13851379        left: 16px;
    13861380        right: 16px;
    13871381        bottom: 16px;
    1388         top: 205px;
     1382        top: 215px;
    13891383}
    13901384
    13911385#wp-link li {
    … …  
    13961390        padding: 4px 6px 4px 10px;
    13971391        cursor: pointer;
    13981392        position: relative;
     1393        outline: 0;
    13991394}
    14001395
    14011396#wp-link .query-notice {
    … …  
    18811876
    18821877#wp-fullscreen-buttons .mce-btn button {
    18831878    margin: 0;
    1884     outline: 0 none;
    1885     border: 0 none;
     1879    outline: 0;
     1880    border: 0;
    18861881    white-space: nowrap;
    18871882    width: auto;
    18881883    background: none;

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

     
    55        var editor, searchTimer, River, Query,
    66                inputs = {},
    77                rivers = {},
    8                 isTouch = ( 'ontouchend' in document );
     8                isTouch = ( 'ontouchend' in document ),
     9                visible;
    910
    1011        wpLink = {
    1112                timeToTriggerRiver: 150,
    1213                minRiverAJAXDuration: 200,
    1314                riverBottomThreshold: 5,
    14                 keySensitivity: 100,
     15                keySensitivity: 150,
    1516                lastSearch: '',
    1617                textarea: '',
    1718
    … …  
    2829                        inputs.title = $( '#link-title-field' );
    2930                        // Advanced Options
    3031                        inputs.openInNewTab = $( '#link-target-checkbox' );
     32                        inputs.searchToggle = $( '#wp-link-search-toggle' );
    3133                        inputs.search = $( '#search-field' );
    3234                        // Build Rivers
    3335                        rivers.search = new River( $( '#search-results' ) );
    … …  
    4648                                event.preventDefault();
    4749                                wpLink.update();
    4850                        });
    49                         inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
     51                        inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel-button' ).click( function( event ) {
    5052                                event.preventDefault();
    5153                                wpLink.close();
    5254                        });
    5355
    54                         $( '#wp-link-search-toggle' ).on( 'click', wpLink.toggleInternalLinking );
     56                        inputs.searchToggle.on( 'click', wpLink.toggleInternalLinking );
    5557
    5658                        rivers.elements.on( 'river-select', wpLink.updateFields );
    5759
    … …  
    110112
    111113                        inputs.wrap.show();
    112114                        inputs.backdrop.show();
     115                        $( 'body' ).addClass( 'modal-open' );
    113116
    114117                        wpLink.refresh();
    115118                        $( document ).trigger( 'wplink-open', inputs.wrap );
    … …  
    123126                        // Refresh rivers (clear links, check visibility)
    124127                        rivers.search.refresh();
    125128                        rivers.recent.refresh();
     129                        visible = inputs.wrap.hasClass( 'search-panel-visible' );
    126130
    127131                        if ( wpLink.isMCE() ) {
    128132                                wpLink.mceRefresh();
    … …  
    144148                        if ( ! rivers.recent.ul.children().length ) {
    145149                                rivers.recent.ajax();
    146150                        }
     151
     152                        // Toggle the button aria-expanded attribute.
     153                        if ( visible ) {
     154                                inputs.searchToggle.attr( 'aria-expanded', 'true' );
     155                        } else {
     156                                inputs.searchToggle.attr( 'aria-expanded', 'false' );
     157                        }
    147158                },
    148159
    149160                mceRefresh: function() {
    … …  
    179190
    180191                        inputs.backdrop.hide();
    181192                        inputs.wrap.hide();
     193                        $( 'body' ).removeClass( 'modal-open' );
    182194                        $( document ).trigger( 'wplink-close', inputs.wrap );
    183195                },
    184196
    … …  
    191203                },
    192204
    193205                update: function() {
    194                         if ( wpLink.isMCE() )
     206                        if ( wpLink.isMCE() ) {
    195207                                wpLink.mceUpdate();
    196                         else
     208                        } else {
    197209                                wpLink.htmlUpdate();
     210                        }
    198211                },
    199212
    200213                htmlUpdate: function() {
    … …  
    201214                        var attrs, html, begin, end, cursor, title, selection,
    202215                                textarea = wpLink.textarea;
    203216
    204                         if ( ! textarea )
     217                        if ( ! textarea ) {
    205218                                return;
     219                        }
    206220
    207221                        attrs = wpLink.getAttrs();
    208222
    209223                        // If there's no href, return.
    210                         if ( ! attrs.href || attrs.href == 'http://' )
     224                        if ( ! attrs.href || attrs.href == 'http://' ) {
    211225                                return;
     226                        }
    212227
    213228                        // Build HTML
    214229                        html = '<a href="' + attrs.href + '"';
    … …  
    244259                                cursor      = begin + html.length;
    245260
    246261                                // If no text is selected, place the cursor inside the closing tag.
    247                                 if ( begin == end )
     262                                if ( begin == end ) {
    248263                                        cursor -= '</a>'.length;
     264                                }
    249265
    250266                                textarea.value = textarea.value.substring( 0, begin ) + html +
    251267                                        textarea.value.substring( end, textarea.value.length );
    … …  
    324340                                rivers.search.show();
    325341
    326342                                // Don't search if the keypress didn't change the title.
    327                                 if ( wpLink.lastSearch == search )
     343                                if ( wpLink.lastSearch == search ) {
    328344                                        return;
     345                                }
    329346
    330347                                wpLink.lastSearch = search;
    331348                                waiting = t.parent().find('.spinner').show();
    … …  
    375392                                return;
    376393                        }
    377394
    378                         if ( document.activeElement &&
    379                                 ( document.activeElement.id === 'link-title-field' || document.activeElement.id === 'url-field' ) ) {
     395                        if ( document.activeElement && (
     396                                'wp-link-close' === document.activeElement.id ||
     397                                'link-title-field' === document.activeElement.id ||
     398                                'url-field' === document.activeElement.id ||
     399                                'link-target-checkbox' === document.activeElement.id ||
     400                                'wp-link-search-toggle' === document.activeElement.id ||
     401                                'wp-link-cancel-button' === document.activeElement.id ||
     402                                'wp-link-submit' === document.activeElement.id
     403                                ) ) {
    380404                                return;
    381405                        }
    382406
    … …  
    399423                delayedCallback: function( func, delay ) {
    400424                        var timeoutTriggered, funcTriggered, funcArgs, funcContext;
    401425
    402                         if ( ! delay )
     426                        if ( ! delay ) {
    403427                                return func;
     428                        }
    404429
    405430                        setTimeout( function() {
    406                                 if ( funcTriggered )
     431                                if ( funcTriggered ) {
    407432                                        return func.apply( funcContext, funcArgs );
     433                                }
    408434                                // Otherwise, wait.
    409435                                timeoutTriggered = true;
    410436                        }, delay );
    411437
    412438                        return function() {
    413                                 if ( timeoutTriggered )
     439                                if ( timeoutTriggered ) {
    414440                                        return func.apply( this, arguments );
     441                                }
    415442                                // Otherwise, wait.
    416443                                funcArgs = arguments;
    417444                                funcContext = this;
    … …  
    420447                },
    421448
    422449                toggleInternalLinking: function( event ) {
    423                         var visible = inputs.wrap.hasClass( 'search-panel-visible' );
     450                        visible = inputs.wrap.hasClass( 'search-panel-visible' );
    424451
    425452                        inputs.wrap.toggleClass( 'search-panel-visible', ! visible );
    426453                        setUserSetting( 'wplink', visible ? '0' : '1' );
    427                         inputs[ ! visible ? 'search' : 'url' ].focus();
     454                        if ( ! visible ) {
     455                                inputs.search.focus();
     456                                inputs.searchToggle.attr( 'aria-expanded', 'true' );
     457                        } else {
     458                                inputs.searchToggle.attr( 'aria-expanded', 'false' );
     459                        }
    428460                        event.preventDefault();
    429461                }
    430462        };
    … …  
    467499                select: function( li, event ) {
    468500                        var liHeight, elHeight, liTop, elTop;
    469501
    470                         if ( li.hasClass( 'unselectable' ) || li == this.selected )
     502                        if ( li.hasClass( 'unselectable' ) || li == this.selected ) {
    471503                                return;
     504                        }
    472505
    473506                        this.deselect();
    474                         this.selected = li.addClass( 'selected' );
     507                        this.selected = li.addClass( 'selected' ).attr( 'aria-selected', 'true' ).focus();
    475508                        // Make sure the element is visible
    476509                        liHeight = li.outerHeight();
    477510                        elHeight = this.element.height();
    … …  
    478511                        liTop = li.position().top;
    479512                        elTop = this.element.scrollTop();
    480513
    481                         if ( liTop < 0 ) // Make first visible element
     514                        if ( liTop < 0 ) { // Make first visible element
    482515                                this.element.scrollTop( elTop + liTop );
    483                         else if ( liTop + liHeight > elHeight ) // Make last visible element
     516                        } else if ( liTop + liHeight > elHeight ) { // Make last visible element
    484517                                this.element.scrollTop( elTop + liTop - elHeight + liHeight );
     518                        }
    485519
    486520                        // Trigger the river-select event
    487521                        this.element.trigger( 'river-select', [ li, event, this ] );
    488522                },
    489523                deselect: function() {
    490                         if ( this.selected )
    491                                 this.selected.removeClass( 'selected' );
     524                        if ( this.selected ) {
     525                                this.selected.removeClass( 'selected' ).attr( 'aria-selected', 'false' );
     526                        }
    492527                        this.selected = false;
    493528                },
    494529                prev: function() {
    495                         if ( ! this.visible )
     530                        if ( ! this.visible ) {
    496531                                return;
     532                        }
    497533
    498534                        var to;
    499535                        if ( this.selected ) {
    500536                                to = this.selected.prev( 'li' );
    501                                 if ( to.length )
     537                                if ( to.length ) {
    502538                                        this.select( to );
     539                                }
    503540                        }
    504541                },
    505542                next: function() {
    506                         if ( ! this.visible )
     543                        if ( ! this.visible ) {
    507544                                return;
     545                        }
    508546
    509547                        var to = this.selected ? this.selected.next( 'li' ) : $( 'li:not(.unselectable):first', this.element );
    510                         if ( to.length )
     548                        if ( to.length ) {
    511549                                this.select( to );
     550                        }
    512551                },
    513552                ajax: function( callback ) {
    514553                        var self = this,
    … …  
    515554                                delay = this.query.page == 1 ? 0 : wpLink.minRiverAJAXDuration,
    516555                                response = wpLink.delayedCallback( function( results, params ) {
    517556                                        self.process( results, params );
    518                                         if ( callback )
     557                                        if ( callback ) {
    519558                                                callback( results, params );
     559                                        }
    520560                                }, delay );
    521561
    522562                        this.query.ajax( response );
    523563                },
    524564                change: function( search ) {
    525                         if ( this.query && this._search == search )
     565                        if ( this.query && this._search == search ) {
    526566                                return;
     567                        }
    527568
    528569                        this._search = search;
    529570                        this.query = new Query( search );
    … …  
    542583                                $.each( results, function() {
    543584                                        classes = alt ? 'alternate' : '';
    544585                                        classes += this.title ? '' : ' no-title';
    545                                         list += classes ? '<li class="' + classes + '">' : '<li>';
     586                                        list += classes ? '<li class="' + classes + '" tabindex="-1" role="listitem">' : '<li tabindex="-1" role="listitem">';
    546587                                        list += '<input type="hidden" class="item-permalink" value="' + this.permalink + '" />';
    547588                                        list += '<span class="item-title">';
    548589                                        list += this.title ? this.title : wpLinkL10n.noTitle;
    … …  
    558599                                el = this.element,
    559600                                bottom = el.scrollTop() + el.height();
    560601
    561                         if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold )
     602                        if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold ) {
    562603                                return;
     604                        }
    563605
    564606                        setTimeout(function() {
    565607                                var newTop = el.scrollTop(),
    566608                                        newBottom = newTop + el.height();
    567609
    568                                 if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold )
     610                                if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold ) {
    569611                                        return;
     612                                }
    570613
    571614                                self.waiting.show();
    572615                                el.scrollTop( newTop + self.waiting.outerHeight() );
    … …  
    597640                                        '_ajax_linking_nonce' : inputs.nonce.val()
    598641                                };
    599642
    600                         if ( this.search )
     643                        if ( this.search ) {
    601644                                query.search = this.search;
     645                        }
    602646
    603647                        this.querying = true;
    604648