Changeset 44426 for branches/5.0/src/wp-content/themes/twentynineteen/inc/template-functions.php

Timestamp:

01/07/2019 03:59:04 PM (8 years ago)

Author:

SergeyBiryukov

Message:

Twenty Nineteen: Improve menu semantics and keyboard navigation.

The menu's original markup included some non-semantic tags and an unnecessary tabindex attribute that made it difficult to navigate via keyboard.

Props allancole, anevins, kjellr.
Merges [44376] to the 5.0 branch.
Fixes #45713.

Location:

branches/5.0

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentynineteen/inc/template-functions.php (modified) (4 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/inc/template-functions.php

@@ -204 +204 @@
 
                 $nav_menu .= '<div class="main-menu-more">';
-                $nav_menu .= '<ul class="main-menu" tabindex="0">';
+                $nav_menu .= '<ul class="main-menu">';
                 $nav_menu .= '<li class="menu-item menu-item-has-children">';
-                $nav_menu .= '<a href="#" class="screen-reader-text" aria-label="More" aria-haspopup="true" aria-expanded="false">' . esc_html__( 'More', 'twentynineteen' ) . '</a>';
-                $nav_menu .= '<span class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1">';
+                $nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
+                $nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
                 $nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );
-                $nav_menu .= '</span>';
+                $nav_menu .= '</button>';
                 $nav_menu .= '<ul class="sub-menu hidden-links">';
                 $nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
-                $nav_menu .= '<span class="menu-item-link-return">';
+                $nav_menu .= '<button class="menu-item-link-return">';
                 $nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
                 $nav_menu .= esc_html__( 'Back', 'twentynineteen' );
-                $nav_menu .= '</span>';
+                $nav_menu .= '</button>';
                 $nav_menu .= '</li>';
                 $nav_menu .= '</ul>';
@@ -270 +270 @@
                 // @todo Only do this for nested submenus? If on a first-level submenu, then really the link could be "#" since the desire is to remove the target entirely.
                 $link = sprintf(
-                        '<span class="menu-item-link-return" tabindex="-1">%s',
+                        '<button class="menu-item-link-return" tabindex="-1">%s',
                         twentynineteen_get_icon_svg( 'chevron_left', 24 )
                 );
 
-                // replace opening <a> with <span>
+                // replace opening <a> with <button>
                 $output = preg_replace(
                         '/<a\s.*?>/',
@@ -282 +282 @@
                 );
 
-                // replace closing </a> with </span>
+                // replace closing </a> with </button>
                 $output = preg_replace(
                         '#</a>#i',
-                        '</span>',
+                        '</button>',
                         $output,
                         1 // Limit.
@@ -296 +296 @@
 
                 $output .= sprintf(
-                        '<span class="submenu-expand" tabindex="-1">%s</span>',
+                        '<button class="submenu-expand" tabindex="-1">%s</button>',
                         $icon
                 );