WordPress.org
Get WordPress

Make WordPress Core

Changeset 32952


Ignore:
Timestamp:
06/26/2015 05:00:42 AM (11 years ago)
Author:
wonderboymusic
Message:

In Media microtemplates after [32467], use <button> instead of <a> for several more non-links.

Props afercia.
Fixes #26550.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/media.css

    r32862 r32952  
    486486
    487487.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
    488         font-size: 0;
    489         top: 0;
    490         right: -6px;
     488        top: -10px;
     489        right: -14px;
     490        padding: 10px;
    491491}
    492492
    493493.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
    494494        content: "\f153";
     495        display: block;
    495496        font: normal 16px/1 dashicons;
    496497        color: #bbb;
    … …  
    635636        content: '\f335';
    636637        font-size: 22px;
    637 }
    638 
    639 .upload-php .media-modal-close .media-modal-icon {
    640         margin: 14px;
    641         width: 22px;
    642638}
    643639
    … …  
    694690        color: #000;
    695691        outline: none;
     692        -webkit-box-shadow: none;
     693        box-shadow: none;
    696694}
    697695

  • trunk/src/wp-includes/css/buttons.css

    r32051 r32952  
    101101}
    102102
     103.ie8 .wp-core-ui .button-link:focus {
     104        outline: #5b9dd9 solid 1px;
     105}
     106
    103107.wp-core-ui .button.hidden {
    104108        display: none;
    … …  
    137141}
    138142
     143.wp-core-ui .button-link {
     144        border: 0;
     145        background: none;
     146        outline: none;
     147        cursor: pointer;
     148}
     149
    139150.wp-core-ui .button.hover,
    140151.wp-core-ui .button:hover,
    … …  
    150161.wp-core-ui .button.focus,
    151162.wp-core-ui .button:focus,
    152 .wp-core-ui .button-secondary:focus {
     163.wp-core-ui .button-secondary:focus,
     164.wp-core-ui .button-link:focus {
    153165        -webkit-box-shadow:
    154166                0 0 0 1px #5b9dd9,

  • trunk/src/wp-includes/css/media-views.css

    r32909 r32952  
    154154.media-modal-close {
    155155        position: absolute;
    156         text-decoration: none;
    157         top: 10px;
    158         right: 10px;
    159         width: 30px;
    160         height: 30px;
     156        top: 0;
     157        right: 0;
     158        width: 50px;
     159        height: 50px;
     160        padding: 0;
    161161        z-index: 1000;
    162162        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
    … …  
    170170
    171171.media-modal-close span.media-modal-icon {
    172         display: block;
    173         margin-top: 5px;
    174         width: 30px;
    175         height: 15px;
    176172        background-image: none;
    177         text-align: center;
    178173}
    179174
    … …  
    210205}
    211206
    212 .media-modal-icon {
     207/* higher specificity */
     208.wp-core-ui .media-modal-icon {
    213209        background-image: url(../images/uploader-icons.png);
    214210        background-repeat: no-repeat;
    … …  
    936932}
    937933
    938 .wp-core-ui .attachment .close {
     934.wp-core-ui .attachment-close {
    939935        display: block;
    940936        position: absolute;
    … …  
    944940        width: 22px;
    945941        padding: 0;
    946         font-size: 20px;
    947         line-height: 20px;
    948         text-align: center;
    949         text-decoration: none;
    950         color: #464646;
    951942        background-color: #fff;
    952943        background-position: -96px 4px;
    953         border-width: 0;
    954944        -webkit-border-radius: 3px;
    955945        border-radius: 3px;
    956946        -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
    957947        box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
    958         -webkit-transition-duration: none;
    959         transition-duration: none;
    960         -webkit-transition-property: none;
    961         transition-property: none;
    962 }
    963 
    964 .wp-core-ui .attachment a.close:hover,
    965 .wp-core-ui .attachment a.close:focus {
    966         -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
    967         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
     948}
     949
     950.wp-core-ui .attachment-close:hover,
     951.wp-core-ui .attachment-close:focus {
    968952        background-position: -36px 4px;
    969 
    970953}
    971954
    … …  
    974957        height: 24px;
    975958        width: 24px;
     959        padding: 0;
    976960        position: absolute;
    977961        z-index: 10;
    … …  
    984968}
    985969
    986 .wp-core-ui .attachment .check div {
     970.wp-core-ui .attachment .check .media-modal-icon {
     971        display: block;
    987972        background-position: -1px 0;
    988973        height: 15px;
    … …  
    991976}
    992977
    993 .wp-core-ui .attachment .check:hover div {
     978.wp-core-ui .attachment .check:hover .media-modal-icon {
    994979        background-position: -40px 0;
    995980}
    … …  
    1011996}
    1012997
    1013 .wp-core-ui .attachment.details .check div,
    1014 .wp-core-ui .media-frame.mode-grid .attachment.selected .check div {
     998.wp-core-ui .attachment.details .check .media-modal-icon,
     999.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
    10151000        background-position: -21px 0;
    10161001}
    10171002
    1018 .wp-core-ui .attachment.details .check:hover div,
    1019 .wp-core-ui .attachment.selected .check:focus div,
    1020 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div {
     1003.wp-core-ui .attachment.details .check:hover .media-modal-icon,
     1004.wp-core-ui .attachment.selected .check:focus .media-modal-icon,
     1005.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
    10211006        background-position: -60px 0;
    10221007}
    … …  
    13921377}
    13931378
    1394 .media-selection .selection-info a {
    1395         display: block;
     1379.media-selection .button-link {
    13961380        float: left;
    13971381        padding: 1px 8px;
    13981382        margin: 1px 8px 1px -8px;
    13991383        line-height: 16px;
    1400         text-decoration: none;
    14011384        border-right: 1px solid #dfdfdf;
    14021385        color: #21759B;
    14031386}
    14041387
    1405 .media-selection .selection-info a:hover {
     1388.media-selection .button-link:hover,
     1389.media-selection .button-link:focus {
    14061390        background: #21759B;
    14071391        color: #fff;
    … …  
    14091393}
    14101394
    1411 .media-selection .selection-info a:last-child {
     1395.media-selection .button-link:last-child {
    14121396        border-right: 0;
    14131397        margin-right: 0;
    14141398}
    14151399
    1416 .media-selection .selection-info .clear-selection {
     1400.selection-info .clear-selection {
    14171401        color: red;
    14181402}
    14191403
    1420 .media-selection .selection-info .clear-selection:hover {
     1404.selection-info .clear-selection:hover,
     1405.selection-info .clear-selection:focus {
    14211406        background: red;
     1407        color: #fff;
    14221408}
    14231409
    … …  
    16411627.media-modal .trash-attachment,
    16421628.media-modal .untrash-attachment {
     1629        display: inline;
     1630        padding: 0;
    16431631        color: #bc0b0b;
    16441632}
    16451633
    16461634.media-modal .delete-attachment:hover,
     1635.media-modal .delete-attachment:focus,
    16471636.media-modal .trash-attachment:hover,
    1648 .media-modal .untrash-attachment:hover {
     1637.media-modal .trash-attachment:focus,
     1638.media-modal .untrash-attachment:hover,
     1639.media-modal .untrash-attachment:focus {
    16491640        color: red;
    16501641}
    … …  
    18921883
    18931884.image-details .advanced-toggle {
     1885        padding: 0;
    18941886        color: #666;
    1895         text-decoration: none;
    1896         display: block;
     1887        text-transform: uppercase;
    18971888}
    18981889

  • trunk/src/wp-includes/js/media-views.js

    r32909 r32952  
    26262626                'change [data-setting] select':   'updateSetting',
    26272627                'change [data-setting] textarea': 'updateSetting',
    2628                 'click .close':                   'removeFromLibrary',
     2628                'click .attachment-close':        'removeFromLibrary',
    26292629                'click .check':                   'checkClickHandler',
    2630                 'click a':                        'preventDefault',
    2631                 'keydown .close':                 'removeFromLibrary',
    26322630                'keydown':                        'toggleSelectionHandler'
    26332631        },
    … …  
    27572755                var method;
    27582756
    2759                 // Don't do anything inside inputs.
    2760                 if ( 'INPUT' === event.target.nodeName ) {
     2757                // Don't do anything inside inputs and on the attachment check and remove buttons.
     2758                if ( 'INPUT' === event.target.nodeName || 'BUTTON' === event.target.nodeName ) {
    27612759                        return;
    27622760                }
    … …  
    29442942        },
    29452943        /**
    2946          * @param {Object} event
    2947          */
    2948         preventDefault: function( event ) {
    2949                 event.preventDefault();
    2950         },
    2951         /**
    29522944         * @param {string} size
    29532945         * @returns {Object}
    … …  
    31983190        initialFocus: function() {
    31993191                if ( ! wp.media.isTouchDevice ) {
    3200                         this.$( ':input' ).eq( 0 ).focus();
     3192                        /*
     3193                        Previously focused the first ':input' (the readonly URL text field).
     3194                        Since the first ':input' is now a button (delete/trash): when pressing
     3195                        spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment
     3196                        as soon as focus is moved. Explicitly target the first text field for now.
     3197                        @todo change initial focus logic, also for accessibility.
     3198                        */
     3199                        this.$( 'input[type="text"]' ).eq( 0 ).focus();
    32013200                }
    32023201        },

  • trunk/src/wp-includes/js/media/views/attachment.js

    r31960 r32952  
    3434                'change [data-setting] select':   'updateSetting',
    3535                'change [data-setting] textarea': 'updateSetting',
    36                 'click .close':                   'removeFromLibrary',
     36                'click .attachment-close':        'removeFromLibrary',
    3737                'click .check':                   'checkClickHandler',
    38                 'click a':                        'preventDefault',
    39                 'keydown .close':                 'removeFromLibrary',
    4038                'keydown':                        'toggleSelectionHandler'
    4139        },
    … …  
    165163                var method;
    166164
    167                 // Don't do anything inside inputs.
    168                 if ( 'INPUT' === event.target.nodeName ) {
     165                // Don't do anything inside inputs and on the attachment check and remove buttons.
     166                if ( 'INPUT' === event.target.nodeName || 'BUTTON' === event.target.nodeName ) {
    169167                        return;
    170168                }
    … …  
    352350        },
    353351        /**
    354          * @param {Object} event
    355          */
    356         preventDefault: function( event ) {
    357                 event.preventDefault();
    358         },
    359         /**
    360352         * @param {string} size
    361353         * @returns {Object}

  • trunk/src/wp-includes/js/media/views/attachment/details.js

    r32909 r32952  
    5050        initialFocus: function() {
    5151                if ( ! wp.media.isTouchDevice ) {
    52                         this.$( ':input' ).eq( 0 ).focus();
     52                        /*
     53                        Previously focused the first ':input' (the readonly URL text field).
     54                        Since the first ':input' is now a button (delete/trash): when pressing
     55                        spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment
     56                        as soon as focus is moved. Explicitly target the first text field for now.
     57                        @todo change initial focus logic, also for accessibility.
     58                        */
     59                        this.$( 'input[type="text"]' ).eq( 0 ).focus();
    5360                }
    5461        },

  • trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

    r32051 r32952  
    107107
    108108.media-embed-details .setting p,
    109 .media-embed-details .setting a {
     109.media-embed-details .setting .remove-setting {
    110110        color: #a00;
    111111        font-size: 10px;
    112112        text-transform: uppercase;
     113}
     114
     115.media-embed-details .setting .remove-setting {
     116        padding: 0;
    113117}
    114118

  • trunk/src/wp-includes/media-template.php

    r32909 r32952  
    167167        <script type="text/html" id="tmpl-media-modal">
    168168                <div class="<?php echo $class; ?>">
    169                         <a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>
     169                        <button type="button" class="button-link media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
    170170                        <div class="media-modal-content"></div>
    171171                </div>
    … …  
    262262        <script type="text/html" id="tmpl-uploader-status">
    263263                <h3><?php _e( 'Uploading' ); ?></h3>
    264                 <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
     264                <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
    265265
    266266                <div class="media-progress-bar"><div></div></div>
    … …  
    435435                                        <?php if ( MEDIA_TRASH ): ?>
    436436                                                <# if ( 'trash' === data.status ) { #>
    437                                                         <a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
     437                                                        <button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
    438438                                                <# } else { #>
    439                                                         <a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
     439                                                        <button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
    440440                                                <# } #>
    441441                                        <?php else: ?>
    442                                                 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
     442                                                <button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
    443443                                        <?php endif; ?>
    444444                                <# } #>
    … …  
    471471                        </div>
    472472                        <# if ( data.buttons.close ) { #>
    473                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
     473                                <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
    474474                        <# } #>
    475475                </div>
    476476                <# if ( data.buttons.check ) { #>
    477                         <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
     477                        <button type="button" class="button-link check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
    478478                <# } #>
    479479                <#
    … …  
    537537                                        <?php if ( MEDIA_TRASH ): ?>
    538538                                        <# if ( 'trash' === data.status ) { #>
    539                                                 <a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
     539                                                <button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
    540540                                        <# } else { #>
    541                                                 <a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
     541                                                <button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
    542542                                        <# } #>
    543543                                        <?php else: ?>
    544                                                 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
     544                                                <button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
    545545                                        <?php endif; ?>
    546546                                <# } #>
    … …  
    596596                        <span class="count"></span>
    597597                        <# if ( data.editable ) { #>
    598                                 <a class="edit-selection" href="#"><?php _e( 'Edit Selection' ); ?></a>
     598                                <button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button>
    599599                        <# } #>
    600600                        <# if ( data.clearable ) { #>
    601                                 <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
     601                                <button type="button" class="button-link clear-selection"><?php _e( 'Clear' ); ?></button>
    602602                        <# } #>
    603603                </div>
    … …  
    992992                                        </div>
    993993                                        <div class="advanced-section">
    994                                                 <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
     994                                                <h3><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h3>
    995995                                                <div class="advanced-settings hidden">
    996996                                                        <div class="advanced-image">
    … …  
    10491049                                        <span>SRC</span>
    10501050                                        <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
    1051                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
     1051                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
    10521052                                </label>
    10531053                                <# } #>
    … …  
    10631063                                        <span><?php echo strtoupper( $type ) ?></span>
    10641064                                        <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
    1065                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
     1065                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
    10661066                                </label>
    10671067                                <# } #>
    … …  
    11321132                                        <span>SRC</span>
    11331133                                        <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
    1134                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
     1134                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
    11351135                                </label>
    11361136                                <# } #>
    … …  
    11441144                                        <span><?php echo strtoupper( $type ) ?></span>
    11451145                                        <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
    1146                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
     1146                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
    11471147                                </label>
    11481148                                <# } #>
    … …  
    11651165                                        <span><?php _e( 'Poster Image' ); ?></span>
    11661166                                        <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
    1167                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
     1167                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove' ); ?></button>
    11681168                                </label>
    11691169                                <# } #>
    … …  
    11971197                                                <p>
    11981198                                                        <input class="content-track" type="text" value="{{ track.outerHTML }}" />
    1199                                                         <a class="remove-setting remove-track"><?php _e( 'Remove' ); ?></a>
     1199                                                        <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove', 'media' ); ?></button>
    12001200                                                </p>
    12011201                                                <# } ); #>
Note: See TracChangeset for help on using the changeset viewer.