WordPress.org

Make WordPress Core

Changeset 39451


Ignore:
Timestamp:
12/03/2016 03:40:13 AM (3 years ago)
Author:
helen
Message:

Twenty Seventeen: Improve ARIA for the nav menu.

The onResizeARIA() function was not very useful and buggy.

props afercia.
fixes #39029, #39026.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/js/navigation.js

    r39419 r39451  
    1818        container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
    1919
    20         // Toggle buttons and submenu items with active children menu items.
    21         container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
     20        // Set the active submenu dropdown toggle button initial state.
     21        container.find( '.current-menu-ancestor > button' )
     22            .addClass( 'toggled-on' )
     23            .attr( 'aria-expanded', 'true' )
     24            .find( '.screen-reader-text' )
     25            .text( twentyseventeenScreenReaderText.collapse );
     26        // Set the active submenu initial state.
    2227        container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
    2328
     
    5156        }
    5257
    53         // Add an initial values for the attribute.
    54         menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
     58        // Add an initial value for the attribute.
     59        menuToggle.attr( 'aria-expanded', 'false' );
    5560
    5661        menuToggle.on( 'click.twentyseventeen', function() {
    57             $( siteNavContain ).toggleClass( 'toggled-on' );
     62            siteNavContain.toggleClass( 'toggled-on' );
    5863
    59             $( this )
    60                 .add( siteNavigation )
    61                 .attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
     64            $( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
    6265        });
    6366    })();
     
    104107        });
    105108    })();
    106 
    107     // Add the default ARIA attributes for the menu toggle and the navigations.
    108     function onResizeARIA() {
    109         if ( 'block' === $( '.menu-toggle' ).css( 'display' ) ) {
    110 
    111             if ( menuToggle.hasClass( 'toggled-on' ) ) {
    112                 menuToggle.attr( 'aria-expanded', 'true' );
    113             } else {
    114                 menuToggle.attr( 'aria-expanded', 'false' );
    115             }
    116 
    117             if ( siteNavigation.closest( '.main-navigation' ).hasClass( 'toggled-on' ) ) {
    118                 siteNavigation.attr( 'aria-expanded', 'true' );
    119             } else {
    120                 siteNavigation.attr( 'aria-expanded', 'false' );
    121             }
    122         } else {
    123             menuToggle.removeAttr( 'aria-expanded' );
    124             siteNavigation.removeAttr( 'aria-expanded' );
    125             menuToggle.removeAttr( 'aria-controls' );
    126         }
    127     }
    128 
    129     $( document ).ready( function() {
    130         $( window ).on( 'load.twentyseventeen', onResizeARIA );
    131         $( window ).on( 'resize.twentyseventeen', onResizeARIA );
    132     });
    133 
    134109})( jQuery );
Note: See TracChangeset for help on using the changeset viewer.