Unable to right click on a table with a link and open in new tab

[steveoh-rose]

Provide a general summary of the issue here

When using the href prop on a Row component within react-aria-components, the row correctly handles left-clicks for navigation (via RouterProvider). However, it does not allow users to right-click the row to "Open in New Tab."

Because the library does not render a semantic tag that wraps or represents the row (due to HTML table nesting constraints), the browser does not recognise the row as a link, depriving users of standard browser functionality.

🤔 Expected Behavior?

The browser's native context menu should appear, offering options such as "Open link in new tab" and "Copy link address.

😯 Current Behavior

The standard browser context menu for a generic element (non-link) appears. The user cannot perform native link actions.

💁 Possible Solution

Provide a mechanism or a recommended pattern within the API to inject a functional hidden anchor tag into a cell that expands to the hit area of the row, ensuring the browser detects an href.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Create a Table using react-aria-components.
2. Assign an href prop to a Row component.
3. Render the table in a browser.
4. Right-click on any part of the row.

Version

1.16.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

There isn't a great solution to this afaik. As mentioned in the docs, table rows cannot be links due to limitations of HTML. If you want the whole row to be clickable, you can use onAction and implement programmatic navigation. If you need the right click behavior, I'd suggest putting a link within a cell. You could potentially wrap the contents of each cell in a row inside a link as well, as long as the contents of the cell don't contain other interactive elements like buttons.