immich-app/immich

Focus outlines are broken/inconsistent

Open

#19498 opened on Jun 24, 2025

View on GitHub
 (5 comments) (0 reactions) (0 assignees)TypeScript (100,600 stars) (5,601 forks)batch import
good first issue🖥️web

Description

I have searched the existing issues, both open and closed, to make sure this is not a duplicate report.

  • Yes

The bug

There are some various rendering issues in the web view admin page, when using the TAB key to cycle through buttons/menu items.

Chrome 137

Image

Image

The OS that Immich Server is running on

Debian 12

Version of Immich Server

v1.135.3

Version of Immich Mobile App

v1.135.3

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

N/A

Your .env content

N/A

Reproduction steps

N/A

Relevant log output

Additional information

No response

Contributor guide

Tech stack
typescriptreactcss
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic CSS knowledgeFamiliarity with browser DevTools
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Investigate the web admin page's focus styles. Inspect elements using Chrome DevTools to identify the CSS rules causing broken outlines. Look for missing or overridden `outline` properties, especially on buttons and menu items. Check if Tailwind CSS or custom styles are used and if `focus visible` pseudo class is applied. Consider cross browser compatibility for Chrome 137 and other browsers. A potential fix involves adding explicit focus styles (e.g., `outline: 2px solid currentColor; outline offset: 2px;`) to interactive elements.