Page MenuHomePhorge

Links cannot be navigated using keyboard
Open, Needs TriagePublic

Description

Steps to reproduce:

  1. Take any Phorge page (the current one will suffice)
  2. Press Tab to navigate links using keyboard

Expected behavior
Links should have an outline indicating the currently active link.

Actual behavior
They have none.

Technical details
Phorge currently has a style that removes outlines with outline-style: none; for unclear reasons.

a {
  outline-style: none;
  text-decoration: none;
  color: {$anchor};
  cursor: pointer;
}

Event Timeline

I have this look on Windows for

a {
  outline-style: auto;
}
Last ChromeLast Firefox
image.png (486×806 px, 54 KB)
image.png (475×800 px, 44 KB)

overflow: hidden on .phui-oi-name, .phui-oi-content, and .phui-oi-byline is to blame. For .phui-oi-name and .phui-oi-byline, it helps to truncate titles with ellipsis on narrow screens:

image.png (75×571 px, 11 KB)

For .phui-oi-content, idk.

If overflow: hidden can't be removed, 1px–2px paddings could be introduced on these elements if necessary. outline-offset: -1px could also be used, but I'm not sure about that one since outlines would make the text less readable:

image.png (478×818 px, 55 KB)

But in any case, pages being inaccessible and outlines looking off are incomparable problems. If anything, the bad look in edge cases could be disregarded entirely if accessibility is improved.