[5.x]: Using enter/spacebar to activate breadcrumb links inside disclosures closes the menu

[gcamacho079]

What happened?

Description

See title

Steps to reproduce

1. Open a menu inside the global breadcrumb navigation (to choose a site or section)
2. Use enter/spacebar to activate a link

Expected behavior

The user should go to the page selected

Actual behavior

The disclosure menu closes

Craft CMS version

5.0.0-beta.6

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[brianjhanson]

@gcamacho079 things seem to work with enter for me, just not space. Should both trigger the navigation?

Edit: It looks like we rely on default browser behavior for following those links so I created a little test. It appears as though with a normal list of links enter will follow the links while space does nothing. I'm happy to tweak it, just trying to make sure I understand the desired behavior.

https://codepen.io/brianjhanson/pen/abxmLpp

[gcamacho079]

I may not have pulled recent changes, but that (Enter only for link activation) is indeed the native behavior. Our disclosures get tricky because some of our menus mix links and buttons, and it’s impossible to tell which you’re on. For example, in element action disclosures, we have a button to “Open in Image Editor” near a link to “Show in folder”. So for some of those menus, you could use Space to activate the buttons, but that would not work for a link.

If we use the activate in instances like these, we’ll ensure both Enter/Space activate them and eliminate some of the guesswork about which key to use.

[brandonkelly]

I was on the fence about this because it felt a little weird to add a keypress listener to disclosure link items that were really just normal hyperlinks, but I agree it’s confusing since they are styled like other disclosure items. Just added the listener for the next release.

Note that for links with target="_blank", the browser might end up blocking the new tab until you allow it.