fix(web,a11y): remove autofocus from input fields

[ben-basten]

Description

Remove all usages of the autofocus attribute, and replace them with alternatives where necessary.

Reasoning for this change:

• comment about keyboard unexpectedly appearing from the immich Discord community
• mdn documentation about autofocus accessibility concerns

Also in this PR:

The people filtering in the advanced search filters relied on this autofocus functionality. Previously, clicking the "See all people" button would expand the people menu, show the text input field, and automatically move focus to the text input field.

What I propose here is to make the text input field always visible. This provides the following benefits:

• allows users to have the choice between browsing through an expanded list of people, or quickly filtering for the person they want
• removes the need to jump focus, and potentially create a confusing experience for screen reader users
• provides more visibility/predictability to the text filtering feature

Screenshots

n/a

How Has This Been Tested?

Scenario 1: changing name

1. Go to the "people" page
2. Choose a person
3. Click the person name to start editing it. Focus should automatically be moved to the input field.

Scenario 2: filtering

1. Open the advanced search filters
2. Try filtering people with and without the "See all people" expanded

Checklist:

• npm run lint (linting via ESLint)
• npm run format (formatting via Prettier)
• npm run check:svelte (Type checking via SvelteKit)
• npm test (unit tests)

[waclaw66]

The autofocus feature is very useful on desktop devices, would it be possible to enable it on desktop only and disable it in mobile web browser?

[ben-basten]

The autofocus feature is very useful on desktop devices, would it be possible to enable it on desktop only and disable it in mobile web browser?

@waclaw66 Yes, there are still scenarios where moving focus to input fields is needed! In those scenarios, I'd recommend doing it intentionally using focus() instead to prevent unexpected behavior down the road.

For example, see this change I made to the edit name field:

https://github.com/immich-app/immich/pull/8857/files#diff-c0c073edbfa07ce75111cbadfb1ab931d366e5926faf0148a683faed5ce7f5de

In my opinion, if it comes down to differentiating between desktop and mobile, a different design should be considered that works for both. For example, it could be cool if clicking a sidebar link automatically focuses the header of the section that it just opened, and that would have a similar outcome as autofocusing the album/people filtering input field previously did.