[wp-trac] [WordPress Trac] #47067: Twenty Nineteen: fix markup errors in `twentynineteen_add_ellipses_to_nav()`

[WordPress Trac]

#47067: Twenty Nineteen: fix markup errors in
`twentynineteen_add_ellipses_to_nav()`
---------------------------+-------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  5.2.1
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:                 |
---------------------------+-------------------------
 See https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentynineteen/inc/template-
 functions.php?rev=44376&marks=201-228#L194

 {{{
 function twentynineteen_add_ellipses_to_nav( $nav_menu, $args ) {

         if ( 'menu-1' === $args->theme_location ) :

                 $nav_menu .= '<div class="main-menu-more">';
                 $nav_menu .= '<ul class="main-menu">';
                 $nav_menu .= '<li class="menu-item menu-item-has-
 children">';
                 $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 .= '</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 .= '<button class="menu-item-link-return">';
                 $nav_menu .= twentynineteen_get_icon_svg( 'chevron_left'
 );
                 $nav_menu .= esc_html__( 'Back', 'twentynineteen' );
                 $nav_menu .= '</button>';
                 $nav_menu .= '</li>';
                 $nav_menu .= '</ul>';
                 $nav_menu .= '</li>';
                 $nav_menu .= '</ul>';
                 $nav_menu .= '</div>';

         endif;

         return $nav_menu;
 }
 }}}


 - `aria-label="More"` is not translatable
 - regardless, the button has also a visually hidden text `<span class
 ="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) .
 '</span>`: worth noting the non-translatable aria-label overrides any
 content of the button so: either use the hidden text or the aria-label
 (after it's made translatable), not both
 - `<li id="menu-item--1"`: not sure why there's this hardcoded ID: it
 produces duplicate IDs in a page, which is invalid HTML and I don't see a
 good reason to use it in the first place, unless I'm missing something

 As these are formal errors related to valid HTML / coding standards, I'd
 like to propose to fix them as soon as possible in the next minor release.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47067>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform