sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Seventeen: Improve ARIA for the nav menu.

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

props afercia.
fixes #39029, #39026.


git-svn-id: https://develop.svn.wordpress.org/trunk@39451 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2016-12-03 03:40:13 +00:00
parent 68c8dba269
commit af97f9d16b
1 changed files with 11 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/wp-content/themes/twentyseventeen/assets/js/navigation.js
View File

@ -17,8 +17,13 @@
container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle ); container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
// Toggle buttons and submenu items with active children menu items. // Set the active submenu dropdown toggle button initial state.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' ); container.find( '.current-menu-ancestor > button' )
.addClass( 'toggled-on' )
.attr( 'aria-expanded', 'true' )
.find( '.screen-reader-text' )
.text( twentyseventeenScreenReaderText.collapse );
// Set the active submenu initial state.
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' ); container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
container.find( '.dropdown-toggle' ).click( function( e ) { container.find( '.dropdown-toggle' ).click( function( e ) {
@ -50,15 +55,13 @@
return; return;
} }
// Add an initial values for the attribute. // Add an initial value for the attribute.
menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' ); menuToggle.attr( 'aria-expanded', 'false' );
menuToggle.on( 'click.twentyseventeen', function() { menuToggle.on( 'click.twentyseventeen', function() {
$( siteNavContain ).toggleClass( 'toggled-on' ); siteNavContain.toggleClass( 'toggled-on' );
$( this ) $( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
.add( siteNavigation )
.attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
}); });
})(); })();
@ -103,32 +106,4 @@
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' ); $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
}); });
})(); })();
// Add the default ARIA attributes for the menu toggle and the navigations.
function onResizeARIA() {
if ( 'block' === $( '.menu-toggle' ).css( 'display' ) ) {
if ( menuToggle.hasClass( 'toggled-on' ) ) {
menuToggle.attr( 'aria-expanded', 'true' );
} else {
menuToggle.attr( 'aria-expanded', 'false' );
}
if ( siteNavigation.closest( '.main-navigation' ).hasClass( 'toggled-on' ) ) {
siteNavigation.attr( 'aria-expanded', 'true' );
} else {
siteNavigation.attr( 'aria-expanded', 'false' );
}
} else {
menuToggle.removeAttr( 'aria-expanded' );
siteNavigation.removeAttr( 'aria-expanded' );
menuToggle.removeAttr( 'aria-controls' );
}
}
$( document ).ready( function() {
$( window ).on( 'load.twentyseventeen', onResizeARIA );
$( window ).on( 'resize.twentyseventeen', onResizeARIA );
});
})( jQuery ); })( jQuery );