Open-in-new-tab in the context menu is meaningful only for links

What it is

Browsers give links “Open in New Tab” and “Copy Link” because a link has an address that can be taken elsewhere. A button has no such address. Those items either do not appear, or appear and mean nothing—a new tab cannot replay Delete or Pay. Open-in-new-tab is meaningful only for links: it is the navigation contract’s pointer-gesture exit. Navigation built as a button leaves people hunting a command that is not there. An action built as a link fires once in the new tab.

Why it happens

New tab, new window, copy URL, drag to bookmarks all hand a resource id to another container. That id is href. A button event is one call in the current document, with nothing to pass; the other container opens blank or at the app’s default. A single-page app that history.pushes from a button without a copyable href goes mute for this whole family of gestures, even when it looks like a jump. Conversely <a href="#"> or javascript: makes the menu appear, the new tab loads a useless address, and people think they opened details. Presence of the menu item is harder evidence of role than appearance.

Studying it

Implement the same visual as a real-href link, a no-href button jump, and an href="#" fake link. Allow right-click, middle-click, drag.

Independent variables: real href or not, navigation versus action task. Dependent variables: new-tab attempts, whether the new tab holds the expected resource, whether a copied address opens independently.

An embedded WebView that strips the browser menu cannot measure this. Use a desktop browser with a standard context menu.

Where it stops holding

“Open in new tab” on a download link may start a download; it is still meaningful. An authenticated resource may drop the session in a new tab—the command is meaningful and the result fails; fix the session, do not remove the menu. Mobile long-press copy differs, but “open in new tab” still holds only for addressed objects. A link inside a modal that a button opened gets the menu again.

Applying it

• Anything that should be new-tabbed, copied, or shared is a real-href link, not a button pushing a route.
• Do not fake a link menu with href="#" on an action.
• Right-click every control that “looks like it jumps” in component preview; menu items must match true consequences.
• Verify with a middle click. A link should open the right resource in a new tab. A button should neither open a blank tab nor fire the action on the current page.

Related

• Within the group: E1.16.1 Links activate with Enter; buttons respond to Enter and Space · E1.16.2 Screen readers speak link and button roles, not only the label · E1.16.4 Visited state belongs to links; buttons have no visited concept
• Adjacent: E1.08 Links versus buttons · G4 Cross-page flow · O3 Security interaction
• Search terms: open in new tab · context menu · href