steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-11-04 05:21:09 +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"
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>

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

@@ -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">

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

@@ -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>

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

@@ -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>