Changeset 26843

Timestamp:

12/09/2013 08:38:00 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: match screen-reader-text accessibility styles a bit better with core, to avoid a jump when you move through the links, and to avoid a horizontal scroll at certain viewport widths. Also fix JS focus by specifying the first match object. Closes #25592.

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• functions.php (modified) (1 diff)
• js/functions.js (modified) (1 diff)
• rtl.css (modified) (1 diff)
• 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' ), '20131205', true );
+    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

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

@@ -64 +64 @@
             wrapper.toggleClass( 'hide' );
 
-            if ( that.is( '.active' ) || $( '.screen-reader-text' ) === event.target ) {
+            if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
                 wrapper.find( '.search-field' ).focus();
             }

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

@@ -99 +99 @@
 
 .search-toggle .screen-reader-text {
-    right: auto;
-    left: 0;
+    right: 5px; /* Avoid a horizontal scrollbar when the site has a long menu */
+    left: auto;
 }
 

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

@@ -879 +879 @@
 }
 
+.search-toggle .screen-reader-text {
+    left: 5px; /* Avoid a horizontal scrollbar when the site has a long menu */
+}
+
 .search-box-wrapper {
     -webkit-box-sizing: border-box;