WordPress/wp-content/themes/twentytwenty/template-parts/modal-menu.php
joedolson a3a61c5a3e General: Remove role="navigation" from nav elements.
Role="navigation" was required for assistive technology to recognize HTML5 element's native ARIA roles while HTML5 and ARIA were being introduced. With the deprecation of IE11, the role attribute is only required when mapping elements that don't have native role.

Props costdev, mukesh27.
Fixes #54054.
Built from https://develop.svn.wordpress.org/trunk@51967


git-svn-id: http://core.svn.wordpress.org/trunk@51556 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-01 21:47:13 +00:00

149 lines
3.5 KiB
PHP

<?php
/**
* Displays the menu icon and modal
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0
*/
?>
<div class="menu-modal cover-modal header-footer-group" data-modal-target-string=".menu-modal">
<div class="menu-modal-inner modal-inner">
<div class="menu-wrapper section-inner">
<div class="menu-top">
<button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal">
<span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span>
<?php twentytwenty_the_theme_svg( 'cross' ); ?>
</button><!-- .nav-toggle -->
<?php
$mobile_menu_location = '';
// If the mobile menu location is not set, use the primary and expanded locations as fallbacks, in that order.
if ( has_nav_menu( 'mobile' ) ) {
$mobile_menu_location = 'mobile';
} elseif ( has_nav_menu( 'primary' ) ) {
$mobile_menu_location = 'primary';
} elseif ( has_nav_menu( 'expanded' ) ) {
$mobile_menu_location = 'expanded';
}
if ( has_nav_menu( 'expanded' ) ) {
$expanded_nav_classes = '';
if ( 'expanded' === $mobile_menu_location ) {
$expanded_nav_classes .= ' mobile-menu';
}
?>
<nav class="expanded-menu<?php echo esc_attr( $expanded_nav_classes ); ?>" aria-label="<?php echo esc_attr_x( 'Expanded', 'menu', 'twentytwenty' ); ?>">
<ul class="modal-menu reset-list-style">
<?php
if ( has_nav_menu( 'expanded' ) ) {
wp_nav_menu(
array(
'container' => '',
'items_wrap' => '%3$s',
'show_toggles' => true,
'theme_location' => 'expanded',
)
);
}
?>
</ul>
</nav>
<?php
}
if ( 'expanded' !== $mobile_menu_location ) {
?>
<nav class="mobile-menu" aria-label="<?php echo esc_attr_x( 'Mobile', 'menu', 'twentytwenty' ); ?>">
<ul class="modal-menu reset-list-style">
<?php
if ( $mobile_menu_location ) {
wp_nav_menu(
array(
'container' => '',
'items_wrap' => '%3$s',
'show_toggles' => true,
'theme_location' => $mobile_menu_location,
)
);
} else {
wp_list_pages(
array(
'match_menu_classes' => true,
'show_toggles' => true,
'title_li' => false,
'walker' => new TwentyTwenty_Walker_Page(),
)
);
}
?>
</ul>
</nav>
<?php
}
?>
</div><!-- .menu-top -->
<div class="menu-bottom">
<?php if ( has_nav_menu( 'social' ) ) { ?>
<nav aria-label="<?php esc_attr_e( 'Expanded Social links', 'twentytwenty' ); ?>">
<ul class="social-menu reset-list-style social-icons fill-children-current-color">
<?php
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => '',
'container_class' => '',
'items_wrap' => '%3$s',
'menu_id' => '',
'menu_class' => '',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'fallback_cb' => '',
)
);
?>
</ul>
</nav><!-- .social-menu -->
<?php } ?>
</div><!-- .menu-bottom -->
</div><!-- .menu-wrapper -->
</div><!-- .menu-modal-inner -->
</div><!-- .menu-modal -->