Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web, a11y): add labels! #8354

Merged
merged 3 commits into from Mar 29, 2024
Merged

Conversation

ben-basten
Copy link
Contributor

Description

Labeling icons + buttons in various locations!

Notable changes:

  • title is now a required prop for CircleIconButton, and it automatically adds an aria-label for screen reader users
  • Add color labels for the "Select avatar color" modal
  • Mark icons in the menu options as aria-hidden, because they already have perceivable text to go along with them

Screenshots

N/A - UI looks visually the same.

How Has This Been Tested?

Hover over any of the change buttons with a mouse to check that a popup with the title appears. Or try using a screen reader to focus the buttons, and check if it announces a title.

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)

Copy link
Member

@bo0tzz bo0tzz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice!

@jrasm91 jrasm91 merged commit fcc3b81 into immich-app:main Mar 29, 2024
22 of 23 checks passed
@ben-basten ben-basten deleted the feat/labels-v2 branch March 29, 2024 14:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants