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 #8007] feat(web): combobox accessibility improvements #11883

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

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

State: closed
Merged: Yes

Description

This change makes the combobox more accessible for keyboard use. It visibly should look the same. Design was modeled after the WCAG documentation here:

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/

Changes include:

  • Arrow key navigation of the completions
  • Arrow key navigation of completions loops at the beginning or the end of the list
  • Screen reader announces completion options
  • Completions are removed from the tab order, so it's easier to navigate the form with a single press of the "Tab" key
  • Integrate labels into the component, since they're a required part of any combobox
  • Allow labels to be hidden for screen reader only
  • Labeling icons within the component
  • Show/hide the completions on focus and blur, rather than just click
  • Auto scrolling to guarantee that the selected option is always visible
  • opt + down arrow opens the completion list without selecting anything
  • Maintain search magnifying glass icon while the component is active

See also: Bumped the z-index on the skip link, because it is showing underneath the search box in narrow screen widths.

Open to any thoughts, comments, or feedback if you'd like to see any changes in how this works!

How Has This Been Tested?

  • MacOS + VoiceOver
    • Chrome
    • Firefox
    • Safari
      • One issue to note: VoiceOver doesn't announce autocomplete options on the initial load without filtering. This same issue exists in the WCAG documentation. I haven't found a fix for this yet.
  • Windows + NVDA - tested by @michelheusschen
    • Chrome
    • Firefox

Screenshots (if appropriate):

Dropdown list with some example data:

Screenshot 2024-03-16 at 11 36 40

Checklist:

  • npm run lint (linting via ESLint)
  • npm run format (formatting via Prettier)
  • npm run check:svelte (Type checking via SvelteKit)
  • npm test (Tests via Jest)
**Original Pull Request:** https://github.com/immich-app/immich/pull/8007 **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. --> This change makes the combobox more accessible for keyboard use. It visibly should look the same. Design was modeled after the WCAG documentation here: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/ **Changes include:** * Arrow key navigation of the completions * Arrow key navigation of completions loops at the beginning or the end of the list * Screen reader announces completion options * Completions are removed from the tab order, so it's easier to navigate the form with a single press of the "Tab" key * Integrate labels into the component, since they're a required part of any combobox * Allow labels to be hidden for screen reader only * Labeling icons within the component * Show/hide the completions on focus and blur, rather than just click * Auto scrolling to guarantee that the selected option is always visible * opt + down arrow opens the completion list without selecting anything * Maintain search magnifying glass icon while the component is active **See also:** Bumped the z-index on the skip link, because it is showing underneath the search box in narrow screen widths. Open to any thoughts, comments, or feedback if you'd like to see any changes in how this works! ## How Has This Been Tested? - [x] MacOS + VoiceOver - [x] Chrome - [x] Firefox - [x] Safari - One issue to note: VoiceOver doesn't announce autocomplete options on the initial load without filtering. This same issue exists in the WCAG documentation. I haven't found a fix for this yet. - [x] Windows + NVDA - tested by @michelheusschen - [x] Chrome - [x] Firefox ## Screenshots (if appropriate): Dropdown list with some example data: ![Screenshot 2024-03-16 at 11 36 40](https://github.com/ben-basten/immich/assets/45583362/6fe4776e-3aca-4ffb-aa95-f85067dec466) ## Checklist: * [x] npm run lint (linting via ESLint) * [x] npm run format (formatting via Prettier) * [x] npm run check:svelte (Type checking via SvelteKit) * [x] npm test (Tests via Jest)
OVERLORD added the pull-request label 2026-02-05 14:47:37 +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#11883
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?