WordPress.org

Make WordPress Core

Ticket #21283: 21283.7.diff

File 21283.7.diff, 10.3 KB (added by jorbin, 18 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

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

     
    6767<body class="<?php echo esc_attr( $body_class ); ?>"> 
    6868<div class="wp-full-overlay expanded"> 
    6969        <form id="customize-controls" class="wrap wp-full-overlay-sidebar"> 
    70                 <div id="customize-header-actions" class="wp-full-overlay-header"> 
    71                         <?php 
    72                                 $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' ); 
    73                                 submit_button( $save_text, 'primary', 'save', false ); 
    74                         ?> 
    75                         <span class="spinner"></span> 
    76                         <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>"> 
    77                                 <?php _e( 'Cancel' ); ?> 
    78                         </a> 
    79                 </div> 
    8070 
    8171                <?php 
    8272                        $screenshot = $wp_customize->theme()->get_screenshot(); 
    8373                        $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') ); 
    8474                ?> 
    8575 
    86                 <div class="wp-full-overlay-sidebar-content"> 
     76                <div class="wp-full-overlay-sidebar-content" tabindex="-1"> 
    8777                        <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>"> 
    88                                 <div class="customize-section-title"> 
     78                                <div class="customize-section-title" aria-label="Theme Customizer Options" tabindex="0"> 
    8979                                        <span class="preview-notice"><?php 
    9080                                                /* translators: %s is the theme name in the Customize/Live Preview pane */ 
    9181                                                echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' ); 
     
    113103                </div> 
    114104 
    115105                <div id="customize-footer-actions" class="wp-full-overlay-footer"> 
     106                        <?php 
     107                                $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' ); 
     108                                submit_button( $save_text, 'primary save', 'save', false ); 
     109                        ?> 
     110                        <span class="spinner"></span> 
     111                        <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>"> 
     112                                <?php _e( 'Cancel' ); ?> 
     113                        </a> 
     114                         
    116115                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"> 
    117116                                <span class="collapse-sidebar-arrow"></span> 
    118117                                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span> 
  • 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 ); 
     
    210220                        }); 
    211221 
    212222                        // Bind tab switch events 
    213                         this.library.children('ul').on( 'click', 'li', function( event ) { 
     223                        this.library.children('ul').on( 'click keydown', 'li', function( event ) { 
     224                                 
     225                                if ( event.type === 'keydown' &&  13 !== event.which ) 
     226                                        return; 
     227                                 
    214228                                var id  = $(this).data('customizeTab'), 
    215229                                        tab = control.tabs[ id ]; 
    216230 
     
    225239                        }); 
    226240 
    227241                        // Bind events to switch image urls. 
    228                         this.library.on( 'click', 'a', function( event ) { 
     242                        this.library.on( 'click keydown', 'a', function( event ) { 
     243                        if ( event.type === 'keydown' &&  13 !== event.which ) // enter 
     244                                        return; 
     245 
    229246                                var value = $(this).data('customizeImageValue'); 
    230247 
    231248                                if ( value ) { 
     
    364381                                if ( -1 === index || index < response.lastIndexOf('</html>') ) { 
    365382                                        deferred.rejectWith( self, [ 'unsigned' ] ); 
    366383                                        return; 
    367                                 } 
     384                        e} 
    368385 
    369386                                // Strip the signature from the request. 
    370387                                response = response.slice( 0, index ) + response.slice( index + signature.length ); 
     
    774791                                activated = state.create('activated'); 
    775792 
    776793                        state.bind( 'change', function() { 
    777                                 var save = $('#save'), 
     794                                var save = $('.save'), 
    778795                                        back = $('.back'); 
    779796 
    780797                                if ( ! activated() ) { 
     
    814831                }()); 
    815832 
    816833                // Temporary accordion code. 
    817                 $('.customize-section-title').click( function( event ) { 
     834                var accordianFrozen = false; 
     835                $('.customize-section-title').bind('click keydown', function( event ) { 
     836                         
     837                        if ( event.type === 'keydown' &&  13 !== event.which ) // enter 
     838                                        return; 
     839                         
    818840                        var clicked = $( this ).parents( '.customize-section' ); 
    819841 
    820                         if ( clicked.hasClass('cannot-expand') ) 
     842                        if ( clicked.hasClass('cannot-expand') || accordianFrozen ) 
    821843                                return; 
     844                         
     845                        // Don't want to fire focus and click at same time 
     846                        accordianFrozen = true; 
     847                        setTimeout(function () { 
     848                                accordianFrozen = false; 
     849                        }, 400); 
     850                         
     851                        // Scroll up if on #customize-section-title_tagline 
     852                        if ('customize-section-title_tagline' === clicked.attr('id')) 
     853                                $('.wp-full-overlay-sidebar-content').scrollTop(0); 
    822854 
    823855                        $( '.customize-section' ).not( clicked ).removeClass( 'open' ); 
    824856                        clicked.toggleClass( 'open' ); 
     
    826858                }); 
    827859 
    828860                // Button bindings. 
    829                 $('#save').click( function( event ) { 
     861                $('.save').click( function( event ) { 
    830862                        previewer.save(); 
    831863                        event.preventDefault(); 
     864                }).keydown( function( event ) { 
     865                        if ( 9 === event.which ) // tab 
     866                                return; 
     867                        if ( 13 === event.which ) // enter 
     868                                previewer.save(); 
     869                        event.preventDefault(); 
    832870                }); 
     871                 
     872                $('.back').keydown( function( event ) { 
     873                        if ( 9 === event.which ) // tab 
     874                                return; 
     875                        var thisHref = $(this).attr('href'); 
     876                        if ( 13 === event.which ) // enter 
     877                                window.location = thisHref; 
     878                        event.preventDefault(); 
     879                }); 
    833880 
    834881                $('.collapse-sidebar').click( function( event ) { 
    835882                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' ); 
     
    948995                }); 
    949996 
    950997                api.trigger( 'ready' ); 
     998 
     999                // Make sure left column gets focus 
     1000                var topFocus = $('#customize-info .customize-section-title'); 
     1001                topFocus.focus(); 
     1002                setTimeout(function () { 
     1003                        topFocus.focus(); 
     1004                }, 200); 
     1005 
    9511006        }); 
    9521007 
    953 })( wp, jQuery ); 
    954  No newline at end of file 
     1008})( wp, jQuery ); 
  • wp-admin/css/wp-admin.css

     
    54645464        height: 100%; 
    54655465} 
    54665466 
    5467 .wp-full-overlay-sidebar .wp-full-overlay-header, 
    54685467.wp-full-overlay-sidebar .wp-full-overlay-footer { 
    54695468        position: absolute; 
    54705469        left: 0; 
    54715470        right: 0; 
    5472         height: 45px; 
     5471        height: 80px; 
    54735472        padding: 0 20px; 
    54745473        line-height: 45px; 
    54755474        z-index: 10; 
    54765475        margin: 0; 
    54775476} 
    54785477 
    5479 .wp-full-overlay-sidebar .wp-full-overlay-header { 
    5480         top: 0; 
    5481         border-top: 0; 
    5482         border-bottom: 1px solid #fff; 
    5483         box-shadow: inset 0 -1px 0 0px #dfdfdf; 
    5484 } 
    5485  
    54865478.wp-full-overlay-sidebar .wp-full-overlay-footer { 
    54875479        bottom: 0; 
    54885480        border-bottom: 0; 
     
    54925484 
    54935485.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { 
    54945486        position: absolute; 
    5495         top: 45px; 
    5496         bottom: 45px; 
     5487        top: 0; 
     5488        bottom: 80px; 
    54975489        left: 0; 
    54985490        right: 0; 
    54995491        overflow: auto; 
  • 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; 
     
    155166        margin: 0; 
    156167} 
    157168 
     169#customize-footer-actions .button-primary, 
    158170#customize-header-actions .button-primary { 
    159171        float: right; 
    160172        margin-top: 10px; 
    161173} 
    162174 
     175#customize-footer-actions .spinner, 
    163176#customize-header-actions .spinner { 
    164177        margin-top: 16px; 
    165178        margin-right: 4px; 
    166179} 
    167180 
     181.saving #customize-footer-actions .spinner, 
    168182.saving #customize-header-actions .spinner { 
    169183        display: block; 
    170184}