@bagelink/vue 1.15.41 → 1.15.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.41",
+  "version": "1.15.43",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Dropdown.vue

@@ -63,6 +63,10 @@ const shown = defineModel('shown', { type: Boolean, default: false })
 const triggerWrapRef = ref<HTMLElement | null>(null)
 const popoverRef = ref<HTMLElement | null>(null)
 
+// Tracks whether the popover was opened via keyboard (Enter/Space/Arrow) so we know
+// whether to move focus into the menu on open.
+let openedViaKeyboard = false
+
 // Unique id for this popover instance, used to track parent–child relationships across teleported popovers
 const bglId = `bgl-dd-${++_bglIdCounter}`
 const teleportTarget = ref<string | Element>('body')
@@ -154,6 +158,12 @@ async function internalShow() {
 	popoverRef.value.showPopover()
 	await updatePosition()
 	popoverRef.value.style.opacity = ''
+
+	// For keyboard-driven opens, move focus into the menu so arrow keys work immediately.
+	if (openedViaKeyboard) {
+		focusFirstItem()
+		openedViaKeyboard = false
+	}
 }
 
 function internalHide(opts?: { restoreFocus?: boolean }) {
@@ -171,6 +181,62 @@ function internalHide(opts?: { restoreFocus?: boolean }) {
 	popoverRef.value?.hidePopover()
 }
 
+// --- Keyboard accessibility helpers -------------------------------------------------
+
+const FOCUSABLE_SELECTOR = [
+	'a[href]',
+	'button:not([disabled])',
+	'input:not([disabled])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'[tabindex]:not([tabindex="-1"])',
+].join(',')
+
+function getFocusableItems(): HTMLElement[] {
+	if (!popoverRef.value) return []
+	return Array.from(popoverRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+		.filter(el => el.offsetParent !== null || el === document.activeElement)
+}
+
+function focusItemAt(index: number) {
+	const items = getFocusableItems()
+	if (items.length === 0) return
+	const wrapped = (index + items.length) % items.length
+	items[wrapped]?.focus()
+}
+
+// Move focus into the menu (first focusable item) — used for keyboard-driven opens.
+function focusFirstItem() {
+	if (props.noAutoFocus) return
+	focusItemAt(0)
+}
+
+// Arrow-key navigation while the popover is open.
+function onPopoverKeydown(e: KeyboardEvent) {
+	const items = getFocusableItems()
+	if (items.length === 0) return
+	const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+
+	switch (e.key) {
+		case 'ArrowDown':
+			e.preventDefault()
+			focusItemAt(currentIndex < 0 ? 0 : currentIndex + 1)
+			break
+		case 'ArrowUp':
+			e.preventDefault()
+			focusItemAt(currentIndex < 0 ? items.length - 1 : currentIndex - 1)
+			break
+		case 'Home':
+			e.preventDefault()
+			focusItemAt(0)
+			break
+		case 'End':
+			e.preventDefault()
+			focusItemAt(items.length - 1)
+			break
+	}
+}
+
 const show = internalShow
 function hide() { internalHide() }
 
@@ -219,10 +285,50 @@ let showTimer: ReturnType<typeof setTimeout> | undefined
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 function clearTimers() { clearTimeout(showTimer); clearTimeout(hideTimer) }
 
-function onTriggerClick() {
-	if (!isClickTrigger.value) return
+// Guard against double toggles within the same tick. The <Btn> trigger handles keydown.enter/space
+// itself AND the browser also fires a native click for Enter/Space on a <button>, which would
+// otherwise toggle the popover twice (open → immediately close, the "opens for a second" bug).
+let lastToggleAt = 0
+function toggle(viaKeyboard: boolean) {
+	const now = Date.now()
+	if (now - lastToggleAt < 50) return
+	lastToggleAt = now
+	openedViaKeyboard = viaKeyboard
 	isOpen() ? internalHide() : internalShow()
 }
+
+function onTriggerClick(e?: MouseEvent) {
+	if (!isClickTrigger.value) return
+	// A click via keyboard (Enter/Space) reports detail === 0; a real pointer click reports >= 1.
+	toggle(!!e && e.detail === 0)
+}
+
+// Keyboard activation on the trigger. Works for ALL trigger types (including hover-only) so the
+// dropdown is reachable by keyboard users — WCAG requires hover-revealed content to also open on focus.
+function onTriggerKeydown(e: KeyboardEvent) {
+	switch (e.key) {
+		case 'Enter':
+		case ' ':
+		case 'Spacebar':
+			e.preventDefault()
+			toggle(true)
+			break
+		case 'ArrowDown':
+			e.preventDefault()
+			openedViaKeyboard = true
+			// Arrow keys are a deliberate request to navigate, so move focus into the menu
+			// even when noAutoFocus is set (noAutoFocus only suppresses focus-on-open).
+			if (isOpen()) focusItemAt(0)
+			else internalShow()
+			break
+		case 'ArrowUp':
+			e.preventDefault()
+			openedViaKeyboard = true
+			if (isOpen()) focusItemAt(-1)
+			else internalShow()
+			break
+	}
+}
 function onTriggerMouseenter() {
 	if (!isHoverTrigger.value) return
 	clearTimeout(hideTimer)
@@ -272,8 +378,11 @@ defineExpose({ show, hide, shown })
 		<div
 			v-if="!referenceEl"
 			ref="triggerWrapRef" v-bind="$attrs"
+			aria-haspopup="menu"
+			:aria-expanded="shown"
+			:aria-controls="bglId"
 			@mouseenter="onTriggerMouseenter" @mouseleave="onTriggerMouseleave" @focus="onTriggerMouseenter"
-			@blur="onTriggerMouseleave"
+			@blur="onTriggerMouseleave" @keydown="onTriggerKeydown"
 		>
 			<slot name="trigger" :show :hide :shown>
 				<Btn
@@ -286,11 +395,12 @@ defineExpose({ show, hide, shown })
 		<!-- Popup — teleported to closest dialog[open] or body, promoted to top layer via popover -->
 		<Teleport :to="teleportTarget">
 			<div
-				ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"
+				:id="bglId" ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"
+				role="menu"
 				style="border-radius: var(--bgl-card-border-radius);"
 				:class="{ 'bgl-dropdown--no-positioning': shouldDisablePositioning, 'bg-white shadow': props.card }"
 				@toggle="onPopoverToggle" @mouseenter="onPopoverMouseenter" @mouseleave="onPopoverMouseleave"
-				@focus="onPopoverMouseenter" @blur="onPopoverMouseleave"
+				@focus="onPopoverMouseenter" @blur="onPopoverMouseleave" @keydown="onPopoverKeydown"
 			>
 				<div class="bgl-dropdown__backdrop" />
 				<div class="bgl-dropdown__content overflow-hidden" :class="{ 'display-flex column': props.card }"