Setup issues - clickable area

Reproduction Instructions

Open a phabricator instance where there is at least one Setup Issue (/config/issue/)

Try to open an issue in new tab. Middle-click in this part of any card representing an issue:

Nothing happens. This part responds only to regular clicks/taps. Right-clicking this part does not provide the user with an option to open the link in new tab.

One can only open the link in the new tab when clicking on the title of the issue, which is a proper link in the DOM.

Phabricator Version:
9d1af762d518 Wed, Feb 5

Browsers won’t render <a> tags inside other <a> tags, so I don’t know how to render this UI without making some usability tradeoffs.

These articles discuss the issue in greater detail:

https://css-tricks.com/nested-links/
https://www.sarasoueidan.com/blog/nested-links/

…but I think they don’t really arrive at a satisfying solution. In particular, I believe putting a layered pseudo-element over the entire content area will fix middle click and context menus, but will break text selection.

See also https://secure.phabricator.com/T7897.

But why would the links have to be nested, anyway? The main wrapping element could be an a tag and then the entire card would be properly clickable, right?

<a
  class="phui-oi-frame"
  href="/config/issue/security.security.alternate-file-domain/"
  title="Alternate File Domain Not Configured"
>
  <div class="phui-oi-frame-content">
    <div class="phui-oi-image-icon">
      <span
        class="visual-only phui-icon-view phui-font-fa fa-eye-slash phui-icon-square bg-grey"
        data-meta="0_0"
        aria-hidden="true"
      ></span>
    </div>
    <div class="phui-oi-content-box">
      <div class="phui-oi-table">
        <div class="phui-oi-table-row">
          <div class="phui-oi-col1">
            <div class="phui-oi-name">
              Alternate File Domain Not Configured
            </div>
            <div class="phui-oi-content">
              <ul class="phui-oi-attributes">
                <li class="phui-oi-attribute">
                  Improve security by configuring an alternate
                  file domain.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

I believe that’s less desirable (perhaps significantly less desirable) for accessibility, since the link content is now more complicated. You’ve moved the content to the “title” attribute, but I don’t think screen readers use the “title” attribute to mean “read this text instead of the link content”.

I think that also makes it more difficult to select text. See also https://discourse.phabricator-community.org/t/drag-by-the-title-is-confusing/3275 for a concrete example of a user finding drag behavior for links confusing, albeit in a different context. In fairness, the current approach is also not great about text selection. And text selection is not terribly important, although it’s also a feature I’m not excited about breaking arbitrarily.

It also means that we need to duplicate the CSS styling for the actual header piece which we’d like to visually look like a link. This isn’t a big deal, but is a tradeoff.

The associated JS currently simulates Command + Left Click to mean “open in new tab”, but does not simulate Middle Click. One approach here which is probably no worse than the current approach is to simulate both Command + Left Click and Middle Click. This won’t fix the context menu – but you’re probably only using the context menu when Middle Click doesn’t work. But I’m generally not very enthusiastic about implementing bad copies of browser features in Javascript, and this is firmly on that path.

Maybe it’d be a good use case for aria-label or aria-labeledby :thinking: