steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

add aria labels

Browse Source
This commit is contained in:
vcoppe
2024-09-23 16:41:12 +02:00
parent 2e1ead31ea
commit 195671acb6
4 changed files with 75 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
website/src/lib/components/ElevationProfile.svelte
View File

@@ -625,13 +625,13 @@
type="single" type="single"
bind:value={elevationFill} 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"> <Tooltip side="left">
<TriangleRight slot="data" size="15" /> <TriangleRight slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_slope')}</span> <span slot="tooltip">{$_('chart.show_slope')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </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"> <Tooltip side="left">
<BrickWall slot="data" size="15" /> <BrickWall slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_surface')}</span> <span slot="tooltip">{$_('chart.show_surface')}</span>
@@ -645,33 +645,41 @@
type="multiple" type="multiple"
bind:value={additionalDatasets} 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"> <Tooltip side="left">
<Zap slot="data" size="15" /> <Zap slot="data" size="15" />
<span slot="tooltip" <span slot="tooltip">
>{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}</span {$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
> </span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </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"> <Tooltip side="left">
<HeartPulse slot="data" size="15" /> <HeartPulse slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_heartrate')}</span> <span slot="tooltip">{$_('chart.show_heartrate')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </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"> <Tooltip side="left">
<Orbit slot="data" size="15" /> <Orbit slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_cadence')}</span> <span slot="tooltip">{$_('chart.show_cadence')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </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"> <Tooltip side="left">
<Thermometer slot="data" size="15" /> <Thermometer slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_temperature')}</span> <span slot="tooltip">{$_('chart.show_temperature')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </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"> <Tooltip side="left">
<SquareActivity slot="data" size="15" /> <SquareActivity slot="data" size="15" />
<span slot="tooltip">{$_('chart.show_power')}</span> <span slot="tooltip">{$_('chart.show_power')}</span>

10
website/src/lib/components/Menu.svelte
View File

@@ -134,7 +134,7 @@
</a> </a>
<Menubar.Root class="border-none h-fit p-0"> <Menubar.Root class="border-none h-fit p-0">
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger> <Menubar.Trigger aria-label={$_('gpx.file')}>
<File size="18" class="md:hidden" /> <File size="18" class="md:hidden" />
<span class="hidden md:block">{$_('gpx.file')}</span> <span class="hidden md:block">{$_('gpx.file')}</span>
</Menubar.Trigger> </Menubar.Trigger>
@@ -187,7 +187,7 @@
</Menubar.Content> </Menubar.Content>
</Menubar.Menu> </Menubar.Menu>
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger> <Menubar.Trigger aria-label={$_('menu.edit')}>
<FilePen size="18" class="md:hidden" /> <FilePen size="18" class="md:hidden" />
<span class="hidden md:block">{$_('menu.edit')}</span> <span class="hidden md:block">{$_('menu.edit')}</span>
</Menubar.Trigger> </Menubar.Trigger>
@@ -317,7 +317,7 @@
</Menubar.Content> </Menubar.Content>
</Menubar.Menu> </Menubar.Menu>
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger> <Menubar.Trigger aria-label={$_('menu.view')}>
<View size="18" class="md:hidden" /> <View size="18" class="md:hidden" />
<span class="hidden md:block">{$_('menu.view')}</span> <span class="hidden md:block">{$_('menu.view')}</span>
</Menubar.Trigger> </Menubar.Trigger>
@@ -355,7 +355,7 @@
</Menubar.Content> </Menubar.Content>
</Menubar.Menu> </Menubar.Menu>
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger> <Menubar.Trigger aria-label={$_('menu.settings')}>
<Settings size="18" class="md:hidden" /> <Settings size="18" class="md:hidden" />
<span class="hidden md:block"> <span class="hidden md:block">
{$_('menu.settings')} {$_('menu.settings')}
@@ -459,6 +459,7 @@
href="./help" href="./help"
target="_blank" target="_blank"
class="cursor-default h-fit rounded-sm px-3 py-0.5" class="cursor-default h-fit rounded-sm px-3 py-0.5"
aria-label={$_('menu.help')}
> >
<BookOpenText size="18" class="md:hidden" /> <BookOpenText size="18" class="md:hidden" />
<span class="hidden md:block"> <span class="hidden md:block">
@@ -470,6 +471,7 @@
href="https://ko-fi.com/gpxstudio" href="https://ko-fi.com/gpxstudio"
target="_blank" target="_blank"
class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support px-3 py-0.5" 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" /> <HeartHandshake size="18" class="md:hidden" />
<span class="hidden md:flex flex-row items-center"> <span class="hidden md:flex flex-row items-center">

105
website/src/lib/components/toolbar/Toolbar.svelte
View File

@@ -1,63 +1,54 @@
<script lang="ts"> <script lang="ts">
import { Tool } from '$lib/stores'; import { Tool } from '$lib/stores';
import ToolbarItem from './ToolbarItem.svelte'; import ToolbarItem from './ToolbarItem.svelte';
import { import {
Group, Group,
CalendarClock, CalendarClock,
Pencil, Pencil,
SquareDashedMousePointer, SquareDashedMousePointer,
Ungroup, Ungroup,
MapPin, MapPin,
Filter, Filter,
Scissors, Scissors,
MountainSnow MountainSnow
} from 'lucide-svelte'; } from 'lucide-svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import ToolbarItemMenu from './ToolbarItemMenu.svelte'; import ToolbarItemMenu from './ToolbarItemMenu.svelte';
</script> </script>
<div class="flex flex-row w-full items-center pr-12"> <div class="flex flex-row w-full items-center pr-12">
<div <div
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ?? 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}> <ToolbarItem tool={Tool.ROUTING} label={$_('toolbar.routing.tooltip')}>
<Pencil slot="icon" size="18" class="h-" /> <Pencil slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span> </ToolbarItem>
</ToolbarItem> <ToolbarItem tool={Tool.WAYPOINT} label={$_('toolbar.waypoint.tooltip')}>
<ToolbarItem tool={Tool.WAYPOINT}> <MapPin slot="icon" size="18" />
<MapPin slot="icon" size="18" /> </ToolbarItem>
<span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span> <ToolbarItem tool={Tool.SCISSORS} label={$_('toolbar.scissors.tooltip')}>
</ToolbarItem> <Scissors slot="icon" size="18" />
<ToolbarItem tool={Tool.SCISSORS}> </ToolbarItem>
<Scissors slot="icon" size="18" /> <ToolbarItem tool={Tool.TIME} label={$_('toolbar.time.tooltip')}>
<span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span> <CalendarClock slot="icon" size="18" />
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.TIME}> <ToolbarItem tool={Tool.MERGE} label={$_('toolbar.merge.tooltip')}>
<CalendarClock slot="icon" size="18" /> <Group slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.time.tooltip')}</span> </ToolbarItem>
</ToolbarItem> <ToolbarItem tool={Tool.EXTRACT} label={$_('toolbar.extract.tooltip')}>
<ToolbarItem tool={Tool.MERGE}> <Ungroup slot="icon" size="18" />
<Group slot="icon" size="18" /> </ToolbarItem>
<span slot="tooltip">{$_('toolbar.merge.tooltip')}</span> <ToolbarItem tool={Tool.ELEVATION} label={$_('toolbar.elevation.button')}>
</ToolbarItem> <MountainSnow slot="icon" size="18" />
<ToolbarItem tool={Tool.EXTRACT}> </ToolbarItem>
<Ungroup slot="icon" size="18" /> <ToolbarItem tool={Tool.REDUCE} label={$_('toolbar.reduce.tooltip')}>
<span slot="tooltip">{$_('toolbar.extract.tooltip')}</span> <Filter slot="icon" size="18" />
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.ELEVATION}> <ToolbarItem tool={Tool.CLEAN} label={$_('toolbar.clean.tooltip')}>
<MountainSnow slot="icon" size="18" /> <SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.elevation.button')}</span> </ToolbarItem>
</ToolbarItem> </div>
<ToolbarItem tool={Tool.REDUCE}> <ToolbarItemMenu class={$$props.class ?? ''} />
<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> </div>

4
website/src/lib/components/toolbar/ToolbarItem.svelte
View File

@@ -4,6 +4,7 @@
import { currentTool, type Tool } from '$lib/stores'; import { currentTool, type Tool } from '$lib/stores';
export let tool: Tool; export let tool: Tool;
export let label: string;
function toggleTool() { function toggleTool() {
currentTool.update((current) => (current === tool ? null : tool)); currentTool.update((current) => (current === tool ? null : tool));
@@ -17,11 +18,12 @@
variant="ghost" variant="ghost"
class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}" class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
on:click={toggleTool} on:click={toggleTool}
aria-label={label}
> >
<slot name="icon" /> <slot name="icon" />
</Button> </Button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Content side="right"> <Tooltip.Content side="right">
<slot name="tooltip" /> <span>{label}</span>
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Root> </Tooltip.Root>