Menu links on "About" pages should use correct link markup

[tillprochaska]

Currently, navigation after clicking on links in the pages sidebar menu is handled by intercepting click events. As the menu items aren’t rendered as a tags with an href attribute, native browser features (e.g. opening a link in a new tab) won’t work for that reason. Also, the links cannot receive keyboard focus.

This has been difficult to fix with previous Blueprint and React Router version, but has been solved in the meantime (https://github.com/palantir/blueprint/pull/3061), so it should be easy to fix now.

[tillprochaska]

Turns out there is still no solution to this that doesn’t require ugly workarounds. While the following renders correctly, it leads to incorrectly nested HTML markup:

<Link to={getPageLink(menuPage)}>
  <MenuItem tagName="div" ... />
</Link>

Renders as:

<ul class="bp3-menu">
  <a href="/pages/...">
    <li>
      ...
    </li>
  </a>
</ul>

[tillprochaska]

For future reference: The way to go with React Router v6 is to use the useLinkClickHandler and useHref hooks.

[tillprochaska]

Other places that currently use workarounds:

• https://github.com/alephdata/aleph/blob/main/ui/src/components/Navbar/Navbar.jsx#L129-L146
• https://github.com/alephdata/aleph/blob/main/ui/src/components/Dashboard/Dashboard.jsx#L94-L182

[tillprochaska]

This has been fixed in the meantime.