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

feat(web): improve alt text (#7596)

Browse source 
* alt text

* memory lane alt text

* revert sql generator change

* use getAltText

* oops

* handle large number of people in asset

* nit

* add aria-label to search button

* update api

* fixed tests

* fixed typing

* fixed spacing

* fix displaying null
This commit is contained in:
Mert 2024-03-03 16:42:17 -05:00 • committed by GitHub
parent 07c926bb12
commit 2fa10a254c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 200 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web/src/lib/components/shared-components/change-location.svelte
View file

@ -192,7 +192,18 @@
{:then component}
<svelte:component
this={component.default}
mapMarkers={lat && lng && asset ? [{ id: asset.id, lat, lon: lng }] : []}
mapMarkers={lat && lng && asset
? [
{
id: asset.id,
lat,
lon: lng,
city: asset.exifInfo?.city ?? null,
state: asset.exifInfo?.state ?? null,
country: asset.exifInfo?.country ?? null,
},
]
: []}
{zoom}
bind:addClipMapMarker
center={lat && lng ? { lat, lng } : undefined}

12
web/src/lib/components/shared-components/map/map.svelte
View file

@ -88,7 +88,7 @@
}
}
type FeaturePoint = Feature<Point, { id: string }>;
type FeaturePoint = Feature<Point, { id: string; city: string | null; state: string | null; country: string | null }>;
const asFeature = (marker: MapMarkerResponseDto): FeaturePoint => {
return {
@ -96,6 +96,9 @@
geometry: { type: 'Point', coordinates: [marker.lon, marker.lat] },
properties: {
id: marker.id,
city: marker.city,
state: marker.state,
country: marker.country,
},
};
};
@ -107,6 +110,9 @@
lat: coords.lat,
lon: coords.lng,
id: featurePoint.properties.id,
city: featurePoint.properties.city,
state: featurePoint.properties.state,
country: featurePoint.properties.country,
};
};
</script>
@ -178,7 +184,9 @@
<img
src={getAssetThumbnailUrl(feature.properties?.id, undefined)}
class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150 object-cover bg-immich-primary"
alt={`Image with id ${feature.properties?.id}`}
alt={feature.properties?.city && feature.properties.country
? `Map marker for images taken in ${feature.properties.city}, ${feature.properties.country}`
: 'Map marker with image'}
/>
{/if}
{#if $$slots.popup}

4
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View file

@ -97,7 +97,7 @@
<div class="absolute inset-y-0 left-0 flex items-center pl-6">
<div class="dark:text-immich-dark-fg/75">
<button class="flex items-center">
<Icon path={mdiMagnify} size="1.5em" />
<Icon ariaLabel="search" path={mdiMagnify} size="1.5em" />
</button>
</div>
</div>
@ -134,7 +134,7 @@
type="reset"
class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
>
<Icon path={mdiClose} size="1.5em" />
<Icon ariaLabel="clear" path={mdiClose} size="1.5em" />
</button>
</div>
{/if}