fix: a11y — tablist, health dots, table headers, switch roles, nav landmark
This commit is contained in:
parent
5d6ecfea62
commit
b41ca4910a
4 changed files with 63 additions and 27 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-surface font-mono text-text-primary">
|
||||
<nav class="border-b border-surface-border px-6 py-3 flex items-center gap-6">
|
||||
<nav aria-label="Main navigation" class="border-b border-surface-border px-6 py-3 flex items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-accent font-semibold tracking-wide">TURNSTONE</span>
|
||||
<span class="text-text-dim text-xs">diagnostic intelligence</span>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
:key="link.to"
|
||||
:to="link.to"
|
||||
class="px-3 py-1 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
|
||||
active-class="text-accent bg-accent-muted"
|
||||
active-class="text-accent bg-accent-muted font-semibold"
|
||||
>{{ link.label }}</RouterLink>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-3">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
@click="toggleTheme"
|
||||
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
class="text-text-dim hover:text-text-primary transition-colors text-base leading-none px-1"
|
||||
aria-label="Toggle theme"
|
||||
:aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
>{{ isDark ? '☀' : '☾' }}</button>
|
||||
<StatusDot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,16 +42,16 @@
|
|||
{{ loading ? '…' : (stats?.errors_24h ?? 0) }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="rounded border bg-surface-raised p-5 cursor-pointer hover:bg-surface transition-colors"
|
||||
<RouterLink
|
||||
to="/incidents"
|
||||
class="rounded border bg-surface-raised p-5 block hover:bg-surface transition-colors"
|
||||
:class="activeIncidents > 0 ? 'border-sev-warn' : 'border-surface-border'"
|
||||
@click="$router.push('/incidents')"
|
||||
>
|
||||
<p class="text-text-dim text-xs uppercase tracking-widest mb-2">Active Incidents</p>
|
||||
<p class="text-3xl font-semibold tabular-nums" :class="activeIncidents > 0 ? 'text-sev-warn' : 'text-text-muted'">
|
||||
{{ incidentsLoading ? '…' : activeIncidents }}
|
||||
</p>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Source health (24h) -->
|
||||
|
|
@ -67,14 +67,15 @@
|
|||
|
||||
<div v-else class="rounded border border-surface-border overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<caption class="sr-only">Source health — last 24 hours</caption>
|
||||
<thead class="bg-surface-raised border-b border-surface-border">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider w-4"></th>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Source</th>
|
||||
<th class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Events</th>
|
||||
<th class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Errors</th>
|
||||
<th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Latest</th>
|
||||
<th class="px-4 py-2.5"></th>
|
||||
<th scope="col" class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider w-4"></th>
|
||||
<th scope="col" class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Source</th>
|
||||
<th scope="col" class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Events</th>
|
||||
<th scope="col" class="text-right px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Errors</th>
|
||||
<th scope="col" class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Latest</th>
|
||||
<th scope="col" class="px-4 py-2.5"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -87,6 +88,7 @@
|
|||
<span
|
||||
class="inline-block w-2 h-2 rounded-full"
|
||||
:class="healthDot(src.error_count, src.entry_count)"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-accent font-mono text-xs">{{ src.source_id }}</td>
|
||||
|
|
@ -101,6 +103,7 @@
|
|||
<button
|
||||
class="text-text-dim hover:text-accent text-xs px-2 py-1 rounded hover:bg-surface transition-colors"
|
||||
@click="diagnoseSource(src.source_id)"
|
||||
:aria-label="`Diagnose ${src.source_id}`"
|
||||
>diagnose</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Tab toggle -->
|
||||
<div class="flex gap-1 mb-6 border-b border-surface-border">
|
||||
<div role="tablist" aria-label="Diagnose mode" class="flex gap-1 mb-6 border-b border-surface-border">
|
||||
<button
|
||||
v-for="t in tabs"
|
||||
:key="t.key"
|
||||
role="tab"
|
||||
:aria-selected="activeTab === t.key"
|
||||
:id="`tab-${t.key}`"
|
||||
:aria-controls="`tabpanel-${t.key}`"
|
||||
@click="activeTab = t.key"
|
||||
:class="[
|
||||
'px-4 py-2 text-sm transition-colors border-b-2 -mb-px',
|
||||
|
|
@ -23,11 +27,23 @@
|
|||
>{{ t.label }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Quick tab -->
|
||||
<QuickCapture v-if="activeTab === 'quick'" />
|
||||
<!-- Quick tab panel -->
|
||||
<div
|
||||
v-if="activeTab === 'quick'"
|
||||
role="tabpanel"
|
||||
id="tabpanel-quick"
|
||||
aria-labelledby="tab-quick"
|
||||
>
|
||||
<QuickCapture />
|
||||
</div>
|
||||
|
||||
<!-- Structured tab -->
|
||||
<template v-else>
|
||||
<!-- Structured tab panel -->
|
||||
<div
|
||||
v-else
|
||||
role="tabpanel"
|
||||
id="tabpanel-structured"
|
||||
aria-labelledby="tab-structured"
|
||||
>
|
||||
<IncidentForm @created="onCreated" />
|
||||
<div
|
||||
v-if="createdLabel"
|
||||
|
|
@ -36,7 +52,7 @@
|
|||
Incident "{{ createdLabel }}" saved —
|
||||
<RouterLink to="/incidents" class="underline underline-offset-2">view in Incidents</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,14 +10,16 @@
|
|||
<div class="rounded border border-surface-border bg-surface-raised p-5 space-y-6">
|
||||
<!-- Entry point -->
|
||||
<div>
|
||||
<h2 class="text-text-primary text-sm font-semibold mb-1">Quick Capture Entry Point</h2>
|
||||
<h2 id="entry-point-label" class="text-text-primary text-sm font-semibold mb-1">Quick Capture Entry Point</h2>
|
||||
<p class="text-text-dim text-xs mb-3">
|
||||
Where the "describe it and search" input appears on every page.
|
||||
</p>
|
||||
<div class="flex gap-3">
|
||||
<div role="radiogroup" aria-labelledby="entry-point-label" class="flex gap-3">
|
||||
<button
|
||||
v-for="opt in entryPointOptions"
|
||||
:key="opt.value"
|
||||
role="radio"
|
||||
:aria-checked="prefs.entry_point_style === opt.value"
|
||||
@click="setEntryPoint(opt.value as 'topbar' | 'fab')"
|
||||
:class="[
|
||||
'flex-1 px-4 py-3 rounded border text-sm transition-colors text-left',
|
||||
|
|
@ -64,12 +66,20 @@
|
|||
API Key
|
||||
<span class="text-text-dim font-normal">(optional — required for cf-orch remote inference)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="prefs.llm_api_key"
|
||||
type="password"
|
||||
:type="showApiKey ? 'text' : 'password'"
|
||||
placeholder="Leave blank for local Ollama"
|
||||
class="w-full bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="showApiKey = !showApiKey"
|
||||
:aria-label="showApiKey ? 'Hide API key' : 'Show API key'"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-text-dim hover:text-text-primary text-xs"
|
||||
>{{ showApiKey ? 'Hide' : 'Show' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="saveLlm"
|
||||
|
|
@ -94,6 +104,9 @@
|
|||
class="flex items-start gap-3 rounded border border-surface-border bg-surface p-3"
|
||||
>
|
||||
<button
|
||||
role="switch"
|
||||
:aria-checked="rule.enabled"
|
||||
:aria-label="`${rule.name || 'Override'} rule enabled`"
|
||||
@click="toggleOverride(i)"
|
||||
:class="[
|
||||
'mt-0.5 w-9 h-5 rounded-full flex-shrink-0 transition-colors relative',
|
||||
|
|
@ -112,6 +125,7 @@
|
|||
</div>
|
||||
<button
|
||||
@click="deleteOverride(i)"
|
||||
:aria-label="`Delete override rule: ${rule.name || 'unnamed'}`"
|
||||
class="text-text-dim hover:text-sev-error text-xs flex-shrink-0 mt-0.5"
|
||||
title="Delete rule"
|
||||
>✕</button>
|
||||
|
|
@ -160,6 +174,8 @@
|
|||
|
||||
<p
|
||||
v-if="saveStatus"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
class="text-xs"
|
||||
:class="saveStatus.ok ? 'text-green-400' : 'text-sev-error'"
|
||||
>
|
||||
|
|
@ -192,6 +208,7 @@ interface Prefs {
|
|||
const prefs = ref<Prefs>({ entry_point_style: 'topbar', llm_url: '', llm_model: '', llm_api_key: '', severity_overrides: [] })
|
||||
const saveStatus = ref<{ ok: boolean; msg: string } | null>(null)
|
||||
const showAddOverride = ref(false)
|
||||
const showApiKey = ref(false)
|
||||
const newRule = ref<SeverityOverride>({ name: '', pattern: '', override_severity: 'WARN', enabled: true })
|
||||
|
||||
const entryPointOptions = [
|
||||
|
|
|
|||
Loading…
Reference in a new issue