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

more aria labels

Browse Source
This commit is contained in:
vcoppe
2024-09-23 17:46:10 +02:00
parent 195671acb6
commit 74d37f1d45
10 changed files with 116 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -626,15 +626,13 @@
bind:value={elevationFill} bind:value={elevationFill}
> >
<ToggleGroup.Item class="p-0 w-5 h-5" value="slope" aria-label={$_('chart.show_slope')}> <ToggleGroup.Item class="p-0 w-5 h-5" value="slope" aria-label={$_('chart.show_slope')}>
<Tooltip side="left"> <Tooltip side="left" label={$_('chart.show_slope')}>
<TriangleRight slot="data" size="15" /> <TriangleRight size="15" />
<span slot="tooltip">{$_('chart.show_slope')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-5 h-5" value="surface" aria-label={$_('chart.show_surface')}> <ToggleGroup.Item class="p-0 w-5 h-5" value="surface" aria-label={$_('chart.show_surface')}>
<Tooltip side="left"> <Tooltip side="left" label={$_('chart.show_surface')}>
<BrickWall slot="data" size="15" /> <BrickWall size="15" />
<span slot="tooltip">{$_('chart.show_surface')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
</ToggleGroup.Root> </ToggleGroup.Root>
@@ -650,23 +648,21 @@
value="speed" value="speed"
aria-label={$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')} aria-label={$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
> >
<Tooltip side="left"> <Tooltip
<Zap slot="data" size="15" /> side="left"
<span slot="tooltip"> label={$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')}
{$velocityUnits === 'speed' ? $_('chart.show_speed') : $_('chart.show_pace')} >
</span> <Zap size="15" />
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-5 h-5" value="hr" aria-label={$_('chart.show_heartrate')}> <ToggleGroup.Item class="p-0 w-5 h-5" value="hr" aria-label={$_('chart.show_heartrate')}>
<Tooltip side="left"> <Tooltip side="left" label={$_('chart.show_heartrate')}>
<HeartPulse slot="data" size="15" /> <HeartPulse size="15" />
<span slot="tooltip">{$_('chart.show_heartrate')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-5 h-5" value="cad" aria-label={$_('chart.show_cadence')}> <ToggleGroup.Item class="p-0 w-5 h-5" value="cad" aria-label={$_('chart.show_cadence')}>
<Tooltip side="left"> <Tooltip side="left" label={$_('chart.show_cadence')}>
<Orbit slot="data" size="15" /> <Orbit size="15" />
<span slot="tooltip">{$_('chart.show_cadence')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item <ToggleGroup.Item
@@ -674,15 +670,13 @@
value="atemp" value="atemp"
aria-label={$_('chart.show_temperature')} aria-label={$_('chart.show_temperature')}
> >
<Tooltip side="left"> <Tooltip side="left" label={$_('chart.show_temperature')}>
<Thermometer slot="data" size="15" /> <Thermometer size="15" />
<span slot="tooltip">{$_('chart.show_temperature')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
<ToggleGroup.Item class="p-0 w-5 h-5" value="power" aria-label={$_('chart.show_power')}> <ToggleGroup.Item class="p-0 w-5 h-5" value="power" aria-label={$_('chart.show_power')}>
<Tooltip side="left"> <Tooltip side="left" label={$_('chart.show_power')}>
<SquareActivity slot="data" size="15" /> <SquareActivity size="15" />
<span slot="tooltip">{$_('chart.show_power')}</span>
</Tooltip> </Tooltip>
</ToggleGroup.Item> </ToggleGroup.Item>
</ToggleGroup.Root> </ToggleGroup.Root>

2
website/src/lib/components/Footer.svelte
View File

@@ -11,7 +11,7 @@
<div class="mx-6 border-t"> <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="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"> <div class="grow flex flex-col items-start">
<Logo class="h-8" /> <Logo class="h-8" width="153" />
<Button <Button
variant="link" variant="link"
class="h-6 px-0 text-muted-foreground" class="h-6 px-0 text-muted-foreground"

148
website/src/lib/components/GPXStatistics.svelte
View File

@@ -1,90 +1,82 @@
<script lang="ts"> <script lang="ts">
import * as Card from '$lib/components/ui/card'; import * as Card from '$lib/components/ui/card';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import WithUnits from '$lib/components/WithUnits.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 { _ } from 'svelte-i18n';
import type { GPXStatistics } from 'gpx'; import type { GPXStatistics } from 'gpx';
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
import { settings } from '$lib/db'; import { settings } from '$lib/db';
export let gpxStatistics: Writable<GPXStatistics>; export let gpxStatistics: Writable<GPXStatistics>;
export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>; export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
export let orientation: 'horizontal' | 'vertical'; export let orientation: 'horizontal' | 'vertical';
export let panelSize: number; export let panelSize: number;
const { velocityUnits } = settings; const { velocityUnits } = settings;
let statistics: GPXStatistics; let statistics: GPXStatistics;
$: if ($slicedGPXStatistics !== undefined) { $: if ($slicedGPXStatistics !== undefined) {
statistics = $slicedGPXStatistics[0]; statistics = $slicedGPXStatistics[0];
} else { } else {
statistics = $gpxStatistics; statistics = $gpxStatistics;
} }
</script> </script>
<Card.Root <Card.Root
class="h-full {orientation === 'vertical' class="h-full {orientation === 'vertical'
? 'min-w-44 sm:min-w-52 text-sm sm:text-base' ? 'min-w-44 sm:min-w-52 text-sm sm:text-base'
: 'w-full'} border-none shadow-none" : 'w-full'} border-none shadow-none"
> >
<Card.Content <Card.Content
class="h-full flex {orientation === 'vertical' class="h-full flex {orientation === 'vertical'
? 'flex-col justify-center' ? 'flex-col justify-center'
: 'flex-row w-full justify-between'} gap-4 p-0" : 'flex-row w-full justify-between'} gap-4 p-0"
> >
<Tooltip> <Tooltip label={$_('quantities.distance')}>
<span slot="data" class="flex flex-row items-center"> <span class="flex flex-row items-center">
<Ruler size="18" class="mr-1" /> <Ruler size="18" class="mr-1" />
<WithUnits value={statistics.global.distance.total} type="distance" /> <WithUnits value={statistics.global.distance.total} type="distance" />
</span> </span>
<span slot="tooltip">{$_('quantities.distance')}</span> </Tooltip>
</Tooltip> <Tooltip label={$_('quantities.elevation_gain_loss')}>
<Tooltip> <span class="flex flex-row items-center">
<span slot="data" class="flex flex-row items-center"> <MoveUpRight size="18" class="mr-1" />
<MoveUpRight size="18" class="mr-1" /> <WithUnits value={statistics.global.elevation.gain} type="elevation" />
<WithUnits value={statistics.global.elevation.gain} type="elevation" /> <MoveDownRight size="18" class="mx-1" />
<MoveDownRight size="18" class="mx-1" /> <WithUnits value={statistics.global.elevation.loss} type="elevation" />
<WithUnits value={statistics.global.elevation.loss} type="elevation" /> </span>
</span> </Tooltip>
<span slot="tooltip">{$_('quantities.elevation_gain_loss')}</span> {#if panelSize > 120 || orientation === 'horizontal'}
</Tooltip> <Tooltip
{#if panelSize > 120 || orientation === 'horizontal'} class={orientation === 'horizontal' ? 'hidden xs:block' : ''}
<Tooltip class={orientation === 'horizontal' ? 'hidden xs:block' : ''}> label="{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
<span slot="data" class="flex flex-row items-center"> 'quantities.moving'
<Zap size="18" class="mr-1" /> )} / {$_('quantities.total')})"
<WithUnits >
value={statistics.global.speed.moving} <span class="flex flex-row items-center">
type="speed" <Zap size="18" class="mr-1" />
showUnits={false} <WithUnits value={statistics.global.speed.moving} type="speed" showUnits={false} />
/> <span class="mx-1">/</span>
<span class="mx-1">/</span> <WithUnits value={statistics.global.speed.total} type="speed" />
<WithUnits value={statistics.global.speed.total} type="speed" /> </span>
</span> </Tooltip>
<span slot="tooltip"> {/if}
{$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_( {#if panelSize > 160 || orientation === 'horizontal'}
'quantities.moving' <Tooltip
)} / {$_('quantities.total')}) class={orientation === 'horizontal' ? 'hidden md:block' : ''}
</span> label="{$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')})"
</Tooltip> >
{/if} <span class="flex flex-row items-center">
{#if panelSize > 160 || orientation === 'horizontal'} <Timer size="18" class="mr-1" />
<Tooltip class={orientation === 'horizontal' ? 'hidden md:block' : ''}> <WithUnits value={statistics.global.time.moving} type="time" />
<span slot="data" class="flex flex-row items-center"> <span class="mx-1">/</span>
<Timer size="18" class="mr-1" /> <WithUnits value={statistics.global.time.total} type="time" />
<WithUnits value={statistics.global.time.moving} type="time" /> </span>
<span class="mx-1">/</span> </Tooltip>
<WithUnits value={statistics.global.time.total} type="time" /> {/if}
</span> </Card.Content>
<span slot="tooltip"
>{$_('quantities.time')} ({$_('quantities.moving')} / {$_(
'quantities.total'
)})</span
>
</Tooltip>
{/if}
</Card.Content>
</Card.Root> </Card.Root>

2
website/src/lib/components/LanguageSelect.svelte
View File

@@ -20,7 +20,7 @@
</script> </script>
<Select.Root bind:selected> <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" /> <Languages size="16" />
<Select.Value class="ml-2 mr-auto" /> <Select.Value class="ml-2 mr-auto" />
</Select.Trigger> </Select.Trigger>

1
website/src/lib/components/ModeSwitch.svelte
View File

@@ -15,6 +15,7 @@
on:click={() => { on:click={() => {
setMode(selectedMode === 'light' ? 'dark' : 'light'); setMode(selectedMode === 'light' ? 'dark' : 'light');
}} }}
aria-label={$_('menu.mode')}
> >
{#if selectedMode === 'light'} {#if selectedMode === 'light'}
<Sun {size} /> <Sun {size} />

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

@@ -1,14 +1,18 @@
<script lang="ts"> <script lang="ts">
import * as Tooltip from '$lib/components/ui/tooltip/index.js'; import * as Tooltip from '$lib/components/ui/tooltip/index.js';
export let label: string;
export let side: 'top' | 'right' | 'bottom' | 'left' = 'top'; export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
</script> </script>
<Tooltip.Root> <Tooltip.Root>
<Tooltip.Trigger {...$$restProps}> <Tooltip.Trigger {...$$restProps} aria-label={label}>
<slot name="data" /> <slot />
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Content {side}> <Tooltip.Content {side}>
<slot name="tooltip" /> <div class="flex flex-row items-center">
<span>{label}</span>
<slot name="extra" />
</div>
</Tooltip.Content> </Tooltip.Content>
</Tooltip.Root> </Tooltip.Root>

1
website/src/lib/components/layer-control/LayerTreeNode.svelte
View File

@@ -46,6 +46,7 @@
value={id} value={id}
bind:checked={checked[id]} bind:checked={checked[id]}
class="scale-90" class="scale-90"
aria-label={$_(`layers.label.${id}`)}
/> />
{:else} {:else}
<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} /> <input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />

14
website/src/lib/components/street-view-control/StreetViewControl.svelte
View File

@@ -1,11 +1,13 @@
<script lang="ts"> <script lang="ts">
import CustomControl from '$lib/components/custom-control/CustomControl.svelte'; import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
import { Toggle } from '$lib/components/ui/toggle'; import { Toggle } from '$lib/components/ui/toggle';
import { PersonStanding, X } from 'lucide-svelte'; import { PersonStanding, X } from 'lucide-svelte';
import { MapillaryLayer } from './Mapillary'; import { MapillaryLayer } from './Mapillary';
import { GoogleRedirect } from './Google'; import { GoogleRedirect } from './Google';
import { map, streetViewEnabled } from '$lib/stores'; import { map, streetViewEnabled } from '$lib/stores';
import { settings } from '$lib/db'; import { settings } from '$lib/db';
import { _ } from 'svelte-i18n';
const { streetViewSource } = settings; const { streetViewSource } = settings;
@@ -38,9 +40,15 @@
</script> </script>
<CustomControl class="w-[29px] h-[29px] shrink-0"> <CustomControl class="w-[29px] h-[29px] shrink-0">
<Toggle bind:pressed={$streetViewEnabled} class="w-full h-full rounded p-0"> <Tooltip class="w-full h-full" side="left" label={$_('menu.toggle_street_view')}>
<PersonStanding size="22" /> <Toggle
</Toggle> bind:pressed={$streetViewEnabled}
class="w-full h-full rounded p-0"
aria-label={$_('menu.toggle_street_view')}
>
<PersonStanding size="22" />
</Toggle>
</Tooltip>
</CustomControl> </CustomControl>
<div <div

21
website/src/lib/components/toolbar/tools/routing/Routing.svelte
View File

@@ -117,8 +117,8 @@
in:flyAndScale={{ x: -2, y: 0, duration: 50 }} in:flyAndScale={{ x: -2, y: 0, duration: 50 }}
> >
<div class="grow flex flex-col gap-3"> <div class="grow flex flex-col gap-3">
<Tooltip> <Tooltip label={$_('toolbar.routing.use_routing_tooltip')}>
<Label slot="data" class="w-full flex flex-row justify-between items-center gap-2"> <Label class="w-full flex flex-row justify-between items-center gap-2">
<span class="flex flex-row gap-1"> <span class="flex flex-row gap-1">
{#if $routing} {#if $routing}
<Route size="16" /> <Route size="16" />
@@ -129,10 +129,7 @@
</span> </span>
<Switch class="scale-90" bind:checked={$routing} /> <Switch class="scale-90" bind:checked={$routing} />
</Label> </Label>
<span slot="tooltip" class="flex flex-row items-center"> <Shortcut slot="extra" key="F5" />
{$_('toolbar.routing.use_routing_tooltip')}
<Shortcut key="F5" />
</span>
</Tooltip> </Tooltip>
{#if $routing} {#if $routing}
<div class="flex flex-col gap-3" in:slide> <div class="flex flex-col gap-3" in:slide>
@@ -172,9 +169,8 @@
{/if} {/if}
</div> </div>
<div class="flex flex-row flex-wrap justify-center gap-1"> <div class="flex flex-row flex-wrap justify-center gap-1">
<Tooltip> <Tooltip label={$_('toolbar.routing.reverse.tooltip')}>
<Button <Button
slot="data"
variant="outline" variant="outline"
class="flex flex-row gap-1 text-xs px-2" class="flex flex-row gap-1 text-xs px-2"
disabled={!validSelection} disabled={!validSelection}
@@ -182,11 +178,9 @@
> >
<ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')} <ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')}
</Button> </Button>
<span slot="tooltip">{$_('toolbar.routing.reverse.tooltip')}</span>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip label={$_('toolbar.routing.route_back_to_start.tooltip')}>
<Button <Button
slot="data"
variant="outline" variant="outline"
class="flex flex-row gap-1 text-xs px-2" class="flex flex-row gap-1 text-xs px-2"
disabled={!validSelection} disabled={!validSelection}
@@ -220,11 +214,9 @@
> >
<Home size="12" />{$_('toolbar.routing.route_back_to_start.button')} <Home size="12" />{$_('toolbar.routing.route_back_to_start.button')}
</Button> </Button>
<span slot="tooltip">{$_('toolbar.routing.route_back_to_start.tooltip')}</span>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip label={$_('toolbar.routing.round_trip.tooltip')}>
<Button <Button
slot="data"
variant="outline" variant="outline"
class="flex flex-row gap-1 text-xs px-2" class="flex flex-row gap-1 text-xs px-2"
disabled={!validSelection} disabled={!validSelection}
@@ -232,7 +224,6 @@
> >
<Repeat size="12" />{$_('toolbar.routing.round_trip.button')} <Repeat size="12" />{$_('toolbar.routing.round_trip.button')}
</Button> </Button>
<span slot="tooltip">{$_('toolbar.routing.round_trip.tooltip')}</span>
</Tooltip> </Tooltip>
</div> </div>
<div class="w-full flex flex-row gap-2 items-end justify-between"> <div class="w-full flex flex-row gap-2 items-end justify-between">

1
website/src/locales/en.json
View File

@@ -54,6 +54,7 @@
"street_view_source": "Street view source", "street_view_source": "Street view source",
"mapillary": "Mapillary", "mapillary": "Mapillary",
"google": "Google", "google": "Google",
"toggle_street_view": "Street view",
"layers": "Map layers...", "layers": "Map layers...",
"distance_markers": "Distance markers", "distance_markers": "Distance markers",
"direction_markers": "Direction arrows", "direction_markers": "Direction arrows",