@karyl-chan/ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karyl-chan/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Shared Vue UI primitives, composables, and design tokens used by karyl-chan's bot frontend and plugin webuis.",
   "type": "module",
   "license": "MIT",
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
     "@popperjs/core": "^2.11.8",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.7.0",
     "jsdom": "^29.0.2",
@@ -57,6 +58,7 @@
     "vue-tsc": "^2.2.0"
   },
   "scripts": {
-    "typecheck": "vue-tsc --noEmit"
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run"
   }
 }

package/src/components/AppModal.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, toRef, useId } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, useId, useSlots, watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useBreakpoint } from '../composables/use-breakpoint';
 import { useDrawer } from '../composables/use-drawer';
+import { useEscapeStack } from '../composables/use-escape-stack';
+import { useBodyScrollLock } from '../composables/use-scroll-lock';
+import { getFocusable, trapTabKey } from '../lib/focus';
 
 /**
  * Viewport-aware modal:
@@ -19,14 +22,31 @@ import { useDrawer } from '../composables/use-drawer';
  * full-bleed content (tables, pickers, croppers) that manages its own
  * edges.
  *
- * `closeOnBackdrop` / `closeOnEscape` default to true. Escape closure on
- * desktop is wired locally; on mobile it's handled by useDrawer's escape
- * stack. Backdrop click emits `close` either way.
+ * `closeOnBackdrop` / `closeOnEscape` default to true. Escape goes
+ * through the shared escape stack on both branches, so with stacked
+ * overlays only the topmost one closes. Backdrop close requires the
+ * press to START and END on the backdrop — a text-selection drag that
+ * ends outside the panel doesn't dismiss.
+ *
+ * Accessibility: the panel is `role="dialog"` + `aria-modal`, labelled by
+ * the title (or `ariaLabel` when there is none). On open, focus moves to
+ * the first `[autofocus]` element, else the first focusable control in
+ * the body, else the panel itself; Tab / Shift+Tab cycle inside the
+ * panel; on close focus returns to whatever had it before. While any
+ * AppModal is open the page behind it can't scroll (ref-counted, so
+ * stacked modals behave).
  */
 const props = withDefaults(defineProps<{
     visible: boolean;
     /** Heading rendered in the panel's header. Hidden when blank. */
     title?: string;
+    /**
+     * Accessible name for the dialog when there is no `title` / `#header`
+     * (those label the dialog via aria-labelledby and take precedence).
+     */
+    ariaLabel?: string;
+    /** Accessible label of the header close button. Default: 'Close'. */
+    closeLabel?: string;
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;
     /** Width of the desktop panel; mobile drawer ignores this. */
@@ -38,6 +58,8 @@ const props = withDefaults(defineProps<{
     padding?: string;
 }>(), {
     title: '',
+    ariaLabel: undefined,
+    closeLabel: 'Close',
     closeOnBackdrop: true,
     closeOnEscape: true,
     width: 'min(440px, 92vw)',
@@ -48,37 +70,112 @@ const emit = defineEmits<{
     (e: 'close'): void;
 }>();
 
+const slots = useSlots();
+
 const { isMobile } = useBreakpoint();
-const visibleRef = toRef(props, 'visible');
+const visibleRef = computed(() => props.visible);
 const desktopVisible = computed(() => props.visible && !isMobile.value);
 const drawerVisible = computed(() => props.visible && isMobile.value);
 
 const titleId = useId();
+const hasHeader = computed(() => !!props.title || !!slots.header);
+const labelledBy = computed(() => (hasHeader.value ? titleId : undefined));
+const label = computed(() => (hasHeader.value ? undefined : props.ariaLabel || undefined));
 
-// Desktop Escape handler — useDrawer already covers the mobile branch
-// via its escape stack, so we only listen when the popover branch is
-// active. Listening unconditionally would let a single Escape close two
-// stacked drawers (e.g. user-context-menu drawer over a modal drawer).
-function onWindowKey(event: KeyboardEvent) {
-    if (!visibleRef.value || !props.closeOnEscape || isMobile.value) return;
-    if (event.key === 'Escape') {
-        event.preventDefault();
-        emit('close');
-    }
+// Escape is checked at call time (not captured at setup) so toggling
+// `closeOnEscape` — e.g. AppConfirmDialog while `loading` — takes effect
+// immediately. A modal with `closeOnEscape: false` still swallows the
+// key instead of letting it fall through to an overlay underneath.
+function onEscape() {
+    if (props.closeOnEscape) emit('close');
 }
-onMounted(() => window.addEventListener('keydown', onWindowKey));
-onUnmounted(() => window.removeEventListener('keydown', onWindowKey));
 
+// Desktop branch: register on the shared escape stack so only the
+// topmost overlay (modal, drawer or popover) reacts to a single Escape.
+const escapeStack = useEscapeStack();
+watch(desktopVisible, (v) => {
+    if (v) escapeStack.register(onEscape);
+    else escapeStack.unregister();
+}, { immediate: true });
+onBeforeUnmount(escapeStack.unregister);
+
+// Mobile branch: useDrawer owns its own escape-stack entry.
 const { backdropClass, panelClass, backdropTransition, panelTransition } = useDrawer({
     visible: drawerVisible,
     placement: 'bottom',
-    closeOnEscape: props.closeOnEscape,
-    onClose: () => emit('close')
+    closeOnEscape: true,
+    onClose: onEscape
 });
 
-function onBackdropClick() {
+useBodyScrollLock(visibleRef);
+
+// Backdrop close only when the press both started and ended on the
+// backdrop itself.
+let pressStartedOnBackdrop = false;
+function onBackdropPointerDown(event: PointerEvent | MouseEvent) {
+    pressStartedOnBackdrop = event.target === event.currentTarget;
+}
+function onBackdropClick(event: MouseEvent) {
+    const startedHere = pressStartedOnBackdrop;
+    pressStartedOnBackdrop = false;
+    if (event.target !== event.currentTarget || !startedHere) return;
     if (props.closeOnBackdrop) emit('close');
 }
+
+// ── Focus management ────────────────────────────────────────────────
+const desktopPanel = ref<HTMLElement | null>(null);
+const drawerPanel = ref<HTMLElement | null>(null);
+const activePanel = () => (isMobile.value ? drawerPanel.value : desktopPanel.value);
+
+let returnFocusTo: HTMLElement | null = null;
+
+function focusInitial() {
+    const panel = activePanel();
+    if (!panel) return;
+    const active = document.activeElement;
+    if (active && panel.contains(active) && active !== panel) return;
+    const auto = panel.querySelector<HTMLElement>('[autofocus]');
+    const body = panel.querySelector<HTMLElement>('.app-modal-body, .app-modal-drawer-body');
+    const target = auto ?? (body ? getFocusable(body)[0] : undefined) ?? panel;
+    target.focus({ preventScroll: true });
+}
+
+function restoreFocus() {
+    const el = returnFocusTo;
+    returnFocusTo = null;
+    if (!el || !el.isConnected) return;
+    // Don't yank focus back if the user (or the caller) already moved it
+    // somewhere meaningful outside the dialog.
+    const active = document.activeElement;
+    const panels = [desktopPanel.value, drawerPanel.value];
+    const focusInDialog = !!active && panels.some((p) => p?.contains(active));
+    if (!active || active === document.body || focusInDialog) {
+        el.focus({ preventScroll: true });
+    }
+}
+
+watch(visibleRef, (v, was) => {
+    if (v && !was) {
+        const active = document.activeElement;
+        returnFocusTo = active instanceof HTMLElement && active !== document.body ? active : null;
+    } else if (!v && was) {
+        restoreFocus();
+    }
+}, { immediate: true });
+
+// Move focus in whenever a branch's panel appears — on open, and when a
+// breakpoint flip swaps the desktop card for the mobile drawer.
+watch([desktopVisible, drawerVisible], ([d, m]) => {
+    if (d || m) nextTick(focusInitial);
+}, { immediate: true, flush: 'post' });
+
+onBeforeUnmount(() => {
+    if (props.visible) restoreFocus();
+});
+
+function onPanelKeydown(event: KeyboardEvent) {
+    trapTabKey(event, event.currentTarget as HTMLElement);
+}
 </script>
 
 <template>
@@ -88,24 +185,28 @@ function onBackdropClick() {
             <div
                 v-if="desktopVisible"
                 class="app-modal-backdrop"
-                @click.self="onBackdropClick"
+                @pointerdown="onBackdropPointerDown"
+                @click="onBackdropClick"
             >
                 <div
+                    ref="desktopPanel"
                     class="app-modal-panel"
                     role="dialog"
                     aria-modal="true"
+                    tabindex="-1"
                     :style="{ width }"
-                    :aria-labelledby="title || $slots.header ? titleId : undefined"
-                    :aria-label="title || $slots.header ? undefined : title || undefined"
+                    :aria-labelledby="labelledBy"
+                    :aria-label="label"
+                    @keydown="onPanelKeydown"
                 >
-                    <header v-if="title || $slots.header" class="app-modal-head">
+                    <header v-if="hasHeader" class="app-modal-head">
                         <span :id="titleId" class="app-modal-title">
                             <slot name="header">{{ title }}</slot>
                         </span>
                         <button
                             type="button"
                             class="app-modal-close"
-                            :aria-label="'Close'"
+                            :aria-label="closeLabel"
                             @click="emit('close')"
                         >
                             <Icon icon="material-symbols:close-rounded" width="18" height="18" />
@@ -125,27 +226,31 @@ function onBackdropClick() {
             <div
                 v-if="drawerVisible"
                 :class="[backdropClass, 'app-modal-drawer-backdrop']"
+                @pointerdown="onBackdropPointerDown"
                 @click="onBackdropClick"
             />
         </Transition>
         <Transition :name="panelTransition">
             <div
                 v-if="drawerVisible"
+                ref="drawerPanel"
                 :class="[panelClass, 'app-modal-drawer-panel']"
                 data-placement="bottom"
                 role="dialog"
                 aria-modal="true"
-                :aria-labelledby="title || $slots.header ? titleId : undefined"
-                :aria-label="title || $slots.header ? undefined : title || undefined"
+                tabindex="-1"
+                :aria-labelledby="labelledBy"
+                :aria-label="label"
+                @keydown="onPanelKeydown"
             >
-                <header v-if="title || $slots.header" class="app-modal-drawer-head">
+                <header v-if="hasHeader" class="app-modal-drawer-head">
                     <span :id="titleId" class="app-modal-title">
                         <slot name="header">{{ title }}</slot>
                     </span>
                     <button
                         type="button"
                         class="app-modal-close"
-                        :aria-label="'Close'"
+                        :aria-label="closeLabel"
                         @click="emit('close')"
                     >
                         <Icon icon="material-symbols:close-rounded" width="18" height="18" />
@@ -180,6 +285,12 @@ function onBackdropClick() {
     flex-direction: column;
     overflow: hidden;
 }
+.app-modal-panel:focus,
+.app-modal-drawer-panel:focus {
+    /* The panel only takes focus as a fallback target (tabindex=-1);
+       don't paint a ring around the whole card. */
+    outline: none;
+}
 .app-modal-head {
     display: flex;
     align-items: center;

package/src/components/AppPopover.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useBreakpoint } from '../composables/use-breakpoint';
-import { usePopover, type Placement } from '../composables/use-popover';
+import { usePopover, type Placement, type VirtualElement } from '../composables/use-popover';
 import { useDrawer, type DrawerPlacement } from '../composables/use-drawer';
 
 /**
@@ -18,16 +18,26 @@ import { useDrawer, type DrawerPlacement } from '../composables/use-drawer';
  *   2. `referenceEl` prop — for cases where the trigger can't live
  *      inside this component (e.g., per-row react buttons in a list
  *      that share a single popover instance). No click wiring; the
- *      caller drives open state directly.
+ *      caller drives open state directly. Accepts either a real
+ *      HTMLElement or a Popper `VirtualElement` (`{ getBoundingClientRect,
+ *      contextElement? }`, e.g. from `createVirtualElement(x, y)`) to
+ *      anchor at a point / text selection / canvas coordinate. Passing a
+ *      new object repositions an open popover; if you mutate the same
+ *      virtual element in place, call the exposed `update()` instead.
  *
  * If both are provided, `referenceEl` wins.
  *
  * Open state is `v-model:open`; if the caller doesn't bind, the
- * component manages it internally.
+ * component manages it internally. (`open` defaults to `undefined`, not
+ * `false` — Vue would otherwise cast the absent boolean prop to `false`
+ * and pin an unbound popover shut.)
  */
 const props = withDefaults(defineProps<{
-    /** External reference element. Overrides the #trigger slot if set. */
-    referenceEl?: HTMLElement | null;
+    /**
+     * External anchor. Overrides the #trigger slot if set. Either a real
+     * element or a Popper VirtualElement (point / range anchor).
+     */
+    referenceEl?: HTMLElement | VirtualElement | null;
     /** Controlled open state; two-way via v-model:open. Optional. */
     open?: boolean;
     placement?: Placement;
@@ -43,6 +53,9 @@ const props = withDefaults(defineProps<{
     sameWidth?: boolean;
 }>(), {
     referenceEl: null,
+    // Explicit `undefined` default stops Vue's boolean casting (absent
+    // boolean prop → false), which made uncontrolled mode never open.
+    open: undefined,
     placement: 'bottom-start',
     offset: () => [0, 8],
     drawerPlacement: 'bottom',
@@ -80,7 +93,7 @@ const contentEl = ref<HTMLElement | null>(null);
 // template: `v-if="!referenceEl"` reads the prop, not this computed,
 // which avoids a mount → unmount loop when the slot wrapper's presence
 // feeds back into its own v-if condition.
-const anchorRef = computed<HTMLElement | null>(() => {
+const anchorRef = computed<HTMLElement | VirtualElement | null>(() => {
     if (props.referenceEl) return props.referenceEl;
     const wrap = triggerWrapRef.value;
     if (!wrap) return null;
@@ -95,7 +108,7 @@ const anchorRef = computed<HTMLElement | null>(() => {
 const popoverVisible = computed(() => !isMobile.value && isOpen.value);
 const drawerVisible = computed(() => isMobile.value && isOpen.value);
 
-usePopover(anchorRef, contentEl, {
+const { update } = usePopover(anchorRef, contentEl, {
     placement: props.placement,
     trigger: 'manual',
     offset: props.offset,
@@ -141,6 +154,15 @@ watch(isMobile, (mobile) => {
 function onContentClick() {
     if (props.closeOnContentClick) close();
 }
+
+defineExpose({
+    open,
+    close,
+    toggle,
+    /** Recompute the desktop popover position (e.g. after mutating a
+     *  VirtualElement anchor in place). No-op while closed / on mobile. */
+    update
+});
 </script>
 
 <template>

package/src/components/AppProgress.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * Linear progress bar.
+ *
+ * - `value` 0–100 → determinate: `role="progressbar"` with
+ *   `aria-valuenow` / `aria-valuemin` / `aria-valuemax`. Out-of-range
+ *   values are clamped; non-finite values count as indeterminate.
+ * - `value` omitted → indeterminate: a sliding bar, no aria-value*
+ *   attributes. Under `prefers-reduced-motion: reduce` the bar stops
+ *   moving and renders as a static dimmed fill instead.
+ *
+ * `label` is the accessible name (aria-label). To label it by visible
+ * text instead, pass `aria-labelledby` — attrs fall through to the root.
+ * `tone` follows AppBadge's semantic palette; `size` is the track height
+ * (sm 4px, md 8px).
+ */
+
+export type ProgressTone = 'accent' | 'success' | 'warn' | 'danger';
+export type ProgressSize = 'sm' | 'md';
+
+const props = withDefaults(defineProps<{
+    /** 0–100. Omit (undefined) for an indeterminate bar. */
+    value?: number;
+    /** Accessible name of the progress bar. */
+    label?: string;
+    size?: ProgressSize;
+    tone?: ProgressTone;
+}>(), {
+    value: undefined,
+    label: undefined,
+    size: 'md',
+    tone: 'accent'
+});
+
+const determinate = computed(() =>
+    typeof props.value === 'number' && Number.isFinite(props.value)
+);
+const clamped = computed(() =>
+    determinate.value ? Math.min(100, Math.max(0, props.value as number)) : 0
+);
+const classes = computed(() => [
+    'app-progress',
+    `app-progress--${props.size}`,
+    `app-progress--tone-${props.tone}`,
+    { 'app-progress--indeterminate': !determinate.value }
+]);
+</script>
+
+<template>
+    <div
+        :class="classes"
+        role="progressbar"
+        :aria-label="label || undefined"
+        :aria-valuenow="determinate ? clamped : undefined"
+        :aria-valuemin="determinate ? 0 : undefined"
+        :aria-valuemax="determinate ? 100 : undefined"
+    >
+        <div
+            class="app-progress__bar"
+            :style="determinate ? { width: `${clamped}%` } : undefined"
+        />
+    </div>
+</template>
+
+<style scoped>
+.app-progress {
+    --app-progress-fill: var(--accent);
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-pill, 999px);
+    background: var(--bg-surface-2);
+    box-shadow: inset 0 0 0 1px var(--border);
+}
+.app-progress--sm { height: 4px; }
+.app-progress--md { height: 8px; }
+
+.app-progress--tone-accent { --app-progress-fill: var(--accent); }
+.app-progress--tone-success { --app-progress-fill: var(--success-text); }
+.app-progress--tone-warn { --app-progress-fill: var(--warn-text); }
+.app-progress--tone-danger { --app-progress-fill: var(--danger); }
+
+.app-progress__bar {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--app-progress-fill);
+    transition: width var(--transition-slow, 0.2s) ease;
+}
+
+.app-progress--indeterminate .app-progress__bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40%;
+    animation: app-progress-slide 1.2s ease-in-out infinite;
+}
+
+@keyframes app-progress-slide {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(250%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-progress__bar { transition: none; }
+    .app-progress--indeterminate .app-progress__bar {
+        animation: none;
+        width: 100%;
+        opacity: 0.45;
+    }
+}
+</style>

package/src/components/AppSelect.vue

@@ -31,6 +31,9 @@ withDefaults(defineProps<{
     /** Make the popup width match the trigger's width. Default: true. */
     sameWidth?: boolean;
 }>(), {
+    // `undefined` (not Vue's boolean-cast `false`) so an unbound AppSelect
+    // falls through to AppPopover's internal open state.
+    open: undefined,
     placement: 'bottom-start',
     drawerPlacement: 'bottom',
     closeOnItemClick: true,

package/src/components/AppTabs.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useId } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useBreakpoint } from '../composables/use-breakpoint';
 import AppSelectField, { type SelectOption } from './AppSelectField.vue';
 import type { TabDef } from './tab-types';
+import { onTablistKeydown, rovingTabKey } from './tab-keyboard';
 
 export type { TabDef };
 
@@ -21,6 +22,12 @@ export type { TabDef };
  * Mobile (≤768px):
  *   - Both rows collapse to AppSelectField dropdowns stacked vertically.
  *
+ * Keyboard (desktop, WAI-ARIA tabs pattern): each tablist is a single
+ * Tab stop (roving tabindex on the selected tab); ArrowLeft/ArrowRight
+ * (ArrowUp/ArrowDown in the vertical sidebar) and Home/End move between
+ * tabs, skipping disabled ones, and select as they go. The panel is a
+ * `role="tabpanel"` labelled by the selected sub-tab (or primary tab).
+ *
  * If you need URL-synced tabs with deep-linkable hrefs, use
  * `AppTabsRouted` from this package (a thin wrapper that adds
  * `vue-router` integration on top).
@@ -65,6 +72,27 @@ const primaryOptions = computed<SelectOption<string>[]>(() =>
 const subOptions = computed<SelectOption<string>[]>(() =>
     props.subTabs.map(t => ({ value: t.key, label: t.label }))
 );
+
+// ── ARIA wiring ──────────────────────────────────────────────────────
+// Ids are index-based (keys may contain characters that aren't valid in
+// an id). One panel serves every tab, so all tabs point at it.
+const uid = useId();
+const panelId = `${uid}-panel`;
+const tabId = (i: number) => `${uid}-tab-${i}`;
+const subTabId = (i: number) => `${uid}-sub-${i}`;
+const primaryRoving = computed(() => rovingTabKey(props.tabs, props.modelValue));
+const subRoving = computed(() => rovingTabKey(props.subTabs, props.subModelValue));
+const panelLabelledBy = computed(() => {
+    if (hasSub.value) {
+        const si = props.subTabs.findIndex(t => t.key === props.subModelValue);
+        if (si !== -1) return subTabId(si);
+    }
+    const pi = props.tabs.findIndex(t => t.key === props.modelValue);
+    return pi !== -1 ? tabId(pi) : undefined;
+});
+function onPrimaryKeydown(e: KeyboardEvent) { onTablistKeydown(e, props.tabs, pickPrimary); }
+function onSubKeydown(e: KeyboardEvent) { onTablistKeydown(e, props.subTabs, pickSub); }
+function onSubSideKeydown(e: KeyboardEvent) { onTablistKeydown(e, props.subTabs, pickSub, 'vertical'); }
 </script>
 
 <template>
@@ -93,14 +121,18 @@ const subOptions = computed<SelectOption<string>[]>(() =>
         v-else-if="!hasSub || subLayout === 'top'"
         :class="['tabs-root', 'desktop', 'top', { underline: variant === 'underline' }]"
     >
-        <nav class="primary-row" role="tablist">
+        <nav class="primary-row" role="tablist" @keydown="onPrimaryKeydown">
             <button
-                v-for="t in tabs"
+                v-for="(t, i) in tabs"
+                :id="tabId(i)"
                 :key="t.key"
                 type="button"
                 role="tab"
                 :class="['tab', { active: t.key === modelValue }]"
                 :aria-selected="t.key === modelValue"
+                :aria-controls="panelId"
+                :tabindex="t.key === primaryRoving ? 0 : -1"
+                :data-tab-key="t.key"
                 :disabled="t.disabled"
                 @click="!t.disabled && pickPrimary(t.key)"
             >
@@ -108,14 +140,18 @@ const subOptions = computed<SelectOption<string>[]>(() =>
                 <span>{{ t.label }}</span>
             </button>
         </nav>
-        <nav v-if="hasSub" class="sub-row" role="tablist">
+        <nav v-if="hasSub" class="sub-row" role="tablist" @keydown="onSubKeydown">
             <button
-                v-for="t in subTabs"
+                v-for="(t, i) in subTabs"
+                :id="subTabId(i)"
                 :key="t.key"
                 type="button"
                 role="tab"
                 :class="['sub-tab', { active: t.key === subModelValue }]"
                 :aria-selected="t.key === subModelValue"
+                :aria-controls="panelId"
+                :tabindex="t.key === subRoving ? 0 : -1"
+                :data-tab-key="t.key"
                 :disabled="t.disabled"
                 @click="!t.disabled && pickSub(t.key)"
             >
@@ -123,21 +159,25 @@ const subOptions = computed<SelectOption<string>[]>(() =>
                 <span>{{ t.label }}</span>
             </button>
         </nav>
-        <div class="panel">
+        <div :id="panelId" class="panel" role="tabpanel" :aria-labelledby="panelLabelledBy">
             <slot />
         </div>
     </div>
 
     <!-- Desktop, sub-tabs as a vertical sidebar. -->
     <div v-else :class="['tabs-root', 'desktop', 'sidebar', { underline: variant === 'underline' }]">
-        <nav class="primary-row" role="tablist">
+        <nav class="primary-row" role="tablist" @keydown="onPrimaryKeydown">
             <button
-                v-for="t in tabs"
+                v-for="(t, i) in tabs"
+                :id="tabId(i)"
                 :key="t.key"
                 type="button"
                 role="tab"
                 :class="['tab', { active: t.key === modelValue }]"
                 :aria-selected="t.key === modelValue"
+                :aria-controls="panelId"
+                :tabindex="t.key === primaryRoving ? 0 : -1"
+                :data-tab-key="t.key"
                 :disabled="t.disabled"
                 @click="!t.disabled && pickPrimary(t.key)"
             >
@@ -146,14 +186,18 @@ const subOptions = computed<SelectOption<string>[]>(() =>
             </button>
         </nav>
         <div class="split">
-            <nav class="sub-side" role="tablist">
+            <nav class="sub-side" role="tablist" aria-orientation="vertical" @keydown="onSubSideKeydown">
                 <button
-                    v-for="t in subTabs"
+                    v-for="(t, i) in subTabs"
+                    :id="subTabId(i)"
                     :key="t.key"
                     type="button"
                     role="tab"
                     :class="['sub-side-tab', { active: t.key === subModelValue }]"
                     :aria-selected="t.key === subModelValue"
+                    :aria-controls="panelId"
+                    :tabindex="t.key === subRoving ? 0 : -1"
+                    :data-tab-key="t.key"
                     :disabled="t.disabled"
                     @click="!t.disabled && pickSub(t.key)"
                 >
@@ -161,7 +205,7 @@ const subOptions = computed<SelectOption<string>[]>(() =>
                     <span>{{ t.label }}</span>
                 </button>
             </nav>
-            <div class="panel side-panel">
+            <div :id="panelId" class="panel side-panel" role="tabpanel" :aria-labelledby="panelLabelledBy">
                 <slot />
             </div>
         </div>