WordPress.org

Make WordPress Core

Ticket #21283: 21283.2.diff

File 21283.2.diff, 6.5 KB (added by lessbloat, 19 months ago)
  • wp-includes/class-wp-customize-section.php

     
    8080        protected function render() { 
    8181                ?> 
    8282                <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section"> 
    83                         <h3 class="customize-section-title" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3> 
     83                        <h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3> 
    8484                        <ul class="customize-section-content"> 
    8585                                <?php 
    8686                                foreach ( $this->controls as $control ) 
  • wp-includes/class-wp-customize-control.php

     
    520520                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> 
    521521 
    522522                        <div class="customize-control-content"> 
    523                                 <div class="dropdown preview-thumbnail"> 
     523                                <div class="dropdown preview-thumbnail" tabindex="0"> 
    524524                                        <div class="dropdown-content"> 
    525525                                                <?php if ( empty( $src ) ): ?> 
    526526                                                        <img style="display:none;" /> 
     
    536536                        <div class="library"> 
    537537                                <ul> 
    538538                                        <?php foreach ( $this->tabs as $id => $tab ): ?> 
    539                                                 <li data-customize-tab='<?php echo esc_attr( $id ); ?>'> 
     539                                                <li data-customize-tab='<?php echo esc_attr( $id ); ?>' tabindex='0'> 
    540540                                                        <?php echo esc_html( $tab['label'] ); ?> 
    541541                                                </li> 
    542542                                        <?php endforeach; ?> 
  • wp-admin/customize.php

     
    8383                        $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') ); 
    8484                ?> 
    8585 
    86                 <div class="wp-full-overlay-sidebar-content"> 
     86                <div class="wp-full-overlay-sidebar-content" tabindex="-1"> 
    8787                        <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>"> 
    88                                 <div class="customize-section-title"> 
     88                                <div class="customize-section-title" tabindex="0"> 
    8989                                        <span class="preview-notice"><?php 
    9090                                                /* translators: %s is the theme name in the Customize/Live Preview pane */ 
    9191                                                echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' ); 
  • wp-admin/js/customize-controls.js

     
    9494                                        else 
    9595                                                statuses.hide(); 
    9696                                }; 
    97  
     97                         
     98                        var toggleFreeze = false; 
     99                         
    98100                        // Support the .dropdown class to open/close complex elements 
    99                         this.container.on( 'click', '.dropdown', function( event ) { 
     101                        this.container.on( 'click focus', '.dropdown', function( event ) { 
    100102                                event.preventDefault(); 
    101                                 control.container.toggleClass('open'); 
     103                                 
     104                                if (!toggleFreeze) 
     105                                        control.container.toggleClass('open'); 
     106                                 
     107                                // Don't want to fire focus and click at same time 
     108                                toggleFreeze = true; 
     109                                setTimeout(function () { 
     110                                        toggleFreeze = false; 
     111                                }, 400); 
    102112                        }); 
    103113 
    104114                        this.setting.bind( update ); 
     
    221231                        }); 
    222232 
    223233                        // Bind tab switch events 
    224                         this.library.children('ul').on( 'click', 'li', function( event ) { 
     234                        this.library.children('ul').on( 'click keydown', 'li', function( event ) { 
     235                                 
     236                                if ( event.type === 'keydown' &&  13 !== event.which ) 
     237                                        return; 
     238                                 
    225239                                var id  = $(this).data('customizeTab'), 
    226240                                        tab = control.tabs[ id ]; 
    227241 
     
    824838                }()); 
    825839 
    826840                // Temporary accordion code. 
    827                 $('.customize-section-title').click( function( event ) { 
     841                var accordianFrozen = false; 
     842                $('.customize-section-title').bind('click focus', function( event ) { 
    828843                        var clicked = $( this ).parents( '.customize-section' ); 
    829844 
    830                         if ( clicked.hasClass('cannot-expand') ) 
     845                        if ( clicked.hasClass('cannot-expand') || accordianFrozen ) 
    831846                                return; 
     847                         
     848                        // Don't want to fire focus and click at same time 
     849                        accordianFrozen = true; 
     850                        setTimeout(function () { 
     851                                accordianFrozen = false; 
     852                        }, 400); 
     853                         
     854                        // Scroll up if on #customize-section-title_tagline 
     855                        if ('customize-section-title_tagline' === clicked.attr('id')) 
     856                                $('.wp-full-overlay-sidebar-content').scrollTop(0); 
    832857 
    833858                        $( '.customize-section' ).not( clicked ).removeClass( 'open' ); 
    834859                        clicked.toggleClass( 'open' ); 
     
    839864                $('#save').click( function( event ) { 
    840865                        previewer.save(); 
    841866                        event.preventDefault(); 
     867                }).keydown( function( event ) { 
     868                        if ( 13 === event.which ) // enter 
     869                                previewer.save(); 
     870                        event.preventDefault(); 
    842871                }); 
     872                 
     873                $('.back').keydown( function( event ) { 
     874                        if ( 9 === event.which ) // tab 
     875                                return; 
     876                        var thisHref = $(this).attr('href'); 
     877                        if ( 13 === event.which ) // enter 
     878                                window.location = thisHref; 
     879                        event.preventDefault(); 
     880                }); 
    843881 
    844882                $('.collapse-sidebar').click( function( event ) { 
    845883                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); 
     
    958996                }); 
    959997 
    960998                api.trigger( 'ready' ); 
     999                 
     1000                // Make sure left column gets focus 
     1001                $('.back').focus(); 
     1002                setTimeout(function () { 
     1003                        $('.back').focus(); 
     1004                }, 800); 
     1005 
    9611006        }); 
    9621007 
    9631008})( wp, jQuery ); 
     1009 No newline at end of file 
  • wp-admin/css/customize-controls.css

     
    6767 
    6868.control-section:hover .customize-section-title, 
    6969.control-section .customize-section-title:hover, 
    70 .control-section.open .customize-section-title { 
     70.control-section.open .customize-section-title, 
     71.customize-section-title:focus { 
    7172        color: #fff; 
    7273        text-shadow: 0 -1px 0 #333; 
    7374        background: #808080; 
     
    126127        color: #999; 
    127128} 
    128129 
     130#customize-info .customize-section-title:focus .preview-notice { 
     131        color: #ccc; 
     132        text-shadow: 0 -1px 0 #333; 
     133} 
     134 
    129135#customize-info .theme-name { 
    130136        font-size: 20px; 
    131137        font-weight: 200; 
     
    135141        text-shadow: 0 1px 0 #fff; 
    136142} 
    137143 
     144#customize-info .customize-section-title:focus .theme-name { 
     145        color: #fff; 
     146        text-shadow: 0 -1px 0 #333; 
     147} 
     148 
    138149#customize-info .theme-screenshot { 
    139150        width: 258px; 
    140151        border: 1px solid #ccc;