Changeset 5871

Timestamp:

09/04/2017 03:21:47 AM (7 years ago)

Author:

SergeyBiryukov

Message:

Breathe: Make handbook Chapters menu accessible from keyboard, add screen reader feedback and visible focus style.

Props Kau-Boy.
Fixes #3048.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe

Files:

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

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/functions.php

@@ -47 +47 @@
 
     // Cacheing hack
-    wp_enqueue_style( 'wporg-breathe', get_stylesheet_uri(), array( 'p2-breathe' ), '20170717' );
+    wp_enqueue_style( 'wporg-breathe', get_stylesheet_uri(), array( 'p2-breathe' ), '20170904' );
 }
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\styles', 11 );
 
 function scripts() {
-    wp_enqueue_script( 'wporg-breathe-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), '20170113' );
+    wp_enqueue_script( 'wporg-breathe-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), '20170904' );
 }
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts', 11 );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/js/chapters.js

@@ -5 +5 @@
     jQuery( '.menu-table-of-contents-container > ul > .menu-item-has-children > a' )
         .wrap( '<div class="expandable"></div>' )
-        .before( '<span class="dashicons dashicons-arrow-down-alt2"></span>' );
+        .after( '<button class="dashicons dashicons-arrow-down-alt2" aria-expanded="false"></button>' );
 
     // Invisibly open all of the submenus
@@ -18 +18 @@
     // Or if wrapped in a div.expandable
     jQuery( '.menu-item-has-children > div > .dashicons' ).click( function() {
+        var menuToggle = jQuery( this ).closest( '.menu-item-has-children' );
+
         jQuery( this ).parent().siblings( '.children' ).slideToggle();
-        jQuery( this ).closest( '.menu-item-has-children' ).toggleClass( 'open' );
+
+        menuToggle.toggleClass( 'open' );
+        menuToggle.attr( 'aria-expanded', menuToggle.hasClass( 'open' ) );
     } );
 } );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css

@@ -1107 +1107 @@
   color: #0073aa;
   background-color: #fafafa;
+  border: 0;
   border-left: 1px solid rgba(0,0,0,0.05);
-}
-.menu-table-of-contents-container ul li .dashicons:hover {
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.menu-table-of-contents-container ul li .dashicons:hover,
+.menu-table-of-contents-container ul li .dashicons:focus {
   color: #fff;
   background-color: #0073aa;
@@ -1118 +1123 @@
   border-left: none;
 }
-.menu-table-of-contents-container .open .expandable .dashicons {
+.menu-table-of-contents-container .open .expandable .dashicons:not(:focus) {
     background: #fff;
     color: #0073aa;
@@ -1128 +1133 @@
   text-decoration: none;
 }
-.menu-table-of-contents-container ul a:hover {
+.menu-table-of-contents-container ul a:hover,
+.menu-table-of-contents-container ul a:focus {
   color: #fff;
   background-color: #0073aa;
@@ -1147 +1153 @@
 }
 
-.menu-table-of-contents-container > ul > li.open > div > a {
+.menu-table-of-contents-container > ul > li.open > div > a:not(:focus) {
   color: #0073aa;
 }