Changeset 44426

Timestamp:

01/07/2019 03:59:04 PM (6 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)
• src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js (modified) (3 diffs)
• src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss (modified) (2 diffs)
• src/wp-content/themes/twentynineteen/style-rtl.css (modified) (3 diffs)
• src/wp-content/themes/twentynineteen/style.css (modified) (3 diffs)
• src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php (modified) (1 diff)

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 .= '<>';
+        $nav_menu .= '<span class="s>';
         $nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );
-        $nav_menu .= '</span>';
+        $nav_menu .= '</n>';
         $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 .= '<n class="menu-item-link-return">';
         $nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
         $nav_menu .= esc_html__( 'Back', 'twentynineteen' );
-        $nav_menu .= '</span>';
+        $nav_menu .= '</n>';
         $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',
+            '<n class="menu-item-link-return" tabindex="-1">%s',
             twentynineteen_get_icon_svg( 'chevron_left', 24 )
         );
 
-        // replace opening <a> with <span>
+        // replace opening <a> with <n>
         $output = preg_replace(
             '/<a\s.*?>/',
@@ -282 +282 @@
         );
 
-        // replace closing </a> with </span>
+        // replace closing </a> with </n>
         $output = preg_replace(
             '#</a>#i',
-            '</span>',
+            '</n>',
             $output,
             1 // Limit.
@@ -296 +296 @@
 
         $output .= sprintf(
-            '<span class="submenu-expand" tabindex="-1">%s</span>',
+            '<n>',
             $icon
         );

branches/5.0/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js

@@ -113 +113 @@
 
         // Update aria-expanded state
-        toggleAriaExpandedState( currentSubMenu.previousSibling );
+        toggleAriaExpandedState( currentSubMenu );
     }
 
@@ -231 +231 @@
 
             // Check if child of .submenu-expand is touched
-            } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) && getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
+            } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
+                                getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
                 openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
 
@@ -255 +256 @@
                 // Prevent default mouse events
                 event.preventDefault();
+
             } else if (
                 event.target.matches('.submenu-expand') ||

branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

@@ -12 +12 @@
     > div {
         display: inline;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     }
 
@@ -183 +216 @@
             }
 
+
+
+
+
+
+
+
             > a:empty {
                 display: none;

branches/5.0/src/wp-content/themes/twentynineteen/style-rtl.css

@@ -1028 +1028 @@
   display: block;
   margin-top: 0.25rem;
+
   /*
      * Sub-menu styles
@@ -1050 +1051 @@
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 .main-navigation .main-menu {
   display: inline-block;
@@ -1205 +1236 @@
 .main-navigation .sub-menu > li > .menu-item-link-return:focus:after {
   background: #005177;
+
+
+
+
+
+
+
 }
 

branches/5.0/src/wp-content/themes/twentynineteen/style.css

@@ -1028 +1028 @@
   display: block;
   margin-top: 0.25rem;
+
   /*
      * Sub-menu styles
@@ -1050 +1051 @@
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 .main-navigation .main-menu {
   display: inline-block;
@@ -1205 +1236 @@
 .main-navigation .sub-menu > li > .menu-item-link-return:focus:after {
   background: #005177;
+
+
+
+
+
+
+
 }
 

branches/5.0/src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php

@@ -37 +37 @@
                     'theme_location' => 'menu-1',
                     'menu_class'     => 'main-menu',
-                    'items_wrap'     => '<ul id="%1$s" class="%2$s" tabindex="0">%3$s</ul>',
+                    'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                 )
             );