mirror of
https://github.com/WordPress/WordPress.git
synced 2024-08-28 16:49:40 +02:00
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
149 lines
3.5 KiB
PHP
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 -->
|