WordPress.org

Making WordPress.org

Changeset 5871


Ignore:
Timestamp:
09/04/2017 03:21:47 AM (3 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:
3 edited

Legend:

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

    r5823 r5871  
    4747
    4848    // Cacheing hack
    49     wp_enqueue_style( 'wporg-breathe', get_stylesheet_uri(), array( 'p2-breathe' ), '20170717' );
     49    wp_enqueue_style( 'wporg-breathe', get_stylesheet_uri(), array( 'p2-breathe' ), '20170904' );
    5050}
    5151add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\styles', 11 );
    5252
    5353function scripts() {
    54     wp_enqueue_script( 'wporg-breathe-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), '20170113' );
     54    wp_enqueue_script( 'wporg-breathe-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), '20170904' );
    5555}
    5656add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts', 11 );
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/js/chapters.js

    r4652 r5871  
    55    jQuery( '.menu-table-of-contents-container > ul > .menu-item-has-children > a' )
    66        .wrap( '<div class="expandable"></div>' )
    7         .before( '<span class="dashicons dashicons-arrow-down-alt2"></span>' );
     7        .after( '<button class="dashicons dashicons-arrow-down-alt2" aria-expanded="false"></button>' );
    88
    99    // Invisibly open all of the submenus
     
    1818    // Or if wrapped in a div.expandable
    1919    jQuery( '.menu-item-has-children > div > .dashicons' ).click( function() {
     20        var menuToggle = jQuery( this ).closest( '.menu-item-has-children' );
     21
    2022        jQuery( this ).parent().siblings( '.children' ).slideToggle();
    21         jQuery( this ).closest( '.menu-item-has-children' ).toggleClass( 'open' );
     23
     24        menuToggle.toggleClass( 'open' );
     25        menuToggle.attr( 'aria-expanded', menuToggle.hasClass( 'open' ) );
    2226    } );
    2327} );
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css

    r5682 r5871  
    11071107  color: #0073aa;
    11081108  background-color: #fafafa;
     1109  border: 0;
    11091110  border-left: 1px solid rgba(0,0,0,0.05);
    1110 }
    1111 .menu-table-of-contents-container ul li .dashicons:hover {
     1111  border-radius: 0;
     1112  box-shadow: none;
     1113  -webkit-appearance: none;
     1114}
     1115.menu-table-of-contents-container ul li .dashicons:hover,
     1116.menu-table-of-contents-container ul li .dashicons:focus {
    11121117  color: #fff;
    11131118  background-color: #0073aa;
     
    11181123  border-left: none;
    11191124}
    1120 .menu-table-of-contents-container .open .expandable .dashicons {
     1125.menu-table-of-contents-container .open .expandable .dashicons:not(:focus) {
    11211126    background: #fff;
    11221127    color: #0073aa;
     
    11281133  text-decoration: none;
    11291134}
    1130 .menu-table-of-contents-container ul a:hover {
     1135.menu-table-of-contents-container ul a:hover,
     1136.menu-table-of-contents-container ul a:focus {
    11311137  color: #fff;
    11321138  background-color: #0073aa;
     
    11471153}
    11481154
    1149 .menu-table-of-contents-container > ul > li.open > div > a {
     1155.menu-table-of-contents-container > ul > li.open > div > a:not(:focus) {
    11501156  color: #0073aa;
    11511157}
Note: See TracChangeset for help on using the changeset viewer.