Custom admin menu items don't provide their title on medium breakpoint

[garrett-eclipse]

With custom admin menus if no submenu is provided for them they don't have a flyout on hover which on medium breakpoint leaves them only identified by their icon.

Note: Core menus all have submenus so this only affects custom menus developers introduce.

It would be nice to still provide the submenu flyout with only the wp-submenu-head item present as that would provide the title of the item.

The submenu items are introduced here with the first item being the wp-submenu-head. Am thinking moving the empty check into the ul would leave the flyout providing the title.
​https://github.com/WordPress/WordPress/blob/92aa2f9e92a4e1ad5471d87d5292587c5cee5702/wp-admin/menu-header.php#L178-L250

[garrett-eclipse]

Current Behaviour - No title shown only icon for menus w/o submenus

[garrett-eclipse]

Suggested Behaviour - Title shown on hover to indicate what the menu item is for

[afercia]

Discussed during today's accessibility meeting. The admin menu is the result of years of backwards compatibility and its code is far from ideal.

Ideally, it should be rebuilt from scratch, which it’s unlikely to happen :) On the other hand, Gutenberg introduced the “tooltips” pattern. Similarly, the admin menu could use tooltips.

The menu changes to display only the icon when the menu auto-folds in the medium responsive view or when it’s collapsed by users. Not sure the auto-fold still makes sense, as it happens only in a very limited range of the viewport width. Under a certain width, there’s now the responsive view. Would be nice to explore it auto-fold can be removed.

That's just to say that touching the admin menu is a challenging task but if anyone comes up with a patch, that would be very welcome :)

[garrett-eclipse]

Thanks @afercia I appreciate the feedback. Caught that in #accessibility earlier and like the idea of removing the auto-fold. Or even unfolding the entire menu on hover as I've seen that pattern be successful on other applications. A bit backlogged right now but will take a stab at a patch later next month. Cheers

[dotrex]

A alternative and quick solution is to add a <title> attribute in the <a> tags. This will display a tooltip on hover.

Here is a example:

I created a patch with the required changes here: ​https://github.com/diiegopereira/wordpress-develop/compare/trunk...ticket/46307

However, this tooltip will also be displayed on all screen resolutions. I'm not sure if this would be a issue.

[sabernhardt]

expands link text on hover or focus for menu items without a submenu, inheriting the background color from #adminmenu, and adds transparent border on three sides

[sabernhardt]

Thanks for looking into this.

#24766 and related tickets have removed most title attributes from the admin, so I cannot recommend using any of them on the a element.

For [53414], the column header had hidden text for screen readers, and moving the title attribute to the icon with aria-hidden avoided speaking the same text twice. In the admin menu, .wp-menu-image already has aria-hidden, which could make a title attribute on that element acceptable. It would need to strip all tags and only apply when the menu does not have a submenu. However, the tooltip could still obstruct the link on larger screens when the menu is not folded.

I tried a CSS approach in 46307.diff​ and needed to define the same rules for auto-fold and folded at different screen widths. Also, the High Contrast mode border in that patch is only appropriate if #61616 adds a similar 1-pixel transparent border on submenus.