immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-01 11:20:12 +03:00
Code Issues 783 Packages Projects Releases 12 Wiki Activity

[PR #9153] feat(web,a11y): replace IconButton with CircleIconButton #12358

New Issue
Closed
opened 2026-02-05 14:55:32 +03:00 by OVERLORD · 0 comments
OVERLORD commented 2026-02-05 14:55:32 +03:00
Owner
Copy Link

Original Pull Request: https://github.com/immich-app/immich/pull/9153

State: closed
Merged: Yes

Description

Migrate all usages of IconButton to CircleIconButton, or other similar alternatives.

In my opinion, CircleIconButton is preferred because its colors are consistent with other buttons throughout the application, implementation is simpler, and accessible labeling is built-in by default.

New in this PR:

  • The magnifying glass "Search" button in the main search bar now shows an outline when hovered, to make it more obvious that it's clickable.
  • The ellipses menu when hovering over a person or album now has a white background, for visibility.
  • Added a screen reader only label to the main search box.
  • Added a button type prop to CircleIconButton, to make it more flexible for usage in any scenario. This was a required change to get the search bar buttons working as expected.
Expand for screenshots

Light theme toggle

light

Dark theme toggle

dark

Album options ellipses

album-options

Hover over search button

search-button-hover

How Has This Been Tested?

Checked the buttons in light mode, light mode hovered, dark mode, and dark mode hovered.

There are also different icons in the top navigation in narrow mobile views, so the same testing needs to be done there too.

Checklist:

  • npm run lint
  • npm run format
  • npm run check:svelte
  • npm test
**Original Pull Request:** https://github.com/immich-app/immich/pull/9153 **State:** closed **Merged:** Yes --- ## Description <!--- Describe your changes in detail --> <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> Migrate all usages of `IconButton` to `CircleIconButton`, or other similar alternatives. In my opinion, `CircleIconButton` is preferred because its colors are consistent with other buttons throughout the application, implementation is simpler, and accessible labeling is built-in by default. New in this PR: - The magnifying glass "Search" button in the main search bar now shows an outline when hovered, to make it more obvious that it's clickable. - The ellipses menu when hovering over a person or album now has a white background, for visibility. - Added a screen reader only label to the main search box. - Added a button `type` prop to `CircleIconButton`, to make it more flexible for usage in any scenario. This was a required change to get the search bar buttons working as expected. <details><summary>Expand for screenshots</summary> <p> **Light theme toggle** ![light](https://github.com/ben-basten/immich/assets/45583362/31bfb2b5-9821-403b-b108-327a633082cd) **Dark theme toggle** ![dark](https://github.com/ben-basten/immich/assets/45583362/90906816-6fe6-4094-81f0-950138a4bf70) **Album options ellipses** ![album-options](https://github.com/immich-app/immich/assets/45583362/fb88d22c-a907-4eb9-86c2-5430b48e32a4) **Hover over search button** ![search-button-hover](https://github.com/immich-app/immich/assets/45583362/df0238bc-2f0b-46e3-8721-963cc8b4ba1e) </p> </details> ## How Has This Been Tested? <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration --> Checked the buttons in light mode, light mode hovered, dark mode, and dark mode hovered. There are also different icons in the top navigation in narrow mobile views, so the same testing needs to be done there too. ## Checklist: - [x] npm run lint - [x] npm run format - [x] npm run check:svelte - [x] npm test
OVERLORD added the pull-request label 2026-02-05 14:55:32 +03:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#12358
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?