Keyboard focus indicators hidden on web interface

[garcialo]

Summary

When tabbing through the web interface, the focus indicator is hidden for keyboard users. This is equivalent to hiding the mouse cursor for mouse users with body { cursor: none !important;}.

I used Windows 11 / Firefox 136.0

Steps to Reproduce

1. Go to a Jellyfin instance via web browser (e.g. https://demo.jellyfin.org/stable/web/#/login.html)
2. Press Tab key to navigate through the page

Expected result

A focus indicator is displayed for each interactive element

Actual result

No focus indicators are displayed

Quick fix

It seems various button classes are using outline: none !important which hides the browser's default focus indicator.

With the default button behavior restored, sighted keyboard users are no longer prevented from using Jellyfin.

"demo" button with the outline: none !important style removed.

"Use Quick Connect" button with the outline: none !important style removed.

Note

Some buttons, (e.g. "Manual Login," "Use Quick Connect," and "Forgot Password" on the demo login page) technically have focus styles in that the color changes, the color contrast ratio between the focused and unfocused buttons is too low to be a sufficient focus indicator on its own.