WordPress.org
Get WordPress

Make WordPress Core

Changeset 32952


Ignore:
Timestamp:
06/26/2015 05:00:42 AM (9 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.