♿ AVT 3 ♿ Overflow menu should support links as menu items

[dakahn]

The menu items of an overflow menu could be used for navigation. In this case the user expects to be read a link and not a button. A link element should be supported alongside a button since in the case of navigation it is more semantically correct and in line with user expectation.

Reference

Links vs. Buttons in Modern Web Applications

[lauraalkhoury]

Something I just noticed (in React)

In the OverflowMenu, when you have an entry that is an <a href=“…” /> that navigates to a new page, that is activated/selected with the enter key. When you have an entry that is a <button /> that, say, takes an action on the current page, that’s activated/selected with the spacebar.

The net is that you end up with an overflow menu where some items are activated via space and some are activated via enter.

[carmacleod]

@dakahn So in the case that @lauraalkhoury describes, both link and button should be activated by both space and enter. (So that the user isn't confused).

[aagonzales]

Can someone show me an example of where you would have a link instead of an action (button) in the overflow menu? Originally, the overflow menu was only meant for actions (buttons).

If there is a good reason to include links then I think we would want to style the links differently than the actions incase they are ever shown together.

[lauraalkhoury]

@aagonzales in the case that you want a menu item in your overflow menu to navigate to a new page - for instance, the IBM Cloud Pipeline team has an overflow menu like this:

where the "Configure pipeline" item navigates to https://example-pipeline-url.com/config, essentially the settings page. We have a few instances of this in our UI.

@dakahn it seems like in carbon-components-react, there was functionality recently added so that when the user adds the href prop to an OverflowMenuItem, it renders the item as:

 <li><a></a></li>

instead of:

 <li><button></button></li>

So it seems some work has been done to support links as menu items.

[lauraalkhoury]

here's the PR for the link as menu item functionality I mentioned: carbon-design-system/carbon-components-react#1630

[aagonzales]

I think adding the "launch out" icon at the end of links will help users know that its going to take them someplace.

[dakahn]

I'll close this since it looks like this functionality has been implemented. Happy to open it up again and continue discussion if we want to though 🏄🏼‍♂️

[lauraalkhoury]

@dakahn should I open up a separate issue for this problem from my comment above I found in the overflow menu with links vs buttons?

The net is that you end up with an overflow menu where some items are activated via space and some are activated via enter.

It seems like that is still an issue.

[dakahn]

Absolutely 😸 thank you so so much