helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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

Browse source 
* feat(web, a11y): add labels!

* fix: move required prop to the top of the list
This commit is contained in:
Ben Basten 2024-03-29 12:48:07 +00:00 • committed by GitHub
parent 6f677b4fae
commit fcc3b81745
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 63 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/lib/components/shared-components/base-modal.svelte
View file

@ -56,7 +56,7 @@
</slot>
</div>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
</div>
<div>

2
web/src/lib/components/shared-components/context-menu/menu-option.svelte
View file

@ -14,7 +14,7 @@
{#if text}
{#if icon}
<p class="flex gap-2">
<Icon path={icon} size="18" />
<Icon path={icon} ariaHidden={true} size="18" />
{text}
</p>
{:else}

1
web/src/lib/components/shared-components/control-app-bar.svelte
View file

@ -58,6 +58,7 @@
<div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
{#if showBackButton}
<CircleIconButton
title="Close"
on:click={handleClose}
icon={backIcon}
backgroundColor={'transparent'}

4
web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
View file

@ -25,14 +25,14 @@
SELECT AVATAR COLOR
</h1>
<div>
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
<CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
</div>
</div>
<div class="flex items-center justify-center p-4 mt-4">
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
{#each colors as color}
<button on:click={() => dispatch('choose', color)}>
<UserAvatar {user} {color} size="xl" showProfileImage={false} />
<UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
</button>
{/each}
</div>

2
web/src/lib/components/shared-components/show-shortcuts.svelte
View file

@ -44,7 +44,7 @@
<div class="relative px-4 pt-4">
<h1 class="px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">Keyboard Shortcuts</h1>
<div class="absolute inset-y-0 right-0 px-4 py-4">
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
<CircleIconButton title="Close" icon={mdiClose} on:click={() => dispatch('close')} />
</div>
</div>

3
web/src/lib/components/shared-components/user-avatar.svelte
View file

@ -22,6 +22,7 @@
export let interactive = false;
export let showTitle = true;
export let showProfileImage = true;
export let label: string | undefined = undefined;
let img: HTMLImageElement;
let showFallback = true;
@ -61,7 +62,7 @@
$: colorClass = colorClasses[color];
$: sizeClass = sizeClasses[size];
$: title = `${user.name} (${user.email})`;
$: title = label ?? `${user.name} (${user.email})`;
$: interactiveClass = interactive
? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
: '';