@poveste/app 0.14.0 → 0.16.0

package/src/app/components/app/TopBarChipItem.vue

@@ -2,7 +2,7 @@
   <!-- Without an href this is not a link, so `aria-label` on it is prohibited and
        it has no accessible role. Chip items are used both ways (#310). -->
   <a
-    :role="$attrs.href ? undefined : 'button'"
+    :role="$attrs['href'] ? undefined : 'button'"
     class="poveste-top-bar-chip-item flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 active:bg-white/70 dark:hover:bg-white/10 dark:active:bg-white/15 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors"
   >
     <slot />

package/src/app/components/base/BaseDropdown.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { HstTooltip, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, portalTarget } from '@poveste/controls'
+import { onMounted, ref, shallowRef } from 'vue'
+
+// The wrapper below is what a caller's class and `data-testid` are for, the way
+// they were on `VDropdown` itself.
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  /** floating-vue's `skidding`: a shift along the trigger's own edge. */
+  alignOffset?: number
+  /**
+   * Refuses to open, rather than disabling the button. A disabled button takes
+   * no pointer events, and the one site that sets this still wants its tooltip.
+   */
+  disabled?: boolean
+  /**
+   * Rendered here rather than around the trigger at the call site, because
+   * where the tooltip sits relative to the anchor below decides whether this
+   * opens in the right place at all.
+   */
+  tooltip?: string | null | undefined
+}>(), {
+  side: 'bottom',
+  align: 'center',
+  alignOffset: 0,
+  disabled: false,
+  tooltip: undefined,
+})
+
+const open = ref(false)
+
+function setOpen(value: boolean) {
+  open.value = value && !props.disabled
+}
+
+// After mount, not during setup: the chrome's root is only in the document once
+// the tree it wraps has been inserted.
+const target = shallowRef<HTMLElement>()
+onMounted(() => {
+  target.value = portalTarget()
+})
+</script>
+
+<template>
+  <PopoverRoot
+    :open="open"
+    @update:open="setOpen"
+  >
+    <!-- The anchor is the wrapper, not the trigger, and it has to sit outside
+    the tooltip. A tooltip is a popper too, so a trigger rendered inside one
+    registers itself as *its* anchor, and the panel then has none: it opens at
+    the top-left corner, off-screen, which a test asking only whether it is
+    visible still passes. -->
+    <PopoverAnchor as-child>
+      <div
+        v-bind="$attrs"
+        class="poveste-dropdown-trigger"
+      >
+        <!-- No tooltip while the panel is up: it would sit on top of the first
+        row. -->
+        <HstTooltip :content="open ? null : tooltip">
+          <PopoverTrigger as-child>
+            <slot :open="open" />
+          </PopoverTrigger>
+        </HstTooltip>
+      </div>
+    </PopoverAnchor>
+
+    <PopoverPortal
+      v-if="target"
+      :to="target"
+    >
+      <PopoverContent
+        class="poveste-dropdown"
+        :side="side"
+        :align="align"
+        :side-offset="8"
+        :align-offset="alignOffset"
+        :collision-padding="4"
+      >
+        <slot
+          name="popper"
+          :close="() => setOpen(false)"
+        />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<style lang="pcss">
+/* floating-vue put the same zero on its own wrapper, and the triggers that
+   wanted text to sit normally say `leading-normal` because of it. */
+.poveste-dropdown-trigger {
+  line-height: 0;
+}
+
+.poveste-dropdown {
+  background: #fff;
+  color: #000;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 6px 30px rgb(0 0 0 / .1);
+  /* A row that paints to the panel's edge has to stop at the rounded corner,
+     which the `overflow-y: auto` on floating-vue's inner element did. */
+  overflow: hidden;
+  z-index: 100;
+
+  /*
+   * What Tailwind's `dark:` compiles to, spelled out because `@apply` in a
+   * single-file component needs a `@reference` and no component here has one.
+   * Not `.ptw-dark &`: the chrome CSS is wrapped in `@scope` and `.ptw-dark`
+   * sits on `<html>`, above the scope root, so a descendant rule keyed on it
+   * never matches and the panel falls back to the light colours (#101). This
+   * puts the condition on the subject instead, and adds no specificity — so it
+   * has to come after the light values to win.
+   */
+  &:where(.ptw-dark, .ptw-dark *) {
+    background: var(--color-gray-700);
+    border-color: var(--color-gray-850);
+    color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[data-state='open'] {
+    transform-origin: var(--reka-popover-content-transform-origin);
+    animation: poveste-dropdown-open .15s cubic-bezier(0, 1, .5, 1);
+  }
+}
+
+@keyframes poveste-dropdown-open {
+  from {
+    opacity: 0;
+    transform: scale(.75);
+  }
+}
+</style>

package/src/app/components/base/BaseEmpty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="poveste-base-empty base-empty flex flex-col items-center justify-center space-y-4 py-12 h-full text-center text-gray-400  text-lg">
+  <div class="poveste-base-empty base-empty flex flex-col items-center justify-center space-y-4 py-12 h-full text-center text-gray-500 dark:text-gray-400 text-lg">
     <slot />
   </div>
 </template>

package/src/app/components/base/BaseListItemLink.vue

@@ -26,9 +26,11 @@ export default defineComponent({
   },
 
   setup(props, { emit }) {
-    function handleNavigate(event, navigate: (event) => unknown) {
+    function handleNavigate(event: MouseEvent | KeyboardEvent, navigate: (event?: MouseEvent) => unknown) {
       emit('navigate')
-      navigate(event)
+      // vue-router types this as a click, but its guard reads only the modifier
+      // keys and `defaultPrevented`, which a key press carries too.
+      navigate(event as MouseEvent)
     }
 
     return {

package/src/app/components/base/BaseOverflowMenu.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import type { SetupContext, VNode } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useResizeObserver } from '@vueuse/core'
 import { computed, h, onBeforeUnmount, reactive, ref } from 'vue'
+import BaseDropdown from './BaseDropdown.vue'
 
 // Container
 
@@ -11,9 +13,9 @@ const el = ref<HTMLDivElement>()
 
 const availableWidth = ref(0)
 
-useResizeObserver(el, (entries) => {
-  const containerWidth = entries[0].contentRect.width
-  availableWidth.value = containerWidth - overflowButtonWidth
+useResizeObserver(el, ([entry]) => {
+  if (!entry) return
+  availableWidth.value = entry.contentRect.width - overflowButtonWidth
 })
 
 // Children
@@ -28,8 +30,8 @@ const children = ref(new Map<HTMLElement, ChildState>())
 const visibleChildrenCount = computed(() => {
   let width = 0
   const c = [...children.value.values()].sort((a, b) => a.index - b.index)
-  for (let i = 0; i < c.length; i++) {
-    width += c[i].width
+  for (const [i, child] of c.entries()) {
+    width += child.width
     if (width > availableWidth.value) {
       return i
     }
@@ -43,18 +45,18 @@ const visibleChildrenCount = computed(() => {
 const ChildWrapper = {
   name: 'ChildWrapper',
   props: ['index'],
-  setup(props, { slots }) {
+  setup(props: { index: number }, { slots }: SetupContext) {
     const el = ref<HTMLDivElement>()
 
     const state = reactive({ width: 0, index: props.index })
 
-    useResizeObserver(el, (entries) => {
+    useResizeObserver(el, ([entry]) => {
       // The observer only fires for an element it is observing, so this is
       // never null here — but `children` is keyed by the element, and an
       // undefined key would silently make a second entry for the same child.
       const element = el.value
-      if (!element) return
-      const width = entries[0].contentRect.width
+      if (!element || !entry) return
+      const width = entry.contentRect.width
       if (!children.value.has(element)) {
         children.value.set(element, state)
       }
@@ -68,24 +70,24 @@ const ChildWrapper = {
 
     const visible = computed(() => visibleChildrenCount.value > state.index)
 
-    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots.default())
+    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots['default']?.())
   },
 }
 
 /**
  * Wraps each child with a <ChildWrapper>
  */
-function ChildrenRender(props, { slots }) {
-  const [fragment] = slots.default()
-  return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode]))
+function ChildrenRender(_props: unknown, { slots }: SetupContext) {
+  const children = slots['default']?.()[0]?.children
+  return Array.isArray(children) ? children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode])) : []
 }
 
 /**
  * Only renders a part of a children list
  */
-function ChildrenSlice(props, { slots }) {
-  const [fragment] = slots.default()
-  return fragment.children.slice(props.start, props.end)
+function ChildrenSlice(props: { start?: number, end?: number }, { slots }: SetupContext) {
+  const children = slots['default']?.()[0]?.children
+  return Array.isArray(children) ? children.slice(props.start, props.end) as VNode[] : []
 }
 </script>
 
@@ -98,18 +100,22 @@ function ChildrenSlice(props, { slots }) {
       <slot />
     </ChildrenRender>
 
-    <VDropdown
+    <BaseDropdown
       v-if="visibleChildrenCount < children.size"
     >
-      <div
-        role="button"
+      <!-- A `<button>`, where this was a `role="button"` div with no `tabindex`:
+      the popover writes `aria-expanded` onto whatever it is given, and axe
+      rejects that on an element with no role it can name (#924). A keyboard
+      reaches the hidden tabs now, which it could not before. -->
+      <button
+        aria-label="More"
         class="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900 w-8 h-full flex items-center justify-center absolute top-0 right-0"
       >
         <Icon
           icon="carbon:caret-down"
           class="w-4 h-4 opacity-50 group-hover:opacity-100"
         />
-      </div>
+      </button>
 
       <template #popper>
         <div class="flex flex-col items-stretch">
@@ -120,6 +126,6 @@ function ChildrenSlice(props, { slots }) {
           </ChildrenSlice>
         </div>
       </template>
-    </VDropdown>
+    </BaseDropdown>
   </div>
 </template>

package/src/app/components/base/BaseSelect.vue

@@ -1,12 +1,22 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
 import { Icon } from '@iconify/vue'
-import { Dropdown as VDropdown } from 'floating-vue'
-import { computed } from 'vue'
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, portalTarget } from '@poveste/controls'
+import { refAutoReset } from '@vueuse/core'
+import { computed, nextTick, onMounted, ref, shallowRef, useId, watch } from 'vue'
+
+/*
+ * The WAI-ARIA select-only combobox: the trigger keeps focus and names the active
+ * option through `aria-activedescendant`, so the popup needs no focus of its own.
+ * It was a click-only `<div>` with `<div>` options, which a keyboard could not open
+ * and a screen reader did not list (#828).
+ */
 
 const props = defineProps<{
   modelValue: string
   options: Record<string, string> | Array<string>
+  /** The accessible name of the picker and its list. */
+  label: string
 }>()
 
 const emit = defineEmits<{
@@ -21,55 +31,274 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   return props.options
 })
 
+const entries = computed(() => Object.entries(formattedOptions.value))
+
 const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
 
-function selectValue(value: string, hide: () => void) {
-  emit('update:modelValue', value)
-  emit('select', value)
-  hide()
+const id = useId()
+const listboxId = `${id}-listbox`
+function optionId(index: number) {
+  return `${id}-option-${index}`
+}
+
+const combobox = ref<HTMLElement>()
+const open = ref(false)
+const activeIndex = ref(-1)
+
+function openList(index?: number) {
+  const selected = entries.value.findIndex(([value]) => value === props.modelValue)
+  activeIndex.value = index ?? Math.max(selected, 0)
+  open.value = true
+}
+
+/*
+ * Type-to-select, as the pattern recommends: typed characters within half a second
+ * form one search, and repeating a single character steps through the options
+ * that start with it.
+ */
+const typed = refAutoReset('', 500)
+
+function isTypeaheadKey(event: KeyboardEvent) {
+  if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) {
+    return false
+  }
+  // Space chooses, unless it continues a search already under way.
+  return event.key !== ' ' || typed.value !== ''
+}
+
+function typeahead(char: string) {
+  const previous = typed.value
+  typed.value = previous + char.toLowerCase()
+  const repeated = [...typed.value].every(c => c === typed.value[0])
+  const search = repeated ? typed.value.charAt(0) : typed.value
+  // A new or repeated character looks past the active option; a longer search may
+  // still match it.
+  const start = repeated ? activeIndex.value + 1 : Math.max(activeIndex.value, 0)
+  const count = entries.value.length
+  for (let offset = 0; offset < count; offset++) {
+    const index = (start + offset) % count
+    if (entries.value[index]?.[1].toLowerCase().startsWith(search)) {
+      activeIndex.value = index
+      return
+    }
+  }
+}
+
+function close() {
+  open.value = false
+}
+
+function choose(index: number) {
+  const entry = entries.value[index]
+  if (entry) {
+    emit('update:modelValue', entry[0])
+    emit('select', entry[0])
+  }
+  close()
+  combobox.value?.focus()
 }
+
+function onKeydown(event: KeyboardEvent) {
+  const last = entries.value.length - 1
+
+  if (isTypeaheadKey(event)) {
+    event.preventDefault()
+    if (!open.value) {
+      openList()
+    }
+    typeahead(event.key)
+    return
+  }
+
+  if (!open.value) {
+    if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault()
+      openList(event.key === 'Home' ? 0 : event.key === 'End' ? last : undefined)
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, last)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      if (event.altKey) {
+        choose(activeIndex.value)
+      }
+      else {
+        activeIndex.value = Math.max(activeIndex.value - 1, 0)
+      }
+      break
+    case 'Home':
+      event.preventDefault()
+      activeIndex.value = 0
+      break
+    case 'End':
+      event.preventDefault()
+      activeIndex.value = last
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      choose(activeIndex.value)
+      break
+    case 'Escape':
+      event.preventDefault()
+      close()
+      break
+    case 'Tab':
+      // Keeps the default: focus moves on, with the active option chosen.
+      choose(activeIndex.value)
+      break
+  }
+}
+
+// After mount, not during setup: the chrome's root is only in the document once
+// the tree it wraps has been inserted.
+const target = shallowRef<HTMLElement>()
+onMounted(() => {
+  target.value = portalTarget()
+})
+
+/*
+ * Reka spares its own trigger from the dismiss it fires on any pointer or focus
+ * landing outside the popup — but only a `PopoverTrigger` registers as one, and
+ * this trigger cannot be that: `PopoverTrigger` writes its own `aria-expanded`,
+ * `aria-controls` and `aria-haspopup="dialog"` over the listbox wiring the
+ * combobox pattern is built on. So the dismiss is declined here instead.
+ *
+ * Without it the popup is impossible to close by clicking the picker: the
+ * dismiss lands on `pointerdown`, the handler below then reads `open` as false
+ * and opens it again, and the whole thing looks like a click that did nothing.
+ * Neither aria spec catches it — both drive this from the keyboard, on purpose.
+ */
+function keepOpenOnTheTrigger(event: Event) {
+  if (combobox.value?.contains(event.target as Node)) {
+    event.preventDefault()
+  }
+}
+
+/*
+ * A capped list scrolls, and `aria-activedescendant` moves an option the browser
+ * has no reason to reveal — the focus never leaves the trigger, so nothing
+ * scrolls on its own.
+ */
+watch([open, activeIndex], async ([isOpen, index]) => {
+  if (!isOpen || index < 0) {
+    return
+  }
+  await nextTick()
+  target.value?.ownerDocument.getElementById(optionId(index))?.scrollIntoView({ block: 'nearest' })
+})
+
+defineExpose({
+  focus: () => combobox.value?.focus(),
+})
 </script>
 
 <template>
-  <VDropdown
-    class="poveste-base-select"
-    auto-size
-    auto-boundary-max-size
-  >
-    <div
-      class="cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
+  <PopoverRoot v-model:open="open">
+    <PopoverAnchor
+      as-child
+      class="poveste-base-select"
     >
-      <div class="flex-1 truncate">
-        <slot :label="selectedLabel">
-          {{ selectedLabel }}
-        </slot>
+      <div
+        ref="combobox"
+        role="combobox"
+        tabindex="0"
+        :aria-label="label"
+        aria-haspopup="listbox"
+        :aria-expanded="open"
+        :aria-controls="open ? listboxId : undefined"
+        :aria-activedescendant="open && activeIndex >= 0 ? optionId(activeIndex) : undefined"
+        class="cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
+        @click="open ? close() : openList()"
+        @keydown="onKeydown"
+      >
+        <div class="flex-1 truncate">
+          <slot :label="selectedLabel">
+            {{ selectedLabel }}
+          </slot>
+        </div>
+        <Icon
+          icon="carbon:chevron-sort"
+          class="w-4 h-4 flex-none ml-auto"
+        />
       </div>
-      <Icon
-        icon="carbon:chevron-sort"
-        class="w-4 h-4 flex-none ml-auto"
-      />
-    </div>
-    <template #popper="{ hide }">
-      <div class="flex flex-col bg-gray-50 dark:bg-gray-700">
+    </PopoverAnchor>
+
+    <PopoverPortal
+      v-if="target"
+      :to="target"
+    >
+      <!-- The popup takes no focus at either end: the combobox pattern keeps it on
+           the trigger, which owns the keys. Deliberate rather than load-bearing
+           today — Reka moves focus into the content on open, and only skips it
+           here because the options are divs with nothing focusable in them. The
+           aria specs cannot fail on this, so removing it would look safe. -->
+      <PopoverContent
+        class="poveste-base-select-popper"
+        align="start"
+        :side-offset="6"
+        :collision-padding="8"
+        @open-auto-focus.prevent
+        @close-auto-focus.prevent
+        @interact-outside="keepOpenOnTheTrigger"
+      >
         <div
-          v-for="(label, value) in formattedOptions"
-          v-bind="{ ...$attrs, class: null, style: null }"
-          :key="label"
-          class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
-          :class="{
-            'bg-primary-200 dark:bg-primary-800': props.modelValue === value,
-          }"
-          @click="selectValue(value, hide)"
+          :id="listboxId"
+          role="listbox"
+          :aria-label="label"
+          class="poveste-base-select-options flex flex-col bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
         >
-          <slot
-            name="option"
-            :label="label"
-            :value="value"
+          <div
+            v-for="([value, optionLabel], index) of entries"
+            :id="optionId(index)"
+            :key="value"
+            role="option"
+            :aria-selected="value === modelValue"
+            class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
+            :class="{
+              'bg-primary-200 dark:bg-primary-800': value === modelValue,
+              'outline outline-2 -outline-offset-2 outline-primary-500': index === activeIndex,
+            }"
+            @mousedown.prevent
+            @mousemove="activeIndex = index"
+            @click="choose(index)"
           >
-            {{ label }}
-          </slot>
+            <slot
+              name="option"
+              :label="optionLabel"
+              :value="value"
+            >
+              {{ optionLabel }}
+            </slot>
+          </div>
         </div>
-      </div>
-    </template>
-  </VDropdown>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
 </template>
+
+<style lang="pcss">
+.poveste-base-select-popper {
+  /* The trigger's own width, which is what floating-vue's `auto-size` gave. */
+  min-width: var(--reka-popper-anchor-width);
+  z-index: 100;
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.poveste-base-select-options {
+  /* The room Reka measured between the trigger and the viewport edge, which is
+     what `auto-boundary-max-size` gave: a story with more presets than fit below
+     its picker otherwise drew them off the screen, reachable by nothing. */
+  max-height: var(--reka-popover-content-available-height);
+  overflow-y: auto;
+}
+</style>