WordPress.org
Get WordPress

Make WordPress Core

Changeset 44376


Ignore:
Timestamp:
12/31/2018 05:48:08 PM (6 years ago)
Author:
laurelfulford
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.
Fixes #45713.

Location:
trunk/src/wp-content/themes/twentynineteen
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r44302 r44376  
    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        );

  • trunk/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js

    r44358 r44376  
    113113
    114114        // Update aria-expanded state
    115         toggleAriaExpandedState( currentSubMenu.previousSibling );
     115        toggleAriaExpandedState( currentSubMenu );
    116116    }
    117117
    … …  
    231231
    232232            // Check if child of .submenu-expand is touched
    233             } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) && getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
     233            } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
     234                                getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
    234235                openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
    235236
    … …  
    255256                // Prevent default mouse events
    256257                event.preventDefault();
     258
    257259            } else if (
    258260                event.target.matches('.submenu-expand') ||

  • trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

    r44368 r44376  
    1212    > div {
    1313        display: inline;
     14    }
     15
     16    /* Un-style buttons */
     17    button {
     18        display: inline-block;
     19        border: none;
     20        padding: 0;
     21        margin: 0;
     22        font-family: $font__heading;
     23        font-weight: 700;
     24        line-height: $font__line-height-heading;
     25        text-decoration: none;
     26        background: transparent;
     27        color: inherit;
     28        cursor: pointer;
     29        transition: background 250ms ease-in-out,
     30                    transform 150ms ease;
     31        -webkit-appearance: none;
     32        -moz-appearance: none;
     33
     34        &:hover,
     35        &:focus {
     36            background: transparent;
     37        }
     38
     39        &:focus {
     40            outline: 1px solid transparent;
     41            outline-offset: -4px;
     42        }
     43
     44        &:active {
     45            transform: scale(0.99);
     46        }
    1447    }
    1548
    … …  
    184217            }
    185218
     219            > .menu-item-link-return {
     220                width: 100%;
     221                font-size: $font__size_base;
     222                font-weight: normal;
     223                text-align: left;
     224            }
     225
    186226            > a:empty {
    187227                display: none;

  • trunk/src/wp-content/themes/twentynineteen/style-rtl.css

    r44371 r44376  
    10281028  display: block;
    10291029  margin-top: 0.25rem;
     1030  /* Un-style buttons */
    10301031  /*
    10311032     * Sub-menu styles
    … …  
    10501051}
    10511052
     1053.main-navigation button {
     1054  display: inline-block;
     1055  border: none;
     1056  padding: 0;
     1057  margin: 0;
     1058  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1059  font-weight: 700;
     1060  line-height: 1.2;
     1061  text-decoration: none;
     1062  background: transparent;
     1063  color: inherit;
     1064  cursor: pointer;
     1065  transition: background 250ms ease-in-out, transform 150ms ease;
     1066  -webkit-appearance: none;
     1067  -moz-appearance: none;
     1068}
     1069
     1070.main-navigation button:hover, .main-navigation button:focus {
     1071  background: transparent;
     1072}
     1073
     1074.main-navigation button:focus {
     1075  outline: 1px solid transparent;
     1076  outline-offset: -4px;
     1077}
     1078
     1079.main-navigation button:active {
     1080  transform: scale(0.99);
     1081}
     1082
    10521083.main-navigation .main-menu {
    10531084  display: inline-block;
    … …  
    12061237.main-navigation .sub-menu > li > .menu-item-link-return:focus:after {
    12071238  background: #005177;
     1239}
     1240
     1241.main-navigation .sub-menu > li > .menu-item-link-return {
     1242  width: 100%;
     1243  font-size: 22px;
     1244  font-weight: normal;
     1245  text-align: right;
    12081246}
    12091247

  • trunk/src/wp-content/themes/twentynineteen/style.css

    r44371 r44376  
    10281028  display: block;
    10291029  margin-top: 0.25rem;
     1030  /* Un-style buttons */
    10301031  /*
    10311032     * Sub-menu styles
    … …  
    10501051}
    10511052
     1053.main-navigation button {
     1054  display: inline-block;
     1055  border: none;
     1056  padding: 0;
     1057  margin: 0;
     1058  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1059  font-weight: 700;
     1060  line-height: 1.2;
     1061  text-decoration: none;
     1062  background: transparent;
     1063  color: inherit;
     1064  cursor: pointer;
     1065  transition: background 250ms ease-in-out, transform 150ms ease;
     1066  -webkit-appearance: none;
     1067  -moz-appearance: none;
     1068}
     1069
     1070.main-navigation button:hover, .main-navigation button:focus {
     1071  background: transparent;
     1072}
     1073
     1074.main-navigation button:focus {
     1075  outline: 1px solid transparent;
     1076  outline-offset: -4px;
     1077}
     1078
     1079.main-navigation button:active {
     1080  transform: scale(0.99);
     1081}
     1082
    10521083.main-navigation .main-menu {
    10531084  display: inline-block;
    … …  
    12061237.main-navigation .sub-menu > li > .menu-item-link-return:focus:after {
    12071238  background: #005177;
     1239}
     1240
     1241.main-navigation .sub-menu > li > .menu-item-link-return {
     1242  width: 100%;
     1243  font-size: 22px;
     1244  font-weight: normal;
     1245  text-align: left;
    12081246}
    12091247

  • trunk/src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php

    r44149 r44376  
    3737                    'theme_location' => 'menu-1',
    3838                    'menu_class'     => 'main-menu',
    39                     'items_wrap'     => '<ul id="%1$s" class="%2$s" tabindex="0">%3$s</ul>',
     39                    'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    4040                )
    4141            );
Note: See TracChangeset for help on using the changeset viewer.