immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-07-25 14:00:45 +03:00
Code Issues 783 Packages Projects Releases 22 Wiki Activity

[PR #11966] [MERGED] fix(web): rating stars accessibility #13435

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

📋 Pull Request Information

Original PR: https://github.com/immich-app/immich/pull/11966
Author: @ben-basten
Created: 8/22/2024
Status: ✅ Merged
Merged: 8/23/2024
Merged by: @jrasm91

Base: main ← Head: fix/ratings-a11y

📝 Commits (7)

📊 Changes

7 files changed (+180 additions, -31 deletions)

View changed files

📝 web/src/lib/actions/focus-outside.ts (+4 -1)
📝 web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte (+1 -1)
➕ web/src/lib/components/shared-components/__test__/star-rating.spec.ts (+78 -0)
📝 web/src/lib/components/shared-components/combobox.svelte (+0 -2)
📝 web/src/lib/components/shared-components/search-bar/search-bar.svelte (+2 -3)
📝 web/src/lib/components/shared-components/star-rating.svelte (+93 -24)
📝 web/src/lib/i18n/en.json (+2 -0)

📄 Description

Description

Fixes #11829

Fixes the user feedback from Discord

Accessibility improvements include:

  • using native HTML radio buttons for star interactivity, which allows for predictable keyboard navigation
  • only a single tab stop for the stars
  • visible focus ring around focused star
  • "Clear ratings" button to set ratings back to 0, if desired. According to the previous PR, it looks like there's no way to "reset" ratings
  • add labels to each individual star and the grouping of stars, so the screen reader will announce what they are

Other improvements:

Changed the focusOutside Svelte action to also trigger if the relatedTarget is falsy. This means that scenarios like clicking outside of the browser window are handled, and it allows the action to function as a standalone equivalent to the clickOutside action.

The downside is that a tabindex needs to be added to the container that focusOutside is used with, to guarantee that all mouse clicks inside of the container have a relatedTarget when focus changes.

This is an important change to guarantee that the focus ring around the stars behaves like real focus, and never gets stuck on a star when the user clicks away from the immich window.

How Has This Been Tested?

  • VoiceOver screen reader testing for Safari, Firefox, Chrome
  • Test other usages of focusOutside Svelte action to check that they still work as expected

Screenshots (if appropriate):

No stars selected

no-stars

Stars selected

2-stars

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/immich-app/immich/pull/11966 **Author:** [@ben-basten](https://github.com/ben-basten) **Created:** 8/22/2024 **Status:** ✅ Merged **Merged:** 8/23/2024 **Merged by:** [@jrasm91](https://github.com/jrasm91) **Base:** `main` ← **Head:** `fix/ratings-a11y` --- ### 📝 Commits (7) - [`7a4ae9d`](https://github.com/immich-app/immich/commit/7a4ae9d9f69ece277bd57ac95999355eecd6e3e3) fix(web): exif ratings accessibility - [`e2bcca0`](https://github.com/immich-app/immich/commit/e2bcca0f6fda643aa4a1506edd820aa813d02962) Merge branch 'main' of https://github.com/immich-app/immich into fix/ratings-a11y - [`75aaca1`](https://github.com/immich-app/immich/commit/75aaca1077b6f5e58d2421609ef4f2fcfc90abc8) chore: add tests - [`b76a7ae`](https://github.com/immich-app/immich/commit/b76a7ae0edeb663b9940b389fb992e2e8a2efaf3) fix: eslint errors - [`bcf67b7`](https://github.com/immich-app/immich/commit/bcf67b7c40d10cda0d86d5a69b0eeae170e717c2) Merge branch 'main' of https://github.com/immich-app/immich into fix/ratings-a11y - [`a37e7f0`](https://github.com/immich-app/immich/commit/a37e7f0da1acb8965d6d0a513f952684a064084d) fix: clean up issues from changes in use:focusOutside - [`eb5775f`](https://github.com/immich-app/immich/commit/eb5775f284adb9c3ea3e2cb7ea6ca184e3c0cee9) Merge remote-tracking branch 'origin/main' into fix/ratings-a11y ### 📊 Changes **7 files changed** (+180 additions, -31 deletions) <details> <summary>View changed files</summary> 📝 `web/src/lib/actions/focus-outside.ts` (+4 -1) 📝 `web/src/lib/components/asset-viewer/detail-panel-star-rating.svelte` (+1 -1) ➕ `web/src/lib/components/shared-components/__test__/star-rating.spec.ts` (+78 -0) 📝 `web/src/lib/components/shared-components/combobox.svelte` (+0 -2) 📝 `web/src/lib/components/shared-components/search-bar/search-bar.svelte` (+2 -3) 📝 `web/src/lib/components/shared-components/star-rating.svelte` (+93 -24) 📝 `web/src/lib/i18n/en.json` (+2 -0) </details> ### 📄 Description ## 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. --> Fixes #11829 Fixes the [user feedback from Discord](https://discord.com/channels/979116623879368755/994044917355663450/1275422829952897092) **Accessibility improvements include:** - using native HTML radio buttons for star interactivity, which allows for predictable keyboard navigation - only a single tab stop for the stars - visible focus ring around focused star - "Clear ratings" button to set ratings back to 0, if desired. According to the previous PR, it looks like there's no way to "reset" ratings - https://github.com/immich-app/immich/pull/11580#discussion_r1705401380 - add labels to each individual star and the grouping of stars, so the screen reader will announce what they are **Other improvements:** Changed the `focusOutside` Svelte action to also trigger if the `relatedTarget` is falsy. This means that scenarios like clicking outside of the browser window are handled, and it allows the action to function as a standalone equivalent to the `clickOutside` action. The downside is that a tabindex needs to be added to the container that `focusOutside` is used with, to guarantee that all mouse clicks inside of the container have a `relatedTarget` when focus changes. This is an important change to guarantee that the focus ring around the stars behaves like real focus, and never gets stuck on a star when the user clicks away from the immich window. ## 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 --> - [x] VoiceOver screen reader testing for Safari, Firefox, Chrome - [x] Test other usages of `focusOutside` Svelte action to check that they still work as expected ## Screenshots (if appropriate): <details><summary>No stars selected</summary> <p> ![no-stars](https://github.com/user-attachments/assets/c5e28903-00d3-4448-b1b0-ace58c740030) </p> </details> <details><summary>Stars selected</summary> <p> ![2-stars](https://github.com/user-attachments/assets/fdeeeca2-e825-4447-8de9-b4d8c069a810) </p> </details> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2026-02-05 15:14:43 +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#13435
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?