Changeset 26691

Timestamp:

12/05/2013 09:27:20 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: fix too-wide search "jump to" link and provide focus on the search input when it's used. Closes #25592.

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• functions.php (modified) (1 diff)
• js/functions.js (modified) (2 diffs)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyfourteen/functions.php

@@ -263 +263 @@
     }
 
-    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131203', true );
+    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131205', true );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

trunk/src/wp-content/themes/twentyfourteen/js/functions.js

@@ -57 +57 @@
     $( function() {
         // Search toggle.
-        $( '.search-toggle' ).on( 'click.twentyfourteen', function() {
+        $( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
             var that    = $( this ),
                 wrapper = $( '.search-box-wrapper' );
@@ -64 +64 @@
             wrapper.toggleClass( 'hide' );
 
-            if ( that.is( '.active' ) ) {
+            if ( that.is( '.active' ) || $( '.screen-reader-text' ) === event.target ) {
                 wrapper.find( '.search-field' ).focus();
             }

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -904 +904 @@
 }
 
-.search-toggle .screen-reader-text {
-    right: 0; /* This makes sure a horizontal scrollbar won't appear */
-}
-
 
 /**