WordPress.org

Make WordPress Core


Ignore:
Timestamp:
01/07/2019 03:59:04 PM (3 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:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0

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

    r44193 r44426  
    204204
    205205        $nav_menu .= '<div class="main-menu-more">';
    206         $nav_menu .= '<ul class="main-menu" tabindex="0">';
     206        $nav_menu .= '<ul class="main-menu">';
    207207        $nav_menu .= '<li class="menu-item menu-item-has-children">';
    208         $nav_menu .= '<a href="#" class="screen-reader-text" aria-label="More" aria-haspopup="true" aria-expanded="false">' . esc_html__( 'More', 'twentynineteen' ) . '</a>';
    209         $nav_menu .= '<span class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1">';
     208        $nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
     209        $nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
    210210        $nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );
    211         $nav_menu .= '</span>';
     211        $nav_menu .= '</button>';
    212212        $nav_menu .= '<ul class="sub-menu hidden-links">';
    213213        $nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
    214         $nav_menu .= '<span class="menu-item-link-return">';
     214        $nav_menu .= '<button class="menu-item-link-return">';
    215215        $nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
    216216        $nav_menu .= esc_html__( 'Back', 'twentynineteen' );
    217         $nav_menu .= '</span>';
     217        $nav_menu .= '</button>';
    218218        $nav_menu .= '</li>';
    219219        $nav_menu .= '</ul>';
     
    270270        // @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.
    271271        $link = sprintf(
    272             '<span class="menu-item-link-return" tabindex="-1">%s',
     272            '<button class="menu-item-link-return" tabindex="-1">%s',
    273273            twentynineteen_get_icon_svg( 'chevron_left', 24 )
    274274        );
    275275
    276         // replace opening <a> with <span>
     276        // replace opening <a> with <button>
    277277        $output = preg_replace(
    278278            '/<a\s.*?>/',
     
    282282        );
    283283
    284         // replace closing </a> with </span>
     284        // replace closing </a> with </button>
    285285        $output = preg_replace(
    286286            '#</a>#i',
    287             '</span>',
     287            '</button>',
    288288            $output,
    289289            1 // Limit.
     
    296296
    297297        $output .= sprintf(
    298             '<span class="submenu-expand" tabindex="-1">%s</span>',
     298            '<button class="submenu-expand" tabindex="-1">%s</button>',
    299299            $icon
    300300        );
Note: See TracChangeset for help on using the changeset viewer.