Opening "keyboard shortcuts" in a new tab opens the same page you were on when you clicked on "keyboard shortcuts"

UX
1

Hi, I think this is less bug and more unexpected behavior…

I’m in the habit on my Mac of using ⌘+Click to open links in new tabs. When I do this on “Keyboard Shortcuts” in the hamburger menu, it opens up a new tab that doesn’t have keyboard shortcuts displayed.

2

The navigation for that “link” is handled in-app. I put link in quotes because it’s not really a link since it doesn’t point to any specific address

<a class="widget-link keyboard-shortcuts-link" href="" title="Keyboard Shortcuts">
  <span class="d-label">Keyboard Shortcuts</span>
</a>

Notice how the href attribute is empty?

It just opens a modal or dialogue box. So, it’s not possible to open that link in a new tab and have that modal show up.

1 Like
3

Hi, I understand. I simply wanted to point out that it is unexpected behavior from a user perspective because visually, “Keyboard Shortcuts” looks exactly like a link. If there is some way to offer some affordance that the “open new tab” process won’t work, that’d be ideal. I think this doesn’t need to be prioritized, of course — can’t imagine too many people are encountering this.

4

FWIW, removing the href attribute entirely (instead of setting to empty string, which is a reference to the current document) should prevent the link from being opened in a new tab, at least in most browsers.

4 Likes
5

Fair enough, an anchor tag without an href is valid in HTML5.

The problem with removing it is that it would then remove the link from the tab index, which means you can’t reach that link with the keyboard or other alternative input methods.

We can fix that by adding tabindex: 0

So we can do something like this

links.push({
  action: "showKeyboard",
  className: "keyboard-shortcuts-link",
  label: "keyboard_shortcuts_help.title",
  attributes: {
    tabindex: 0
  }
});

unless @awesomerobot is aware of any other issues with removing the href?

5 Likes
6

I feel like this is a slight improvement over opening a new tab, but it still feels odd that nothing happens when I try to open that link in a new tab… especially because it’s the only link in the menu that behaves that way.

We should ideally open the keyboard modal either way. In /widgets/link.js.es6 we have

click(e) {
if (wantsNewWindow(e)) {
      return;
    }
...

So it looks like we’re preventing anything from happening on click there if it’s calling for a new window/tab?.. I wonder if we can do a little reorganization there so we can open the modal despite modifier keys?

5 Likes