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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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