@poveste/app 0.14.0 → 0.16.0

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, useId, watch } from 'vue'
 
 const props = defineProps({
   orientation: {
@@ -49,6 +49,17 @@ const props = defineProps({
     default: true,
   },
 
+  /**
+   * What the divider is called to a screen reader.
+   *
+   * Four are on screen at once and they resize different things, so a shared
+   * default would announce four identical separators.
+   */
+  label: {
+    type: String,
+    default: 'Resize panels',
+  },
+
   /**
    * Whether the first pane exists at all.
    *
@@ -176,7 +187,7 @@ let startPosition = 0
 let startSplit = 0
 const el = ref<HTMLElement>()
 
-function dragStart(e) {
+function dragStart(e: MouseEvent) {
   dragging.value = true
   startPosition = props.orientation === 'landscape' ? e.pageX : e.pageY
   startSplit = boundSplit.value
@@ -184,7 +195,7 @@ function dragStart(e) {
   window.addEventListener('mouseup', dragEnd)
 }
 
-function dragMove(e) {
+function dragMove(e: MouseEvent) {
   if (dragging.value) {
     // The move listener is on `window`, so it can outlive the element for the
     // rest of a drag if the pane unmounts under it.
@@ -225,6 +236,56 @@ watch(hasBothPanes, (both) => {
   }
 })
 
+/*
+ * The keyboard half, which the divider had none of: it was a `div` with a
+ * `mousedown` handler, so the layout could only be changed with a pointer and a
+ * screen reader was told nothing was there (#995).
+ *
+ * The arrow step is one unit of whatever `split` is measured in — percent
+ * normally, pixels under `fixed` — and `PageUp`/`PageDown` move by ten, because
+ * one pixel per press is not a usable way to move a pixel-sized pane.
+ */
+const STEP = 1
+const PAGE_STEP = 10
+
+function moveBy(amount: number) {
+  currentSplit.value = Math.min(props.max, Math.max(props.min, boundSplit.value + amount))
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const back = props.orientation === 'landscape' ? 'ArrowLeft' : 'ArrowUp'
+  const forward = props.orientation === 'landscape' ? 'ArrowRight' : 'ArrowDown'
+
+  switch (event.key) {
+    case back:
+      moveBy(-STEP)
+      break
+    case forward:
+      moveBy(STEP)
+      break
+    case 'PageUp':
+      moveBy(-PAGE_STEP)
+      break
+    case 'PageDown':
+      moveBy(PAGE_STEP)
+      break
+    case 'Home':
+      currentSplit.value = props.min
+      break
+    case 'End':
+      currentSplit.value = props.max
+      break
+    default:
+      return
+  }
+
+  // Only for a key this handles: the arrows scroll the pane otherwise, and a
+  // blanket `prevent` would stop that everywhere the divider has focus.
+  event.preventDefault()
+}
+
+const firstPaneId = useId()
+
 function removeDragListeners() {
   window.removeEventListener('mousemove', dragMove)
   window.removeEventListener('mouseup', dragEnd)
@@ -248,6 +309,7 @@ onUnmounted(() => {
   >
     <div
       v-if="showFirst"
+      :id="firstPaneId"
       class="relative top-0 left-0 z-20"
       :class="{
         'pointer-events-none': dragging,
@@ -260,7 +322,15 @@ onUnmounted(() => {
 
       <div
         v-if="hasBothPanes"
-        class="dragger absolute z-100 hover:bg-primary-500/50 transition-colors duration-150 delay-150"
+        role="separator"
+        tabindex="0"
+        :aria-label="label"
+        :aria-orientation="orientation === 'landscape' ? 'vertical' : 'horizontal'"
+        :aria-controls="firstPaneId"
+        :aria-valuenow="Math.round(boundSplit)"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        class="dragger absolute z-100 hover:bg-primary-500/50 focus-visible:bg-primary-500/50 focus-visible:outline-2 focus-visible:outline-primary-500 transition-colors duration-150 delay-150"
         :class="{
           'top-0 bottom-0 cursor-ew-resize': orientation === 'landscape',
           'left-0 right-0 cursor-ns-resize': orientation === 'portrait',
@@ -268,6 +338,7 @@ onUnmounted(() => {
           'bg-primary-500/25': dragging,
         }"
         @mousedown.prevent="dragStart"
+        @keydown="onKeydown"
       />
     </div>
     <div

package/src/app/components/command/PromptSelect.vue

@@ -77,7 +77,7 @@ const {
 } = useSelection(formattedOptions)
 
 function selectIndex(index: number) {
-  const result = formattedOptions.value[index].value
+  const result = formattedOptions.value[index]?.value
   if (result) {
     model.value = result
   }

package/src/app/components/panel/ControlsComponentPropItem.vue

@@ -2,7 +2,7 @@
 import type { AutoPropComponentDefinition, PropDefinition } from '@poveste/shared'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { HstCheckbox, HstJson, HstNumber, HstText } from '@poveste/controls'
+import { HstCheckbox, HstJson, HstNumber, HstText, HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -50,24 +50,36 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
 </script>
 
 <template>
-  <component
-    :is="comp"
+  <!-- The remove action is beside the control, not in its actions slot. Inside
+       the control's <label> or checkbox, a label forwarded clicks to it, its
+       name joined the control's name, and Space on it toggled the checkbox (#827). -->
+  <div
     v-if="comp"
-    v-model="model"
-    :placeholder="model === undefined ? definition?.default : null"
-    class="poveste-controls-component-prop-item"
-    :title="`${definition.name}${canReset ? ' *' : ''}`"
+    class="flex items-end hover:bg-primary-100 dark:hover:bg-primary-800"
   >
-    <template #actions>
-      <Icon
-        v-tooltip="'Remove override'"
-        icon="carbon:erase"
-        class="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
+    <component
+      :is="comp"
+      v-model="model"
+      :placeholder="model === undefined ? definition?.default : null"
+      class="poveste-controls-component-prop-item grow min-w-0"
+      :title="`${definition.name}${canReset ? ' *' : ''}`"
+    />
+    <HstTooltip content="Remove override">
+      <button
+        type="button"
+        :aria-label="`Remove override of ${definition.name}`"
+        :disabled="!canReset"
+        class="flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
         :class="[
-          canReset ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
+          canReset ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
         ]"
-        @click.stop="reset()"
-      />
-    </template>
-  </component>
+        @click="reset()"
+      >
+        <Icon
+          icon="carbon:erase"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+  </div>
 </template>

package/src/app/components/panel/ControlsComponentProps.vue

@@ -2,6 +2,7 @@
 import type { AutoPropComponentDefinition } from '@poveste/shared'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import ControlsComponentPropItem from './ControlsComponentPropItem.vue'
 
 defineProps<{
@@ -13,11 +14,12 @@ defineProps<{
 <template>
   <div class="poveste-controls-component-props">
     <div class="font-mono p-2 flex items-center gap-1">
-      <Icon
-        v-tooltip="'Auto-detected props'"
-        icon="carbon:flash"
-        class="w-4 h-4 text-primary-500 flex-none"
-      />
+      <HstTooltip content="Auto-detected props">
+        <Icon
+          icon="carbon:flash"
+          class="w-4 h-4 text-primary-500 flex-none"
+        />
+      </HstTooltip>
       <div>
         <span class="opacity-30">&lt;</span>{{ definition.name }}<span class="opacity-30">&gt;</span>
       </div>

package/src/app/components/panel/ControlsComponentState.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Variant } from '@poveste/shared'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 import ControlsComponentStateItem from './ControlsComponentStateItem.vue'
 
@@ -15,11 +16,12 @@ const stateKeys = computed(() => Object.keys(props.variant.state || {})
 <template>
   <div class="poveste-controls-component-init-state">
     <div class="p-2 flex items-center gap-1">
-      <Icon
-        v-tooltip="'Auto-detected state'"
-        icon="carbon:data-vis-1"
-        class="w-4 h-4 text-primary-500 flex-none"
-      />
+      <HstTooltip content="Auto-detected state">
+        <Icon
+          icon="carbon:data-vis-1"
+          class="w-4 h-4 text-primary-500 flex-none"
+        />
+      </HstTooltip>
       <div>
         State
       </div>

package/src/app/components/panel/PaneTabs.vue

@@ -25,13 +25,13 @@ const hasEvents = computed(() => eventsStore.events.length)
   <BaseOverflowMenu class="poveste-pane-tabs h-10 flex-none border-b border-gray-100 dark:border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
-      :matched="!$route.query.tab"
+      :matched="!$route.query['tab']"
     >
       Controls
     </BaseTab>
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
-      :matched="$route.query.tab === 'docs'"
+      :matched="$route.query['tab'] === 'docs'"
       :class="{
         'opacity-70': !renderedDoc,
       }"
@@ -40,7 +40,7 @@ const hasEvents = computed(() => eventsStore.events.length)
     </BaseTab>
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
-      :matched="$route.query.tab === 'events'"
+      :matched="$route.query['tab'] === 'events'"
       :class="{
         'opacity-70': !hasEvents,
       }"
@@ -54,13 +54,13 @@ const hasEvents = computed(() => eventsStore.events.length)
     <template #overflow>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: '' } }"
-        :matched="!$route.query.tab"
+        :matched="!$route.query['tab']"
       >
         Controls
       </BaseOverflowTab>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
-        :matched="$route.query.tab === 'docs'"
+        :matched="$route.query['tab'] === 'docs'"
         :class="{
           'opacity-70': !renderedDoc,
         }"
@@ -69,7 +69,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       </BaseOverflowTab>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
-        :matched="$route.query.tab === 'events'"
+        :matched="$route.query['tab'] === 'events'"
         :class="{
           'opacity-70': !hasEvents,
         }"

package/src/app/components/panel/StatePresets.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { applyState, clone } from '@poveste/shared'
-import { onClickOutside, useStorage, useTimeoutFn } from '@vueuse/core'
+import { onClickOutside, useLiveAnnouncer, useStorage, useTimeoutFn } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { toPresetState, toRawDeep } from '../../util/state'
 import BaseSelect from '../base/BaseSelect.vue'
@@ -41,7 +42,7 @@ const presetStates = useStorage<Map<string, { state: Record<string, unknown>, la
 )
 
 const presetsOptions = computed(() => {
-  const options = { [DEFAULT_ID]: 'Initial state' }
+  const options: Record<string, string> = { [DEFAULT_ID]: 'Initial state' }
   presetStates.value.forEach((value, key) => {
     options[key] = value.label
   })
@@ -53,7 +54,7 @@ function resetState() {
   applyState(props.variant.state, clone(defaultState))
 }
 
-function applyPreset(id) {
+function applyPreset(id: string) {
   if (id === DEFAULT_ID) {
     resetState()
   }
@@ -75,6 +76,7 @@ onMounted(() => {
 
 const input = ref<HTMLInputElement>()
 const select = ref<HTMLInputElement>()
+const picker = ref<InstanceType<typeof BaseSelect>>()
 const canEdit = computed(() => selectedOption.value !== DEFAULT_ID)
 const isEditing = ref(false)
 
@@ -102,6 +104,7 @@ const editingLabel = computed({
 })
 
 const savedNotif = ref(false)
+const { polite } = useLiveAnnouncer()
 const savedTimeout = useTimeoutFn(() => {
   savedNotif.value = false
 }, 1000)
@@ -114,9 +117,10 @@ async function savePreset() {
   preset.state = toPresetState(props.variant.state, omitKeys)
   savedNotif.value = true
   savedTimeout.start()
+  polite('Preset saved')
 }
 
-function deletePreset(id) {
+function deletePreset(id: string) {
   // @TODO custom confirm modal UI
   // eslint-disable-next-line no-alert
   if (!confirm('Are you sure you want to delete this preset?')) {
@@ -141,11 +145,20 @@ async function startEditing() {
   input.value?.select()
 }
 
-function stopEditing() {
+async function stopEditing(refocus = false) {
+  if (!isEditing.value) {
+    return
+  }
   isEditing.value = false
+  // Finishing a rename from the keyboard unmounts the field that had focus, so
+  // hand it to the picker, which now shows the new name.
+  if (refocus) {
+    await nextTick()
+    picker.value?.focus()
+  }
 }
 
-onClickOutside(select, stopEditing)
+onClickOutside(select, () => stopEditing())
 </script>
 
 <template>
@@ -154,79 +167,108 @@ onClickOutside(select, stopEditing)
       ref="select"
       class="flex-1 min-w-0"
     >
+      <!-- Swapped for the picker rather than put inside it: a text field inside a
+           combobox is a control nested in a control (#828). -->
+      <input
+        v-if="isEditing"
+        ref="input"
+        v-model="editingLabel"
+        type="text"
+        aria-label="Preset name"
+        class="text-inherit bg-transparent w-full px-2 h-[27px] -my-1 border border-solid border-primary-500 rounded-sm outline-none"
+        @keydown.enter="stopEditing(true)"
+        @keydown.escape="stopEditing(true)"
+      >
       <BaseSelect
+        v-else
+        ref="picker"
         v-model="selectedOption"
+        label="Preset"
         :options="presetsOptions"
         @dblclick="startEditing()"
-        @keydown.enter="stopEditing()"
-        @keydown.escape="stopEditing()"
         @select="id => applyPreset(id)"
-      >
-        <template #default="{ label }">
-          <input
-            v-if="isEditing"
-            ref="input"
-            v-model="editingLabel"
-            type="text"
-            class="text-inherit bg-transparent w-full h-full outline-none"
-            @click.stop.prevent
-          >
-
-          <div
-            v-else
-            class="flex items-center gap-2"
-          >
-            <span class="flex-1 truncate">
-              {{ label }}
-            </span>
-            <Icon
-              v-if="canEdit"
-              v-tooltip="'Rename this preset'"
-              icon="carbon:edit"
-              class="flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-              @click.stop="startEditing()"
-            />
-          </div>
-        </template>
-
-        <template #option="{ label, value }">
-          <div class="flex gap-2 items-center">
-            <span
-              class="flex-1 truncate"
-            >{{ label }}</span>
-            <Icon
-              v-if="value !== DEFAULT_ID"
-              v-tooltip="'Delete this preset'"
-              icon="carbon:trash-can"
-              class="flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-              @click.stop="deletePreset(value)"
-            />
-          </div>
-        </template>
-      </BaseSelect>
+      />
     </div>
-    <Icon
-      v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
-      data-testid="preset-save"
-      :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
-      class="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-      :class="[
-        canEdit ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
-      ]"
-      @click="savePreset()"
-    />
-    <Icon
-      v-tooltip="'Create new preset'"
-      data-testid="preset-create"
-      icon="carbon:add-alt"
-      class="cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-      @click="createPreset()"
-    />
-    <Icon
-      v-tooltip="'Reset to initial state'"
-      icon="carbon:reset"
-      class="cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-      @click="resetState()"
-    />
+    <HstTooltip :content="canEdit ? 'Rename this preset' : null">
+      <button
+        type="button"
+        data-testid="preset-rename"
+        aria-label="Rename preset"
+        :disabled="!canEdit"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="startEditing()"
+      >
+        <Icon
+          icon="carbon:edit"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip :content="canEdit ? 'Delete this preset' : null">
+      <button
+        type="button"
+        data-testid="preset-delete"
+        aria-label="Delete preset"
+        :disabled="!canEdit"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="deletePreset(selectedOption)"
+      >
+        <Icon
+          icon="carbon:trash-can"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip :content="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null">
+      <button
+        type="button"
+        data-testid="preset-save"
+        aria-label="Save to preset"
+        :disabled="!canEdit"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="savePreset()"
+      >
+        <Icon
+          :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip content="Create new preset">
+      <button
+        type="button"
+        data-testid="preset-create"
+        aria-label="Create new preset"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
+        @click="createPreset()"
+      >
+        <Icon
+          icon="carbon:add-alt"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip content="Reset to initial state">
+      <button
+        type="button"
+        aria-label="Reset to initial state"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
+        @click="resetState()"
+      >
+        <Icon
+          icon="carbon:reset"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
   </div>
 </template>

package/src/app/components/panel/StoryEvent.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { HstEvent } from '../../stores/events'
 import { computed } from 'vue'
+import BaseDropdown from '../base/BaseDropdown.vue'
 
 const props = defineProps<{
   event: HstEvent
@@ -24,21 +25,21 @@ const formattedArgument = computed(() => {
 </script>
 
 <template>
-  <VDropdown
+  <BaseDropdown
+    side="right"
     class="poveste-story-event group"
-    placement="right"
     data-testid="event-item"
   >
-    <template #default="{ shown }">
-      <div
-        class="group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal"
+    <template #default="{ open }">
+      <button
+        class="group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 w-full text-left flex items-baseline gap-1 leading-normal"
         :class="[
-          shown ? 'bg-primary-50 dark:bg-primary-600' : 'group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40',
+          open ? 'bg-primary-50 dark:bg-primary-600' : 'group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40',
         ]"
       >
         <span
           :class="{
-            'text-primary-500': shown,
+            'text-primary-500': open,
           }"
         >
           {{ event.name }}
@@ -47,7 +48,7 @@ const formattedArgument = computed(() => {
           v-if="event.argument"
           class="text-xs opacity-50 truncate"
         >{{ formattedArgument }}</span>
-      </div>
+      </button>
     </template>
 
     <template #popper>
@@ -55,5 +56,5 @@ const formattedArgument = computed(() => {
         <pre class="p-4">{{ event.argument }}</pre>
       </div>
     </template>
-  </VDropdown>
+  </BaseDropdown>
 </template>

package/src/app/components/panel/StorySidePanel.vue

@@ -22,7 +22,7 @@ const innerOrientation = computed(() =>
 const route = useRoute()
 
 const panelContentComponent = computed(() => {
-  switch (route.query.tab) {
+  switch (route.query['tab']) {
     case 'docs':
       return StoryDocs
     case 'events':
@@ -53,6 +53,7 @@ const panelContentComponent = computed(() => {
       <BaseSplitPane
         v-else
         :save-id="`story-sidepane-${innerOrientation}`"
+        label="Resize the controls panel"
         :orientation="innerOrientation"
         class="poveste-story-side-panel poveste-loaded h-full"
         data-testid="story-side-panel"