@joyously The issue is solved out of the box in Twentyseventeen theme, a little bit of refinement here Handles toggling the navigation menu for small screens and e - Pastebin.com (js code) This is what I use in all of my themes - handles menu toggling/accessibility on small devices and also solves the issue of tabbing through links.
To solve the ScreenReader issue:
Replace the theme name with yours, something like this
( 'aria-label', chickenbrainyScreenReaderText.expand );
Replace all the chickenbrainy appended with your theme name (they are in the js above)
Even if you replace all that, it won’t work, as you need to configure it to soothe your theme menu, this is how:
The Screenreadertext is appended, so it lets js knows you have some translatable strings somewhere, those translatable strings are what the Screenreader will read (functions.php in this case)
You can’t translate strings in js as far as I know in Wp/Cp, you have to translate it in a .php file. I assume you are using functions.php!
Define the translatable strings, and then pass those strings to the js in the defined variable, which is yourthemeScreenReaderText, use the localize_script to solve that
wp_localize_script(
'theme-navigation', // label you are sending the strings to
'themenameScreenReaderText', // var you passed to the js file
array (
'expand' => __( 'Expand child menu', 'your-theme-textdomain' ),
'collapse' => __( 'Collapse child menu', 'our-theme-textdomain),
)
the array contains the two values you are passing on, and can be found in the js above
One more thing thou, there are some classes you need to append to your menu:
if you need the mobile menu toggle to function with the js code use this
<nav id="site-navigation" class="main-navigation nav--toggle-sub nav--toggle-small" aria-label="<?php esc_attr_e( 'Main menu', 'your-theme-textdomain' ); ?>"
those classes are in the js, so you need it if you want it to work,
lastly the button:
<button class="menu-toggle" aria-label="<?php esc_attr_e( 'Open menu', 'your-theme-textdomain' ); ?>" aria-controls="primary-menu" aria-expanded="false">
<?php esc_html_e( 'Menu', 'your-textdomain' ); ?>
</button>
Use some CSS to style the toggle, and that should fix either the tabbing not working through links or Screenreader not properly translating or menu accessibility not working properly
Edit
If you don’t mind, you can share how you first implemented it or the code, that way, it would be easier to pinpoint the issue
Edit 2
You likely won’t see the dropdown toggle, and here is why - We didn’t specify a way to add it in the js code, you can use Jquery/javascript to find the menu that has children and anchor inside it, and if it finds it, add the dropdown.
Alternatively, since you said you are using the walker class, you can extend the walker class and add something like this
add_filter('add_dropdown_css_class' , 'my_nav_class' , 10 , 2 );
function primary_nav_menu_dropdown_symbol ($classes, $item) {
if ( ! empty( $item->classes ) && in_array( 'menu-item-has-children', $item->classes ) ) {
return $item_output . '<span class="dropdown"><i class="dropdown-symbol"></i></span>';
}
return $item_output;
}
I haven’t tested this particular code but that should be appended if the menu has children,
You will notice we aren’t outputing anything, we are just adding span, this is because, it becomes easy to style the inline class “dropdown-symbol” with some CSS - add this Css styles to the dropdown-symbol:
background: transparent;
border: solid #000; /* adds black border */
border-width: 0 4px 4px 0; /* remove top and left */
width: 60%;
height: 60%;
display: block;
position: absolute; /* you ain't going anywhere */
transform: translateY(-50%) rotate(45deg); /* rotate */
If you also have other levels or sub menu, just re-rotate the deg!
Depending on how you styled your menu, you can also use the top and right properties to align