From 74d37f1d45dc81456f3aecba1e8e2f7118c9a297 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 23 Sep 2024 17:46:10 +0200
Subject: [PATCH] more aria labels

---
 .../lib/components/ElevationProfile.svelte    |  40 ++---
 website/src/lib/components/Footer.svelte      |   2 +-
 .../src/lib/components/GPXStatistics.svelte   | 148 +++++++++---------
 .../src/lib/components/LanguageSelect.svelte  |   2 +-
 website/src/lib/components/ModeSwitch.svelte  |   1 +
 website/src/lib/components/Tooltip.svelte     |  10 +-
 .../layer-control/LayerTreeNode.svelte        |   1 +
 .../StreetViewControl.svelte                  |  14 +-
 .../toolbar/tools/routing/Routing.svelte      |  21 +--
 website/src/locales/en.json                   |   1 +
 10 files changed, 116 insertions(+), 124 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index 430fe940..523b262f 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -626,15 +626,13 @@
 				bind:value={elevationFill}
 			>
 				<ToggleGroup.Item class="p-0 w-5 h-5" value="slope" aria-label={$_('chart.show_slope')}>
-					<Tooltip side="left">
-						<TriangleRight slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_slope')}</span>
+					<Tooltip side="left" label={$_('chart.show_slope')}>
+						<TriangleRight size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 				<ToggleGroup.Item class="p-0 w-5 h-5" value="surface" aria-label={$_('chart.show_surface')}>
-					<Tooltip side="left">
-						<BrickWall slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_surface')}</span>
+					<Tooltip side="left" label={$_('chart.show_surface')}>
+						<BrickWall size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 			</ToggleGroup.Root>
@@ -650,23 +648,21 @@
 					value="speed"
 					aria-label={$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
 				>
-					<Tooltip side="left">
-						<Zap slot="data" size="15" />
-						<span slot="tooltip">
-							{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
-						</span>
+					<Tooltip
+						side="left"
+						label={$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
+					>
+						<Zap size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 				<ToggleGroup.Item class="p-0 w-5 h-5" value="hr" aria-label={$_('chart.show_heartrate')}>
-					<Tooltip side="left">
-						<HeartPulse slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_heartrate')}</span>
+					<Tooltip side="left" label={$_('chart.show_heartrate')}>
+						<HeartPulse size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 				<ToggleGroup.Item class="p-0 w-5 h-5" value="cad" aria-label={$_('chart.show_cadence')}>
-					<Tooltip side="left">
-						<Orbit slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_cadence')}</span>
+					<Tooltip side="left" label={$_('chart.show_cadence')}>
+						<Orbit size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 				<ToggleGroup.Item
@@ -674,15 +670,13 @@
 					value="atemp"
 					aria-label={$_('chart.show_temperature')}
 				>
-					<Tooltip side="left">
-						<Thermometer slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_temperature')}</span>
+					<Tooltip side="left" label={$_('chart.show_temperature')}>
+						<Thermometer size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 				<ToggleGroup.Item class="p-0 w-5 h-5" value="power" aria-label={$_('chart.show_power')}>
-					<Tooltip side="left">
-						<SquareActivity slot="data" size="15" />
-						<span slot="tooltip">{$_('chart.show_power')}</span>
+					<Tooltip side="left" label={$_('chart.show_power')}>
+						<SquareActivity size="15" />
 					</Tooltip>
 				</ToggleGroup.Item>
 			</ToggleGroup.Root>
diff --git a/website/src/lib/components/Footer.svelte b/website/src/lib/components/Footer.svelte
index 7aa1497d..a460c7bd 100644
--- a/website/src/lib/components/Footer.svelte
+++ b/website/src/lib/components/Footer.svelte
@@ -11,7 +11,7 @@
 	<div class="mx-6 border-t">
 		<div class="mx-12 py-10 flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
 			<div class="grow flex flex-col items-start">
-				<Logo class="h-8" />
+				<Logo class="h-8" width="153" />
 				<Button
 					variant="link"
 					class="h-6 px-0 text-muted-foreground"
diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte
index 69959ac0..8804fb2f 100644
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -1,90 +1,82 @@
 <script lang="ts">
-    import * as Card from '$lib/components/ui/card';
-    import Tooltip from '$lib/components/Tooltip.svelte';
-    import WithUnits from '$lib/components/WithUnits.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import WithUnits from '$lib/components/WithUnits.svelte';
 
-    import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
+	import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
 
-    import { _ } from 'svelte-i18n';
-    import type { GPXStatistics } from 'gpx';
-    import type { Writable } from 'svelte/store';
-    import { settings } from '$lib/db';
+	import { _ } from 'svelte-i18n';
+	import type { GPXStatistics } from 'gpx';
+	import type { Writable } from 'svelte/store';
+	import { settings } from '$lib/db';
 
-    export let gpxStatistics: Writable<GPXStatistics>;
-    export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-    export let orientation: 'horizontal' | 'vertical';
-    export let panelSize: number;
+	export let gpxStatistics: Writable<GPXStatistics>;
+	export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+	export let orientation: 'horizontal' | 'vertical';
+	export let panelSize: number;
 
-    const { velocityUnits } = settings;
+	const { velocityUnits } = settings;
 
-    let statistics: GPXStatistics;
+	let statistics: GPXStatistics;
 
-    $: if ($slicedGPXStatistics !== undefined) {
-        statistics = $slicedGPXStatistics[0];
-    } else {
-        statistics = $gpxStatistics;
-    }
+	$: if ($slicedGPXStatistics !== undefined) {
+		statistics = $slicedGPXStatistics[0];
+	} else {
+		statistics = $gpxStatistics;
+	}
 </script>
 
 <Card.Root
-    class="h-full {orientation === 'vertical'
-        ? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
-        : 'w-full'} border-none shadow-none"
+	class="h-full {orientation === 'vertical'
+		? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
+		: 'w-full'} border-none shadow-none"
 >
-    <Card.Content
-        class="h-full flex {orientation === 'vertical'
-            ? 'flex-col justify-center'
-            : 'flex-row w-full justify-between'} gap-4  p-0"
-    >
-        <Tooltip>
-            <span slot="data" class="flex flex-row items-center">
-                <Ruler size="18" class="mr-1" />
-                <WithUnits value={statistics.global.distance.total} type="distance" />
-            </span>
-            <span slot="tooltip">{$_('quantities.distance')}</span>
-        </Tooltip>
-        <Tooltip>
-            <span slot="data" class="flex flex-row items-center">
-                <MoveUpRight size="18" class="mr-1" />
-                <WithUnits value={statistics.global.elevation.gain} type="elevation" />
-                <MoveDownRight size="18" class="mx-1" />
-                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
-            </span>
-            <span slot="tooltip">{$_('quantities.elevation_gain_loss')}</span>
-        </Tooltip>
-        {#if panelSize > 120 || orientation === 'horizontal'}
-            <Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}>
-                <span slot="data" class="flex flex-row items-center">
-                    <Zap size="18" class="mr-1" />
-                    <WithUnits
-                        value={statistics.global.speed.moving}
-                        type="speed"
-                        showUnits={false}
-                    />
-                    <span class="mx-1">/</span>
-                    <WithUnits value={statistics.global.speed.total} type="speed" />
-                </span>
-                <span slot="tooltip">
-                    {$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
-                        'quantities.moving'
-                    )} / {$_('quantities.total')})
-                </span>
-            </Tooltip>
-        {/if}
-        {#if panelSize > 160 || orientation === 'horizontal'}
-            <Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}>
-                <span slot="data" class="flex flex-row items-center">
-                    <Timer size="18" class="mr-1" />
-                    <WithUnits value={statistics.global.time.moving} type="time" />
-                    <span class="mx-1">/</span>
-                    <WithUnits value={statistics.global.time.total} type="time" />
-                </span>
-                <span slot="tooltip"
-                    >{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
-                        'quantities.total'
-                    )})</span
-                >
-            </Tooltip>
-        {/if}
-    </Card.Content>
+	<Card.Content
+		class="h-full flex {orientation === 'vertical'
+			? 'flex-col justify-center'
+			: 'flex-row w-full justify-between'} gap-4  p-0"
+	>
+		<Tooltip label={$_('quantities.distance')}>
+			<span class="flex flex-row items-center">
+				<Ruler size="18" class="mr-1" />
+				<WithUnits value={statistics.global.distance.total} type="distance" />
+			</span>
+		</Tooltip>
+		<Tooltip label={$_('quantities.elevation_gain_loss')}>
+			<span class="flex flex-row items-center">
+				<MoveUpRight size="18" class="mr-1" />
+				<WithUnits value={statistics.global.elevation.gain} type="elevation" />
+				<MoveDownRight size="18" class="mx-1" />
+				<WithUnits value={statistics.global.elevation.loss} type="elevation" />
+			</span>
+		</Tooltip>
+		{#if panelSize > 120 || orientation === 'horizontal'}
+			<Tooltip
+				class={orientation === 'horizontal' ? 'hidden xs:block' : ''}
+				label="{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
+					'quantities.moving'
+				)} / {$_('quantities.total')})"
+			>
+				<span class="flex flex-row items-center">
+					<Zap size="18" class="mr-1" />
+					<WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} />
+					<span class="mx-1">/</span>
+					<WithUnits value={statistics.global.speed.total} type="speed" />
+				</span>
+			</Tooltip>
+		{/if}
+		{#if panelSize > 160 || orientation === 'horizontal'}
+			<Tooltip
+				class={orientation === 'horizontal' ? 'hidden md:block' : ''}
+				label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})"
+			>
+				<span class="flex flex-row items-center">
+					<Timer size="18" class="mr-1" />
+					<WithUnits value={statistics.global.time.moving} type="time" />
+					<span class="mx-1">/</span>
+					<WithUnits value={statistics.global.time.total} type="time" />
+				</span>
+			</Tooltip>
+		{/if}
+	</Card.Content>
 </Card.Root>
