WordPress.org

Make WordPress Core

Changeset 38881


Ignore:
Timestamp:
10/23/16 19:56:43 (14 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.