feat(web,a11y): standardize base modal

[ben-basten]

Description

Standardized BaseModal header with the following:

• left aligned
• sentence case
• consistent sizing
• immich blue color
• optional logo/icon to the left of the header

Improved accessibility:

• added aria-modal and aria-labelledby, so the screen reader now announces the header when the modal is opened
• removed escape event, so any modal that handles closing a modal also automatically handles the escape key
• removed autofocus attribute from the album selection modal, which was stealing focus and preventing the screen reader from announcing the modal header

Screenshots

Expand for screenshots

Immich logo

Icon

No icon

Dark mode logo

Dark mode icon

How Has This Been Tested?

• MacOS + VoiceOver
  • Chrome
  • Firefox
  • Safari
• Windows + NVDA - I don't have a Windows VM setup yet...
  • Chrome
  • Firefox

Affected modals:

• Add to album
• Add to shared album
• Account Settings > Partner Sharing > Add partner
• Link sharing (from asset viewer or album detail views)
• Set profile picture
• Create shared link
• Albums > Album ID > Sharing "Options" modal

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)

[jrasm91]

Looks great! Thank you