diff --git a/website/src/lib/components/LanguageSelect.svelte b/website/src/lib/components/LanguageSelect.svelte
index 16b6b9db..141550ae 100644
--- a/website/src/lib/components/LanguageSelect.svelte
+++ b/website/src/lib/components/LanguageSelect.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Select.Root bind:selected>
-	<Select.Trigger class="w-[180px] {$$props.class ?? ''}">
+	<Select.Trigger class="w-[180px] {$$props.class ?? ''}" aria-label={$_('menu.language')}>
 		<Languages size="16" />
 		<Select.Value class="ml-2 mr-auto" />
 	</Select.Trigger>
diff --git a/website/src/lib/components/ModeSwitch.svelte b/website/src/lib/components/ModeSwitch.svelte
index 127f8266..8151974e 100644
--- a/website/src/lib/components/ModeSwitch.svelte
+++ b/website/src/lib/components/ModeSwitch.svelte
@@ -15,6 +15,7 @@
 	on:click={() => {
 		setMode(selectedMode === 'light' ? 'dark' : 'light');
 	}}
+	aria-label={$_('menu.mode')}
 >
 	{#if selectedMode === 'light'}
 		<Sun {size} />
diff --git a/website/src/lib/components/Tooltip.svelte b/website/src/lib/components/Tooltip.svelte
index d021624c..ee8fd41d 100644
--- a/website/src/lib/components/Tooltip.svelte
+++ b/website/src/lib/components/Tooltip.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
+	export let label: string;
 	export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
 </script>
 
 <Tooltip.Root>
-	<Tooltip.Trigger {...$$restProps}>
-		<slot name="data" />
+	<Tooltip.Trigger {...$$restProps} aria-label={label}>
+		<slot />
 	</Tooltip.Trigger>
 	<Tooltip.Content {side}>
-		<slot name="tooltip" />
+		<div class="flex flex-row items-center">
+			<span>{label}</span>
+			<slot name="extra" />
+		</div>
 	</Tooltip.Content>
 </Tooltip.Root>
diff --git a/website/src/lib/components/layer-control/LayerTreeNode.svelte b/website/src/lib/components/layer-control/LayerTreeNode.svelte
index d63de8f9..23303943 100644
--- a/website/src/lib/components/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/layer-control/LayerTreeNode.svelte
@@ -46,6 +46,7 @@
 							value={id}
 							bind:checked={checked[id]}
 							class="scale-90"
+							aria-label={$_(`layers.label.${id}`)}
 						/>
 					{:else}
 						<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
diff --git a/website/src/lib/components/street-view-control/StreetViewControl.svelte b/website/src/lib/components/street-view-control/StreetViewControl.svelte
index 6766c7dd..92e6be07 100644
--- a/website/src/lib/components/street-view-control/StreetViewControl.svelte
+++ b/website/src/lib/components/street-view-control/StreetViewControl.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 	import { Toggle } from '$lib/components/ui/toggle';
 	import { PersonStanding, X } from 'lucide-svelte';
 	import { MapillaryLayer } from './Mapillary';
 	import { GoogleRedirect } from './Google';
 	import { map, streetViewEnabled } from '$lib/stores';
 	import { settings } from '$lib/db';
+	import { _ } from 'svelte-i18n';
 
 	const { streetViewSource } = settings;
 
@@ -38,9 +40,15 @@
 </script>
 
 <CustomControl class="w-[29px] h-[29px] shrink-0">
-	<Toggle bind:pressed={$streetViewEnabled} class="w-full h-full rounded p-0">
-		<PersonStanding size="22" />
-	</Toggle>
+	<Tooltip class="w-full h-full" side="left" label={$_('menu.toggle_street_view')}>
+		<Toggle
+			bind:pressed={$streetViewEnabled}
+			class="w-full h-full rounded p-0"
+			aria-label={$_('menu.toggle_street_view')}
+		>
+			<PersonStanding size="22" />
+		</Toggle>
+	</Tooltip>
 </CustomControl>
 
 <div
diff --git a/website/src/lib/components/toolbar/tools/routing/Routing.svelte b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
index c254af57..4d59d7ba 100644
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -117,8 +117,8 @@
 		in:flyAndScale={{ x: -2, y: 0, duration: 50 }}
 	>
 		<div class="grow flex flex-col gap-3">
-			<Tooltip>
-				<Label slot="data" class="w-full flex flex-row justify-between items-center gap-2">
+			<Tooltip label={$_('toolbar.routing.use_routing_tooltip')}>
+				<Label class="w-full flex flex-row justify-between items-center gap-2">
 					<span class="flex flex-row gap-1">
 						{#if $routing}
 							<Route size="16" />
@@ -129,10 +129,7 @@
 					</span>
 					<Switch class="scale-90" bind:checked={$routing} />
 				</Label>
-				<span slot="tooltip" class="flex flex-row items-center">
-					{$_('toolbar.routing.use_routing_tooltip')}
-					<Shortcut key="F5" />
-				</span>
+				<Shortcut slot="extra" key="F5" />
 			</Tooltip>
 			{#if $routing}
 				<div class="flex flex-col gap-3" in:slide>
@@ -172,9 +169,8 @@
 			{/if}
 		</div>
 		<div class="flex flex-row flex-wrap justify-center gap-1">
-			<Tooltip>
+			<Tooltip label={$_('toolbar.routing.reverse.tooltip')}>
 				<Button
-					slot="data"
 					variant="outline"
 					class="flex flex-row gap-1 text-xs px-2"
 					disabled={!validSelection}
@@ -182,11 +178,9 @@
 				>
 					<ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')}
 				</Button>
-				<span slot="tooltip">{$_('toolbar.routing.reverse.tooltip')}</span>
 			</Tooltip>
-			<Tooltip>
+			<Tooltip label={$_('toolbar.routing.route_back_to_start.tooltip')}>
 				<Button
-					slot="data"
 					variant="outline"
 					class="flex flex-row gap-1 text-xs px-2"
 					disabled={!validSelection}
@@ -220,11 +214,9 @@
 				>
 					<Home size="12" />{$_('toolbar.routing.route_back_to_start.button')}
 				</Button>
-				<span slot="tooltip">{$_('toolbar.routing.route_back_to_start.tooltip')}</span>
 			</Tooltip>
-			<Tooltip>
+			<Tooltip label={$_('toolbar.routing.round_trip.tooltip')}>
 				<Button
-					slot="data"
 					variant="outline"
 					class="flex flex-row gap-1 text-xs px-2"
 					disabled={!validSelection}
@@ -232,7 +224,6 @@
 				>
 					<Repeat size="12" />{$_('toolbar.routing.round_trip.button')}
 				</Button>
-				<span slot="tooltip">{$_('toolbar.routing.round_trip.tooltip')}</span>
 			</Tooltip>
 		</div>
 		<div class="w-full flex flex-row gap-2 items-end justify-between">
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index fa21aef2..4d2f463f 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -54,6 +54,7 @@
         "street_view_source": "Street view source",
         "mapillary": "Mapillary",
         "google": "Google",
+        "toggle_street_view": "Street view",
         "layers": "Map layers...",
         "distance_markers": "Distance markers",
         "direction_markers": "Direction arrows",