WordPress.org
Get WordPress

Make WordPress Core

Ticket #28897: 28897.3.patch

File 28897.3.patch, 7.7 KB (added by afercia, 11 years ago)

better cross-browser styling

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

     
    13751375                <?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
    13761376                <div id="link-modal-title">
    13771377                        <?php _e( 'Insert/edit link' ) ?>
    1378                         <div id="wp-link-close" tabindex="0"></div>
     1378                        <button id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    13791379                </div>
    13801380                <div id="link-selector">
    13811381                        <div id="link-options">
    … …  
    13901390                                        <label><span>&nbsp;</span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
    13911391                                </div>
    13921392                        </div>
    1393                         <p class="howto" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></p>
     1393                        <p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
    13941394                        <div id="search-panel">
    13951395                                <div class="link-search-wrapper">
    13961396                                        <label>
    … …  
    13991399                                                <span class="spinner"></span>
    14001400                                        </label>
    14011401                                </div>
    1402                                 <div id="search-results" class="query-results">
     1402                                <div id="search-results" class="query-results" tabindex="0">
    14031403                                        <ul></ul>
    14041404                                        <div class="river-waiting">
    14051405                                                <span class="spinner"></span>
    14061406                                        </div>
    14071407                                </div>
    1408                                 <div id="most-recent-results" class="query-results">
    1409                                         <div class="query-notice"><em><?php _e( 'No search term specified. Showing recent items.' ); ?></em></div>
     1408                                <div id="most-recent-results" class="query-results" tabindex="0">
     1409                                        <div class="query-notice" id="query-notice-message">
     1410                                                <em class="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
     1411                                                <em class="query-notice-hint screen-reader-text"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em>
     1412                                        </div>
    14101413                                        <ul></ul>
    14111414                                        <div class="river-waiting">
    14121415                                                <span class="spinner"></span>
    … …  
    14151418                        </div>
    14161419                </div>
    14171420                <div class="submitbox">
     1421                        <div id="wp-link-cancel">
     1422                                <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
     1423                        </div>
    14181424                        <div id="wp-link-update">
    14191425                                <input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
    14201426                        </div>
    1421                         <div id="wp-link-cancel">
    1422                                 <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
    1423                         </div>
    14241427                </div>
    14251428                </form>
    14261429                </div>

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

     
    7979}
    8080
    8181.mce-textbox,
    82 .mce-checkbox i.mce-i-checkbox {
     82.mce-checkbox i.mce-i-checkbox,
     83#wp-link .query-results {
    8384        border: 1px solid #ddd;
    8485        -webkit-border-radius: 0;
    8586        border-radius: 0;
    8687        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    8788        box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    88         -webkit-transition: .05s border-color ease-in-out;
    89         transition: .05s border-color ease-in-out;
     89        -webkit-transition: .05s all ease-in-out;
     90        transition: .05s all ease-in-out;
    9091}
    9192
    9293.mce-textbox:focus,
    9394.mce-textbox.mce-focus,
    94 .mce-checkbox:focus i.mce-i-checkbox {
     95.mce-checkbox:focus i.mce-i-checkbox,
     96#wp-link .query-results:focus {
    9597        border-color: #5b9dd9;
    9698        -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
    9799        box-shadow: 0 0 2px rgba(30,140,190,0.8);
    … …  
    10611063
    10621064#wp-link-close {
    10631065        color: #666;
    1064         cursor: pointer;
    10651066        padding: 0;
    10661067        position: absolute;
    10671068        top: 0;
    … …  
    10691070        width: 36px;
    10701071        height: 36px;
    10711072        text-align: center;
     1073        background: none;
     1074        border: none;
     1075        cursor: pointer;
    10721076}
    10731077
    10741078#wp-link-close:before {
    … …  
    10871091        color: #2ea2cc;
    10881092}
    10891093
     1094#wp-link-close:focus {
     1095        outline: none;
     1096        -webkit-box-shadow:
     1097                0 0 0 1px #5b9dd9,
     1098                0 0 2px 1px rgba(30, 140, 190, .8);
     1099        box-shadow:
     1100                0 0 0 1px #5b9dd9,
     1101                0 0 2px 1px rgba(30, 140, 190, .8);
     1102}
     1103
    10901104#link-selector {
    10911105        padding: 0 16px 50px;
    10921106}
    … …  
    11351149        margin: 3px 0;
    11361150}
    11371151
     1152#wp-link p.howto a {
     1153        text-decoration: none;
     1154        color: inherit;
     1155}
     1156
    11381157#wp-link-search-toggle {
    11391158        cursor: pointer;
    11401159}
    … …  
    11981217        top: 205px;
    11991218}
    12001219
    1201 #wp-link li,
    1202 #wp-link .query-notice {
     1220#wp-link li {
    12031221        clear: both;
    12041222        margin-bottom: 0;
    12051223        border-bottom: 1px solid #f1f1f1;
    12061224        color: #333;
    1207         padding: 4px 6px;
     1225        padding: 4px 6px 4px 10px;
    12081226        cursor: pointer;
    12091227        position: relative;
    12101228}
    12111229
     1230#wp-link .query-notice {
     1231        padding: 0;
     1232        border-bottom: 1px solid #dfdfdf;
     1233        background-color: #f7fcfe;
     1234        color: #000;
     1235}
     1236
     1237#wp-link .query-notice .query-notice-default,
     1238#wp-link .query-notice .query-notice-hint {
     1239        display: block;
     1240        padding: 6px;
     1241        border-left: 4px solid #2ea2cc;
     1242}
     1243
     1244#wp-link .unselectable.no-matches-found {
     1245        padding: 0;
     1246        border-bottom: 1px solid #dfdfdf;
     1247        background-color: #fef7f1;
     1248}
     1249
     1250#wp-link .no-matches-found .item-title {
     1251        display: block;
     1252        padding: 6px;
     1253        border-left: 4px solid #d54e21;
     1254}
     1255
     1256#wp-link .query-results em {
     1257        font-style: normal;
     1258}
     1259
    12121260#wp-link li:hover {
    12131261        background: #eaf2fa;
    12141262        color: #151515;
    … …  
    12851333
    12861334#wp-link-cancel {
    12871335        line-height: 25px;
     1336        float: left;
    12881337}
    12891338
    12901339#wp-link-update {

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

     
    3131                        rivers.recent = new River( $( '#most-recent-results' ) );
    3232                        rivers.elements = inputs.dialog.find( '.query-results' );
    3333
     34                        // Get search notice text
     35                        inputs.queryNotice = $( '#query-notice-message' );
     36                        inputs.queryNoticeTextDefault = inputs.queryNotice.find( '.query-notice-default' );
     37                        inputs.queryNoticeTextHint = inputs.queryNotice.find( '.query-notice-hint' );
     38
    3439                        // Bind event handlers
    3540                        inputs.dialog.keydown( wpLink.keydown );
    3641                        inputs.dialog.keyup( wpLink.keyup );
    … …  
    4348                                wpLink.close();
    4449                        });
    4550
    46                         $( '#wp-link-search-toggle' ).click( wpLink.toggleInternalLinking );
     51                        $( '#wp-link-search-toggle' ).on( 'click', wpLink.toggleInternalLinking );
    4752
    4853                        rivers.elements.on( 'river-select', wpLink.updateFields );
    4954
     55                        // Display 'hint' message when search field or 'query-results' box are focused
     56                        inputs.search.add( rivers.elements ).on( 'focus.wplink', function() {
     57                                inputs.queryNoticeTextDefault.hide();
     58                                inputs.queryNoticeTextHint.removeClass( 'screen-reader-text' ).show();
     59                        } ).on( 'blur.wplink', function() {
     60                                inputs.queryNoticeTextDefault.show();
     61                                inputs.queryNoticeTextHint.addClass( 'screen-reader-text' ).hide();
     62                        } );
     63
    5064                        inputs.search.keyup( function() {
    5165                                var self = this;
    5266
    … …  
    335349                        } else if ( key.TAB === event.keyCode ) {
    336350                                id = event.target.id;
    337351
     352                                // wp-link-submit must always be the last focusable element in the dialog.
     353                                // following focusable elements will be skipped on keyboard navigation.
    338354                                if ( id === 'wp-link-submit' && ! event.shiftKey ) {
    339355                                        inputs.close.focus();
    340356                                        event.preventDefault();
    … …  
    387403                        };
    388404                },
    389405
    390                 toggleInternalLinking: function() {
     406                toggleInternalLinking: function( event ) {
    391407                        var visible = inputs.wrap.hasClass( 'search-panel-visible' );
    392408
    393409                        inputs.wrap.toggleClass( 'search-panel-visible', ! visible );
    394410                        setUserSetting( 'wplink', visible ? '0' : '1' );
    395411                        inputs[ ! visible ? 'search' : 'url' ].focus();
     412                        event.preventDefault();
    396413                }
    397414        };
    398415
    … …  
    502519
    503520                        if ( ! results ) {
    504521                                if ( firstPage ) {
    505                                         list += '<li class="unselectable"><span class="item-title"><em>' +
     522                                        list += '<li class="unselectable no-matches-found"><span class="item-title"><em>' +
    506523                                                wpLinkL10n.noMatchesFound + '</em></span></li>';
    507524                                }
    508525                        } else {