From 195671acb6111c8cef7342a9f91425938f8faf3c Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 23 Sep 2024 16:41:12 +0200
Subject: [PATCH] add aria labels

---
 .../lib/components/ElevationProfile.svelte    |  28 +++--
 website/src/lib/components/Menu.svelte        |  10 +-
 .../src/lib/components/toolbar/Toolbar.svelte | 105 ++++++++----------
 .../lib/components/toolbar/ToolbarItem.svelte |   4 +-
 4 files changed, 75 insertions(+), 72 deletions(-)

diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte
index 5cab1a85..430fe940 100644
--- a/website/src/lib/components/ElevationProfile.svelte
+++ b/website/src/lib/components/ElevationProfile.svelte
@@ -625,13 +625,13 @@
 				type="single"
 				bind:value={elevationFill}
 			>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="slope">
+				<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>
 				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="surface">
+				<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>
@@ -645,33 +645,41 @@
 				type="multiple"
 				bind:value={additionalDatasets}
 			>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="speed">
+				<ToggleGroup.Item
+					class="p-0 w-5 h-5"
+					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
-						>
+						<span slot="tooltip">
+							{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
+						</span>
 					</Tooltip>
 				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="hr">
+				<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>
 				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="cad">
+				<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>
 				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="atemp">
+				<ToggleGroup.Item
+					class="p-0 w-5 h-5"
+					value="atemp"
+					aria-label={$_('chart.show_temperature')}
+				>
 					<Tooltip side="left">
 						<Thermometer slot="data" size="15" />
 						<span slot="tooltip">{$_('chart.show_temperature')}</span>
 					</Tooltip>
 				</ToggleGroup.Item>
-				<ToggleGroup.Item class="p-0 w-5 h-5" value="power">
+				<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>
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 4d5f8943..dc580fcd 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -134,7 +134,7 @@
 		</a>
 		<Menubar.Root class="border-none h-fit p-0">
 			<Menubar.Menu>
-				<Menubar.Trigger>
+				<Menubar.Trigger aria-label={$_('gpx.file')}>
 					<File size="18" class="md:hidden" />
 					<span class="hidden md:block">{$_('gpx.file')}</span>
 				</Menubar.Trigger>
@@ -187,7 +187,7 @@
 				</Menubar.Content>
 			</Menubar.Menu>
 			<Menubar.Menu>
-				<Menubar.Trigger>
+				<Menubar.Trigger aria-label={$_('menu.edit')}>
 					<FilePen size="18" class="md:hidden" />
 					<span class="hidden md:block">{$_('menu.edit')}</span>
 				</Menubar.Trigger>
@@ -317,7 +317,7 @@
 				</Menubar.Content>
 			</Menubar.Menu>
 			<Menubar.Menu>
-				<Menubar.Trigger>
+				<Menubar.Trigger aria-label={$_('menu.view')}>
 					<View size="18" class="md:hidden" />
 					<span class="hidden md:block">{$_('menu.view')}</span>
 				</Menubar.Trigger>
@@ -355,7 +355,7 @@
 				</Menubar.Content>
 			</Menubar.Menu>
 			<Menubar.Menu>
-				<Menubar.Trigger>
+				<Menubar.Trigger aria-label={$_('menu.settings')}>
 					<Settings size="18" class="md:hidden" />
 					<span class="hidden md:block">
 						{$_('menu.settings')}
@@ -459,6 +459,7 @@
 				href="./help"
 				target="_blank"
 				class="cursor-default h-fit rounded-sm px-3 py-0.5"
+				aria-label={$_('menu.help')}
 			>
 				<BookOpenText size="18" class="md:hidden" />
 				<span class="hidden md:block">
@@ -470,6 +471,7 @@
 				href="https://ko-fi.com/gpxstudio"
 				target="_blank"
 				class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support px-3 py-0.5"
+				aria-label={$_('menu.donate')}
 			>
 				<HeartHandshake size="18" class="md:hidden" />
 				<span class="hidden md:flex flex-row items-center">
diff --git a/website/src/lib/components/toolbar/Toolbar.svelte b/website/src/lib/components/toolbar/Toolbar.svelte
index 0dde38f2..7b8aab2d 100644
--- a/website/src/lib/components/toolbar/Toolbar.svelte
+++ b/website/src/lib/components/toolbar/Toolbar.svelte
@@ -1,63 +1,54 @@
 <script lang="ts">
-    import { Tool } from '$lib/stores';
-    import ToolbarItem from './ToolbarItem.svelte';
-    import {
-        Group,
-        CalendarClock,
-        Pencil,
-        SquareDashedMousePointer,
-        Ungroup,
-        MapPin,
-        Filter,
-        Scissors,
-        MountainSnow
-    } from 'lucide-svelte';
+	import { Tool } from '$lib/stores';
+	import ToolbarItem from './ToolbarItem.svelte';
+	import {
+		Group,
+		CalendarClock,
+		Pencil,
+		SquareDashedMousePointer,
+		Ungroup,
+		MapPin,
+		Filter,
+		Scissors,
+		MountainSnow
+	} from 'lucide-svelte';
 
-    import { _ } from 'svelte-i18n';
-    import ToolbarItemMenu from './ToolbarItemMenu.svelte';
+	import { _ } from 'svelte-i18n';
+	import ToolbarItemMenu from './ToolbarItemMenu.svelte';
 </script>
 
 <div class="flex flex-row w-full items-center pr-12">
-    <div
-        class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
-            ''}"
-    >
-        <ToolbarItem tool={Tool.ROUTING}>
-            <Pencil slot="icon" size="18" class="h-" />
-            <span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.WAYPOINT}>
-            <MapPin slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.SCISSORS}>
-            <Scissors slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.TIME}>
-            <CalendarClock slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.time.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.MERGE}>
-            <Group slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.merge.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.EXTRACT}>
-            <Ungroup slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.extract.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.ELEVATION}>
-            <MountainSnow slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.elevation.button')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.REDUCE}>
-            <Filter slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span>
-        </ToolbarItem>
-        <ToolbarItem tool={Tool.CLEAN}>
-            <SquareDashedMousePointer slot="icon" size="18" />
-            <span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
-        </ToolbarItem>
-    </div>
-    <ToolbarItemMenu class={$$props.class ?? ''} />
+	<div
+		class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
+			''}"
+	>
+		<ToolbarItem tool={Tool.ROUTING} label={$_('toolbar.routing.tooltip')}>
+			<Pencil slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.WAYPOINT} label={$_('toolbar.waypoint.tooltip')}>
+			<MapPin slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.SCISSORS} label={$_('toolbar.scissors.tooltip')}>
+			<Scissors slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.TIME} label={$_('toolbar.time.tooltip')}>
+			<CalendarClock slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.MERGE} label={$_('toolbar.merge.tooltip')}>
+			<Group slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.EXTRACT} label={$_('toolbar.extract.tooltip')}>
+			<Ungroup slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.ELEVATION} label={$_('toolbar.elevation.button')}>
+			<MountainSnow slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.REDUCE} label={$_('toolbar.reduce.tooltip')}>
+			<Filter slot="icon" size="18" />
+		</ToolbarItem>
+		<ToolbarItem tool={Tool.CLEAN} label={$_('toolbar.clean.tooltip')}>
+			<SquareDashedMousePointer slot="icon" size="18" />
+		</ToolbarItem>
+	</div>
+	<ToolbarItemMenu class={$$props.class ?? ''} />
 </div>
diff --git a/website/src/lib/components/toolbar/ToolbarItem.svelte b/website/src/lib/components/toolbar/ToolbarItem.svelte
index f4f413fa..02acf26c 100644
--- a/website/src/lib/components/toolbar/ToolbarItem.svelte
+++ b/website/src/lib/components/toolbar/ToolbarItem.svelte
@@ -4,6 +4,7 @@
 	import { currentTool, type Tool } from '$lib/stores';
 
 	export let tool: Tool;
+	export let label: string;
 
 	function toggleTool() {
 		currentTool.update((current) => (current === tool ? null : tool));
@@ -17,11 +18,12 @@
 			variant="ghost"
 			class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
 			on:click={toggleTool}
+			aria-label={label}
 		>
 			<slot name="icon" />
 		</Button>
 	</Tooltip.Trigger>
 	<Tooltip.Content side="right">
-		<slot name="tooltip" />
+		<span>{label}</span>
 	</Tooltip.Content>
 </Tooltip.Root>