WordPress.org

Make WordPress Core

Changeset 38881


Ignore:
Timestamp:
10/23/2016 07:56:43 PM (19 months ago)
Author:
afercia
Message:

Customize: Keep previously uploaded header images in place.

On the Header Image section, the previously uploaded images disappeared off-screen
when using the keyboard to navigate and the remove "X" button got keyboard focus.
Changing the off-screen CSS technique used for the "X" buttons fixes it.

  • improves the focus style on the previously uploaded and suggested images
  • removes a tabindex="0" attribute from the current header image

Fixes #38156.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r38880 r38881  
    918918    border: 0;
    919919}
     920
     921.customize-control-header .header-view.selected .choice:focus {
     922    outline: none;
     923}
     924
    920925.customize-control-header .header-view.selected:after {
    921926    content: '';
     
    927932    border-radius: 2px;
    928933}
     934
    929935.customize-control-header .header-view.button.selected {
    930936    border: 0;
     
    940946    position: absolute;
    941947    top: 10px;
    942     right: -999px;
     948    left: -999px;
    943949    z-index: 1;
    944950    width: 26px;
     
    949955.customize-control-header .header-view:hover .close,
    950956.customize-control-header .header-view .close:focus {
     957    left: auto;
    951958    right: 10px;
     959}
     960
     961.customize-control-header .header-view .close:focus {
     962    outline: 1px solid #5b9dd9;
    952963}
    953964
     
    9961007    display: block;
    9971008    margin-bottom: 9px;
     1009}
     1010
     1011.customize-control-header .choice:focus {
     1012    outline: none;
     1013    -webkit-box-shadow:
     1014        0 0 0 1px #5b9dd9,
     1015        0 0 3px 1px rgba(30, 140, 190, .8);
     1016    box-shadow:
     1017        0 0 0 1px #5b9dd9,
     1018        0 0 3px 1px rgba(30, 140, 190, .8);
    9981019}
    9991020
  • trunk/src/wp-includes/customize/class-wp-customize-header-image-control.php

    r37426 r38881  
    103103            <# } else { #>
    104104
    105             <# if (data.type === 'uploaded') { #>
    106                 <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
    107             <# } #>
    108 
    109105            <button type="button" class="choice thumbnail"
    110106                data-customize-image-value="{{{data.header.url}}}"
     
    113109                <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
    114110            </button>
     111
     112            <# if ( data.type === 'uploaded' ) { #>
     113                <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
     114            <# } #>
    115115
    116116            <# } #>
     
    132132                <# } else { #>
    133133
    134             <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" tabindex="0"/>
     134            <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" />
    135135
    136136                <# } #>
Note: See TracChangeset for help on using the changeset viewer.