Make WordPress Core

Changeset 31644


Ignore:
Timestamp:
03/06/2015 05:33:38 PM (9 years ago)
Author:
lancewillett
Message:

Twenty Fifteen: add ARIA attributes to menu toggle.

See #31527, props davidakennedy, lance.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfifteen/js/functions.js

    r31214 r31644  
    99    var $body, $window, $sidebar, adminbarOffset, top = false,
    1010        bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
    11         topOffset = 0, bodyHeight, sidebarHeight, resizeTimer;
     11        topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
     12        secondary, button;
    1213
    1314    // Add dropdown toggle that display child menu items.
     
    2728    } );
    2829
     30    secondary = $( '#secondary' );
     31    button = $( '.site-branding' ).find( '.secondary-toggle' );
     32
    2933    // Enable menu toggle for small screens.
    3034    ( function() {
    31         var secondary = $( '#secondary' ), button, menu, widgets, social;
    32         if ( ! secondary ) {
    33             return;
    34         }
    35 
    36         button = $( '.site-branding' ).find( '.secondary-toggle' );
    37         if ( ! button ) {
     35        var menu, widgets, social;
     36        if ( ! secondary || ! button ) {
    3837            return;
    3938        }
     
    5251            secondary.trigger( 'resize' );
    5352            $( this ).toggleClass( 'toggled-on' );
     53            if ( $( this, secondary ).hasClass( 'toggled-on' ) ) {
     54                $( this ).attr( 'aria-expanded', 'true' );
     55                secondary.attr( 'aria-expanded', 'true' );
     56            } else {
     57                $( this ).attr( 'aria-expanded', 'false' );
     58                secondary.attr( 'aria-expanded', 'false' );
     59            }
    5460        } );
    5561    } )();
     62
     63    // Add or remove ARIA attributes.
     64    function onResizeARIA() {
     65        if ( 955 > $window.width() ) {
     66            button.attr( 'aria-expanded', 'false' );
     67            secondary.attr( 'aria-expanded', 'false' );
     68            button.attr( 'aria-controls', 'secondary' );
     69        } else {
     70            button.removeAttr( 'aria-expanded' );
     71            secondary.removeAttr( 'aria-expanded' );
     72            button.removeAttr( 'aria-controls' );
     73        }
     74    }
    5675
    5776    // Sidebar scrolling.
     
    120139        $window
    121140            .on( 'scroll.twentyfifteen', scroll )
     141            .on( 'load.twentyfifteen', onResizeARIA )
    122142            .on( 'resize.twentyfifteen', function() {
    123143                clearTimeout( resizeTimer );
    124144                resizeTimer = setTimeout( resizeAndScroll, 500 );
     145                onResizeARIA();
    125146            } );
    126         $sidebar.on( 'click keydown', 'button', resizeAndScroll );
     147        $sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
    127148
    128149        resizeAndScroll();
Note: See TracChangeset for help on using the changeset viewer.