Ticket #31204: 31204.diff

src/wp-admin/css/customize-controls.css

@@ -2 +2 @@
         overflow: hidden;
 }
 
+.wp-customizer .screen-reader-shortcut:focus {
+        top: 6px;
+}
+
 #customize-controls a {
         text-decoration: none;
 }

src/wp-admin/customize.php

@@ -139 +139 @@
 
                 <div id="widgets-right"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
                 <div class="wp-full-overlay-sidebar-content" tabindex="-1">
+                        <a tabindex="0" href="#customize-preview" class="screen-reader-shortcut preview-shortcut"><?php _e( 'Skip to site preview' ); ?></a>
                         <div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
                                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Customizer Options' ); ?>" tabindex="0">
                                         <span class="preview-notice"><?php
@@ -174 +175 @@
                 </div>
                 </div>
 
+                <a tabindex="0" href="#customize-preview" class="screen-reader-shortcut preview-shortcut"><?php _e( 'Skip to site preview' ); ?></a>
                 <div id="customize-footer-actions" class="wp-full-overlay-footer">
                         <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
                                 <span class="collapse-sidebar-arrow"></span>

src/wp-admin/js/customize-controls.js

@@ -2239 +2239 @@
                         event.preventDefault();
                 });
 
+                $( '.preview-shortcut' ).on( 'click keydown', function( event ) {
+                        if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                return;
+                        }
+
+                        var test = $( '#customize-preview' ).contents().find( ':focusable' ).first();
+                        test.focus();
+                        event.preventDefault();
+                });
+
                 // Bind site title display to the corresponding field.
                 if ( title.length ) {
                         $( '#customize-control-blogname input' ).on( 'input', function() {