Changeset 30013

Timestamp:

10/24/2014 03:14:02 PM (12 years ago)

Author:

iandstewart

Message:

Twenty Fifteen: valid HTML for accessible child page menu expanding and collapsing -- now with even better accessiblity.

Props afercia, davidakennedy, iamtakashi, fixes #30083.

Location:

trunk/src/wp-content/themes/twentyfifteen

Files:

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

trunk/src/wp-content/themes/twentyfifteen/css/ie.css

@@ -131 +131 @@
     line-height: 1.8462;
     margin-top: 0;
-}
-
-.dropdown-toggle {
-    margin-top: -21px;
 }
 

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

@@ -220 +220 @@
     wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141010', true );
     wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
-        'expand'   => '<span class="screen-reader-text">' . esc_html__( 'Expand', 'twentyfifteen' ) . '</span>',
-        'collapse' => '<span class="screen-reader-text">' . esc_html__( 'Collapse', 'twentyfifteen' ) . '</span>',
+        'expand'   => '<span class="screen-reader-text">' . esc_html__( 'expand child menu', 'twentyfifteen' ) . '</span>',
+        'collapse' => '<span class="screen-reader-text">' . esc_html__( 'collapse child menu', 'twentyfifteen' ) . '</span>',
     ) );
 }

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

@@ -10 +10 @@
 
     // Add dropdown toggle that display child menu items.
-    $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).append( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
+    $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
 
     $( '.dropdown-toggle' ).click( function( e ) {
@@ -16 +16 @@
         e.preventDefault();
         _this.toggleClass( 'toggle-on' );
-        _this.parent().next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
+        _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
         _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
         _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );

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

@@ -693 +693 @@
     box-sizing: content-box;
     content: "";
-    display: block;
-    font-size: 15px;
-    font-size: 1.5rem;
     height: 42px;
     padding: 0;
     position: absolute;
-    top: 50%;
+    text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
+    top: 3px;
     right: 0;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
     width: 42px;
 }
@@ -2553 +2548 @@
 
     .main-navigation ul {
-        border-top: 1px solid #eaeaea;
         border-top: 1px solid rgba(51, 51, 51, 0.1);
-        border-bottom: 1px solid #eaeaea;
         border-bottom: 1px solid rgba(51, 51, 51, 0.1);
     }
@@ -5079 +5072 @@
     .dropdown-toggle {
         height: 32px;
+        top: 4px;
         width: 32px;
     }