"dropdown-menu-toggle" Accessibility issue "This button is empty"

Hi there,

Not sure if I fully understand but is this what you are looking for?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

Hi Leo,

no that´s not what I have been searching for.

When I´m testing my site for accessibility it shows that I have an issue in my navigation = "This button is empty."

<span role="button" class="dropdown-menu-toggle" tabindex="0"><span class="gp-icon icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M305.913 197.085c0 2.26

This button has no text within it. People who use assistive technologies like voice-dictation software will not be able to refer to the button by name, and users of screen readers will not have any information about this button's purpose. Add text in this button to identify what will happen when the button is activated

Hi Heinrich,

You may have to filter the HTML output of the whole dropdown if you need to add something.

The default structure has this code.

https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/structure/navigation.php#L355-L426

You can try removing this default by PHP using this snippet

remove_filter( 'nav_menu_item_title', 'generate_dropdown_icon_to_menu_link', 10, 4 );

And then re-add it back with aria label:

add_filter( 'nav_menu_item_title', 'generate_dropdown_icon_to_menu_link_with_aria_label', 15, 4 );
function generate_dropdown_icon_to_menu_link_with_aria_label( $title, $item, $args, $depth ) {
		$role = 'presentation';
		$tabindex = '';
		$aria_attr = 'aria-attribute-here="aria_attribute_value_here"';

		if ( 'click-arrow' === generate_get_option( 'nav_dropdown_type' ) ) {
			$role = 'button';
			$tabindex = ' tabindex="0"';
		}

		if ( isset( $args->container_class ) && 'main-nav' === $args->container_class ) {
			foreach ( $item->classes as $value ) {
				if ( 'menu-item-has-children' === $value ) {
					$arrow_direction = 'down';

					if ( 'primary' === $args->theme_location ) {
						if ( 0 !== $depth ) {
							$arrow_direction = 'right';

							if ( 'left' === generate_get_option( 'nav_dropdown_direction' ) ) {
								$arrow_direction = 'left';
							}
						}

						if ( 'nav-left-sidebar' === generate_get_navigation_location() ) {
							$arrow_direction = 'right';

							if ( 'both-right' === generate_get_layout() ) {
								$arrow_direction = 'left';
							}
						}

						if ( 'nav-right-sidebar' === generate_get_navigation_location() ) {
							$arrow_direction = 'left';

							if ( 'both-left' === generate_get_layout() ) {
								$arrow_direction = 'right';
							}
						}

						if ( 'hover' !== generate_get_option( 'nav_dropdown_type' ) ) {
							$arrow_direction = 'down';
						}
					}

					$arrow_direction = apply_filters( 'generate_menu_item_dropdown_arrow_direction', $arrow_direction, $args, $depth );

					if ( 'down' === $arrow_direction ) {
						$arrow_direction = '';
					} else {
						$arrow_direction = '-' . $arrow_direction;
					}

					$icon = generate_get_svg_icon( 'arrow' . $arrow_direction );
					$title = $title . '<span role="' . $role . '" '. $aria_attr .' class="dropdown-menu-toggle"' . $tabindex . '>' . $icon . '</span>';
				}
			}
		}

		return $title;
	}

Change the value of $aria_attr to the aria attribute you want to add. :)

Hi Elvin,
sorry for the late reply.
I tried your code but now I 2 arrows (see screenshot https://snipboard.io/ep2Fif.jpg)

Hi there,

Just confirming that you also added this?:

remove_filter( 'nav_menu_item_title', 'generate_dropdown_icon_to_menu_link', 10, 4 );

If that doesn't work, try this:

add_action( 'wp', function() {
    remove_filter( 'nav_menu_item_title', 'generate_dropdown_icon_to_menu_link', 10, 4 );
} );

This is an issue I'm aware of. I don't love how the current dropdown arrows/mobile dropdown functionality works, and it might be something we completely re-write in GP 3.2.0.

While the solution in this topic should work, it's important to note that it is changing a major component of the theme that may (likely) change in the future. Be sure to keep up to date with our alpha/beta versions to see if this solution needs to be changed (or even removed).

Hi Tom,

great, that worked!
I will keep that in mind.

Thanks for your amazing support.

No problem!