WordPress.org
Get WordPress

Make WordPress Core

Ticket #45713: 45713.patch

File 45713.patch, 9.4 KB (added by kjellr, 8 years ago)

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

     
    203203        if ( 'menu-1' === $args->theme_location ) :
    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>';
    220220                $nav_menu .= '</li>';
    … …  
    269269                // Inject the keyboard_arrow_left SVG inside the parent nav menu item, and let the item link to the parent item.
    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.*?>/',
    279279                        $link,
    … …  
    281281                        1 // Limit.
    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.
    290290                );
    … …  
    295295                $icon = twentynineteen_get_icon_svg( 'keyboard_arrow_down', 24 );
    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                );
    301301        }

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

     
    112112                currentSubMenu.parentElement.lastElementChild.className += ' expanded-true';
    113113
    114114                // Update aria-expanded state
    115                 toggleAriaExpandedState( currentSubMenu.previousSibling );
     115                toggleAriaExpandedState( currentSubMenu );
    116116        }
    117117
    118118        /**
    … …  
    240240                                openSubMenu(event.target);
    241241
    242242                        // Check if child of .submenu-expand is touched
    243                         } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) && getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
     243                        } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
     244                                                                getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
    244245                                openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
    245246
    246247                        // Check if .menu-item-link-return is touched
    … …  
    264265                        if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) {
    265266                                // Prevent default mouse events
    266267                                event.preventDefault();
     268
    267269                        } else if (
    268270                                event.target.matches('.submenu-expand') ||
    269271                                null != getCurrentParent( event.target, '.submenu-expand' ) &&

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

     
    1313                display: inline;
    1414        }
    1515
     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                }
     47        }
     48
    1649        .main-menu {
    1750
    1851                display: inline-block;
    … …  
    182215                                }
    183216                        }
    184217
     218                        > .menu-item-link-return {
     219                                width: 100%;
     220                                font-size: $font__size_base;
     221                                font-weight: normal;
     222                                text-align: left;
     223                        }
     224
    185225                        > a:empty {
    186226                                display: none;
    187227                        }

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

     
    10271027.main-navigation {
    10281028  display: block;
    10291029  margin-top: 0.25rem;
     1030  /* Un-style buttons */
    10301031  /*
    10311032         * Sub-menu styles
    10321033         *
    … …  
    10491050  display: inline;
    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;
    10541085  margin: 0;
    … …  
    12061237  background: #005177;
    12071238}
    12081239
     1240.main-navigation .sub-menu > li > .menu-item-link-return {
     1241  width: 100%;
     1242  font-size: 22px;
     1243  font-weight: normal;
     1244  text-align: right;
     1245}
     1246
    12091247.main-navigation .sub-menu > li > a:empty {
    12101248  display: none;
    12111249}

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

     
    66Author URI: https://wordpress.org/
    77Description: A new Gutenberg-ready theme.
    88Requires at least: WordPress 4.9.6
    9 Version: 1.1
     9Version: 1.0
    1010License: GNU General Public License v2 or later
    1111License URI: LICENSE
    1212Text Domain: twentynineteen
    … …  
    10271027.main-navigation {
    10281028  display: block;
    10291029  margin-top: 0.25rem;
     1030  /* Un-style buttons */
    10301031  /*
    10311032         * Sub-menu styles
    10321033         *
    … …  
    10491050  display: inline;
    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;
    10541085  margin: 0;
    … …  
    12061237  background: #005177;
    12071238}
    12081239
     1240.main-navigation .sub-menu > li > .menu-item-link-return {
     1241  width: 100%;
     1242  font-size: 22px;
     1243  font-weight: normal;
     1244  text-align: left;
     1245}
     1246
    12091247.main-navigation .sub-menu > li > a:empty {
    12101248  display: none;
    12111249}

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

     
    3636                                array(
    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                        );
    4242                        ?>