Ticket #21283: 21283.diff

wp-includes/class-wp-customize-section.php

@@ -80 +80 @@
         protected function render() {
                 ?>
                 <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
-                        <h3 class="customize-section-title" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
+                        <h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
                         <ul class="customize-section-content">
                                 <?php
                                 foreach ( $this->controls as $control )

wp-admin/customize.php

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

wp-admin/js/customize-controls.js

@@ -824 +824 @@
                 }());
 
                 // Temporary accordion code.
-                $('.customize-section-title').click( function( event ) {
+                var accordianFrozen = false;
+                $('.customize-section-title').bind('click focus', function( event ) {
                         var clicked = $( this ).parents( '.customize-section' );
 
-                        if ( clicked.hasClass('cannot-expand') )
+                        if ( clicked.hasClass('cannot-expand') || accordianFrozen )
                                 return;
+                        
+                        // Don't want to fire focus and click at same time
+                        accordianFrozen = true;
+                        setTimeout(function () {
+                                accordianFrozen = false;
+                        }, 400);
+                        
+                        // Scroll up if on #customize-section-title_tagline
+                        if ('customize-section-title_tagline' === clicked.attr('id'))
+                                $('.wp-full-overlay-sidebar-content').scrollTop(0);
 
                         $( '.customize-section' ).not( clicked ).removeClass( 'open' );
                         clicked.toggleClass( 'open' );
@@ -839 +850 @@
                 $('#save').click( function( event ) {
                         previewer.save();
                         event.preventDefault();
+                }).keydown( function( event ) {
+                        if ( 13 === event.which ) // enter
+                                previewer.save();
+                        event.preventDefault();
                 });
+                
+                $('.back').keydown( function( event ) {
+                        if ( 9 === event.which ) // tab
+                                return;
+                        var thisHref = $(this).attr('href');
+                        if ( 13 === event.which ) // enter
+                                window.location = thisHref;
+                        event.preventDefault();
+                });
 
                 $('.collapse-sidebar').click( function( event ) {
                         overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
@@ -958 +982 @@
                 });
 
                 api.trigger( 'ready' );
+                
+                // Make sure left column gets focus
+                $('.back').focus();
+                setTimeout(function () {
+                        $('.back').focus();
+                }, 800);
+
         });
 
 })( wp, jQuery );
+ No newline at end of file

wp-admin/css/customize-controls.css

@@ -67 +67 @@
 
 .control-section:hover .customize-section-title,
 .control-section .customize-section-title:hover,
-.control-section.open .customize-section-title {
+.control-section.open .customize-section-title,
+.customize-section-title:focus {
         color: #fff;
         text-shadow: 0 -1px 0 #333;
         background: #808080;
@@ -126 +127 @@
         color: #999;
 }
 
+#customize-info .customize-section-title:focus .preview-notice {
+        color: #ccc;
+        text-shadow: 0 -1px 0 #333;
+}
+
 #customize-info .theme-name {
         font-size: 20px;
         font-weight: 200;
@@ -135 +141 @@
         text-shadow: 0 1px 0 #fff;
 }
 
+#customize-info .customize-section-title:focus .theme-name {
+        color: #fff;
+        text-shadow: 0 -1px 0 #333;
+}
+
 #customize-info .theme-screenshot {
         width: 258px;
         border: 1px solid #ccc;