@redseed/redseed-ui-vue3 8.35.0 → 8.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.35.0",
+    "version": "8.37.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Card/Card.vue

@@ -59,6 +59,22 @@ const props = defineProps({
         type: String,
         default: undefined,
     },
+    // Tri-state toggle state for the action layer. `null` (default) leaves the
+    // card a plain button; `true`/`false` turn it into a toggle button that
+    // exposes its state via `aria-pressed` (WCAG 4.1.2).
+    pressed: {
+        type: Boolean,
+        default: null,
+    },
+    // Marks the card as the current item within a set via `aria-current`.
+    // `false` (default) omits the attribute; `true` renders `aria-current="true"`;
+    // a string passes an aria-current token through (e.g. 'page', 'step').
+    current: {
+        type: [Boolean, String],
+        default: false,
+    },
+    // PostHog autocapture component label — emitted as data-ph-capture-attribute-
+    // component on the action layer so events can be grouped by component type.
     phComponent: {
         type: String,
         default: 'Card',
@@ -67,6 +83,22 @@ const props = defineProps({
 
 const emit = defineEmits(['click'])
 
+// `aria-pressed` is only emitted when the consumer opts in (pressed !== null),
+// so non-toggle clickable cards are unaffected.
+const ariaPressed = computed(() => {
+    if (props.pressed === null || props.pressed === undefined) return undefined
+    return props.pressed ? 'true' : 'false'
+})
+
+const ariaCurrent = computed(() => {
+    if (!props.current) return undefined
+    return props.current === true ? 'true' : props.current
+})
+
+// Drives a non-colour selection cue (a ring) so the active state is not
+// conveyed by colour alone (WCAG 1.4.1).
+const isActive = computed(() => props.pressed === true || Boolean(props.current))
+
 const slots = useSlots()
 
 const cardElement = ref(null)
@@ -149,12 +181,14 @@ function onClick() {
         </svg>
         <div
             v-if="clickable"
-            class="rsui-card__action-layer"
+            :class="['rsui-card__action-layer', { 'rsui-card__action-layer--active': isActive }]"
             role="button"
             :tabindex="disabled ? undefined : 0"
             :title="$attrs.title"
             :aria-label="!$slots['aria-label'] ? ariaLabel : undefined"
             :aria-disabled="disabled ? true : undefined"
+            :aria-pressed="ariaPressed"
+            :aria-current="ariaCurrent"
             :data-ph-capture-attribute-component="phComponent"
             :data-ph-capture-attribute-label="captureLabel"
             @click="onClick"

package/src/components/Card/MetricCard.vue

@@ -20,13 +20,23 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Active/selected state for toggle use (e.g. a metric-filter card). Maps to
+    // the underlying Card's `pressed` so a clickable card exposes `aria-pressed`
+    // (WCAG 4.1.2) and shows a non-colour selection ring (WCAG 1.4.1). `null`
+    // (default) leaves the card a plain card; pair with `clickable` to toggle.
+    active: {
+        type: Boolean,
+        default: null,
+    },
 })
 </script>
 
 <template>
 <Card class="rsui-metric-card"
+    :class="{ 'rsui-metric-card--active': active === true }"
     :clickable="props.clickable"
     :hoverable="props.hoverable"
+    :pressed="active"
     ph-component="MetricCard"
 >
     <template v-if="$slots['aria-label']" #aria-label>

package/src/components/Disclosure/Disclosure.vue

@@ -17,6 +17,16 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    /**
+     * Accessible name for the default icon-only toggle button. The chevron has
+     * no visible text, so set this (e.g. to the section/disclosure title) to
+     * give the trigger a name (WCAG 4.1.2). Ignored when a custom #trigger slot
+     * is supplied — name that button yourself.
+     */
+    triggerLabel: {
+        type: String,
+        default: '',
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -126,6 +136,7 @@ onMounted(() => {
                 :xl="$attrs.xl"
                 :2xl="$attrs['2xl']"
                 :full="$attrs.full"
+                :aria-label="triggerLabel || undefined"
                 :aria-expanded="isOpen"
                 :aria-controls="contentId"
                 @click.stop="handleTrigger"

package/src/components/FormField/FormFieldSearchAsync.vue

@@ -22,6 +22,15 @@ const props = defineProps({
         type: Number,
         default: 2,
     },
+    dropdownWidth: {
+        // Fixes the suggestions dropdown to an exact width, decoupling it from
+        // the input's width. Useful when the input must be narrow for layout
+        // reasons but the results list needs more room (e.g. "Name | Location"
+        // rows). Accepts a number (treated as px) or any CSS length string.
+        // Unset = the dropdown follows the input width, as before.
+        type: [String, Number],
+        default: null,
+    },
 })
 
 const emit = defineEmits(['input', 'query-change', 'navigate', 'keyup-enter'])
@@ -32,6 +41,7 @@ const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 const query = ref('')
 const isOpen = ref(false)
 const inputElement = ref(null)
+const fieldElement = ref(null)
 const rootElement = ref(null)
 const dropdownElement = ref(null)
 const highlightedIndex = ref(-1)
@@ -218,28 +228,33 @@ onClickOutside(rootElement, () => {
     if (isOpen.value) close()
 })
 
-const inputElementBounding = useElementBounding(inputElement)
+// Measure the whole field box (icon prefix + input), not the inner <input> —
+// the input sits to the right of the prefix and is narrower, so anchoring to
+// it would leave the dropdown shifted right and narrower than the field.
+const fieldElementBounding = useElementBounding(fieldElement)
 
 function calculateDropdownPosition() {
     if (!dropdownElement.value) return
 
     const viewportHeight = window.innerHeight
     const dropdownHeight = dropdownElement.value.offsetHeight
-    const spaceAbove = inputElementBounding.top.value
-    const spaceBelow = viewportHeight - inputElementBounding.bottom.value
+    const spaceAbove = fieldElementBounding.top.value
+    const spaceBelow = viewportHeight - fieldElementBounding.bottom.value
 
-    dropdownElement.value.style.width = `${inputElementBounding.width.value}px`
-    dropdownElement.value.style.left = `${inputElementBounding.left.value}px`
+    dropdownElement.value.style.width = props.dropdownWidth != null
+        ? (typeof props.dropdownWidth === 'number' ? `${props.dropdownWidth}px` : props.dropdownWidth)
+        : `${fieldElementBounding.width.value}px`
+    dropdownElement.value.style.left = `${fieldElementBounding.left.value}px`
 
     if (spaceAbove <= dropdownHeight && spaceBelow <= dropdownHeight) {
         dropdownElement.value.style.top = '0'
         dropdownElement.value.style.bottom = 'auto'
     } else if (spaceBelow > dropdownHeight) {
-        dropdownElement.value.style.top = `${inputElementBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.top = `${fieldElementBounding.bottom.value + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
     } else if (spaceAbove > dropdownHeight) {
         dropdownElement.value.style.top = 'auto'
-        dropdownElement.value.style.bottom = `${spaceBelow + inputElementBounding.height.value + 8 - window.scrollY}px`
+        dropdownElement.value.style.bottom = `${spaceBelow + fieldElementBounding.height.value + 8 - window.scrollY}px`
     }
 }
 
@@ -274,7 +289,7 @@ defineExpose({
         <slot name="label"></slot>
     </template>
 
-    <div class="rsui-form-field-text__group">
+    <div ref="fieldElement" class="rsui-form-field-text__group">
         <div
             class="rsui-form-field-text__prefix"
             aria-hidden="true"

package/src/components/FormField/FormFieldSelect.vue

@@ -27,7 +27,14 @@ const isOpen = ref(false)
 const isMobileDevice = ref(false)
 const highlightedIndex = ref(-1)
 
-const effectiveId = computed(() => inputId.value || attrs.id)
+// Fall back to a locally-generated unique id when this Select isn't wrapped by
+// a FormFieldSlot (no injected inputId) and no id attr is supplied. Without it,
+// effectiveId is undefined and the listbox/option ids — and the trigger's
+// aria-controls — interpolate the literal string "undefined" (e.g.
+// "undefined-listbox"), a dangling reference and a duplicate id across
+// instances. Mirrors FormFieldSlot's _.uniqueId('form-field-') mechanism.
+const autoId = _.uniqueId('form-field-')
+const effectiveId = computed(() => inputId.value || attrs.id || autoId)
 
 function toggleOptions() {
     isOpen.value = !isOpen.value
@@ -228,7 +235,7 @@ defineExpose({
 <template>
 <FormFieldSlot
     ref="formFieldSelectElement"
-    :id="$attrs.id"
+    :id="effectiveId"
     :class="[
         $attrs.class,
         'rsui-form-field-select',
@@ -254,7 +261,7 @@ defineExpose({
             ]"
             role="combobox"
             :aria-activedescendant="highlightedIndex >= 0 ? `${effectiveId}-option-${highlightedIndex}` : undefined"
-            :aria-controls="`${effectiveId}-listbox`"
+            :aria-controls="isOpen ? `${effectiveId}-listbox` : undefined"
             :aria-describedby="ariaDescribedby"
             :aria-expanded="isOpen"
             :aria-haspopup="'listbox'"

package/src/components/Image/Image.vue

@@ -100,6 +100,7 @@ const imageClass = computed(() => [
 <div :class="imageClass">
     <div v-if="isEmpty"
         class="rsui-image__empty"
+        aria-hidden="true"
     >
         <slot name="empty-icon">
             <Icon xxl disabled>

package/src/components/Loader/Loader.vue

@@ -16,6 +16,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    label: {
+        type: String,
+        default: 'Loading',
+    },
 })
 
 const defaultColor = computed(() => !props.primary && !props.secondary && !props.white)
@@ -36,5 +40,9 @@ useLottie(loaderElement, LottieCubes)
 <template>
 <div ref="loaderElement"
     :class="loaderClass"
-></div>
+    role="status"
+    aria-busy="true"
+>
+    <span v-if="label" class="rsui-loader__label">{{ label }}</span>
+</div>
 </template>

package/src/components/MessageBox/MessageBox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 
@@ -12,6 +12,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    closeLabel: {
+        type: String,
+        default: 'Close',
+    },
     variant: {
         type: String,
         default: 'default',
@@ -23,6 +27,20 @@ const emit = defineEmits(['close'])
 
 const isClosed = ref(props.closed)
 
+/**
+ * Announce the box as a live region so flash / MOTD content reaches assistive
+ * tech (WCAG 4.1.3 Status Messages). `alert` is assertive — reserved for errors
+ * that must interrupt; advisory variants use polite `status`. The neutral
+ * `default` variant is a plain container, not a status message, so it gets no
+ * live role (avoids announcing arbitrary static content). Both roles carry an
+ * implicit aria-live, so no separate attribute is needed.
+ */
+const liveRole = computed(() => {
+    if (props.variant === 'error') return 'alert'
+    if (['info', 'success', 'warning'].includes(props.variant)) return 'status'
+    return undefined
+})
+
 function close() {
     isClosed.value = true
     emit('close')
@@ -34,17 +52,22 @@ function close() {
         'rsui-message-box',
         `rsui-message-box--${variant}`
     ]"
+    :role="liveRole"
 >
     <div v-if="$slots.title" class="rsui-message-box__head">
         <div class="rsui-message-box__title">
             <slot name="title"></slot>
         </div>
         <div v-if="closeable" class="rsui-message-box__close">
-            <div class="rsui-message-box__close-icon">
+            <button type="button"
+                class="rsui-message-box__close-icon"
+                :aria-label="closeLabel"
+                @click="close"
+            >
                 <Icon disabled>
-                    <XMarkIcon @click="close"></XMarkIcon>
+                    <XMarkIcon aria-hidden="true"></XMarkIcon>
                 </Icon>
-            </div>
+            </button>
         </div>
     </div>
     <div class="rsui-message-box__content">
@@ -52,11 +75,15 @@ function close() {
             <slot></slot>
         </div>
         <div v-if="closeable && !$slots.title" class="rsui-message-box__close">
-            <div class="rsui-message-box__close-icon">
+            <button type="button"
+                class="rsui-message-box__close-icon"
+                :aria-label="closeLabel"
+                @click="close"
+            >
                 <Icon disabled>
-                    <XMarkIcon @click="close"></XMarkIcon>
+                    <XMarkIcon aria-hidden="true"></XMarkIcon>
                 </Icon>
-            </div>
+            </button>
         </div>
     </div>
 </div>

package/src/components/MetaInfo/MetaInfo.vue

@@ -8,6 +8,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    helpLabel: {
+        type: String,
+        default: 'More information'
+    },
     inline: {
         type: Boolean,
         default: false
@@ -42,16 +46,18 @@ const emit = defineEmits(['click'])
         <div class="rsui-meta-info__label">
             <slot name="label"></slot>
         </div>
-        <div v-if="help"
+        <button v-if="help"
+            type="button"
             class="rsui-meta-info__help"
+            :aria-label="helpLabel"
             @click="$emit('click')"
         >
             <slot name="help-icon">
                 <Icon sm secondary>
-                    <QuestionMarkCircleIcon />
+                    <QuestionMarkCircleIcon aria-hidden="true" />
                 </Icon>
             </slot>
-        </div>
+        </button>
     </div>
     <div class="rsui-meta-info__value">
         <slot></slot>

package/src/components/Section/SectionHeader.vue

@@ -26,6 +26,17 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    /**
+     * Heading level (1-6) for the title. When set, the title renders as a real
+     * <h1>-<h6> so consuming pages get a correct document outline (WCAG 1.3.1,
+     * 2.4.6). Left unset it stays a non-heading <span>, keeping existing
+     * consumers unaffected — pick the level that fits the page's heading order.
+     */
+    headingLevel: {
+        type: [Number, String],
+        default: null,
+        validator: (value) => value === null || ['1', '2', '3', '4', '5', '6'].includes(String(value)),
+    },
 })
 
 const sectionHeaderElement = ref(null)
@@ -50,6 +61,12 @@ const showToolbar = computed(() => {
     return props.showActions
         && (slots.actions || showMoreActions)
 })
+
+/**
+ * Element used to render the title — a real heading when a level is supplied,
+ * otherwise a non-heading <span> (preserves the previous, level-less markup).
+ */
+const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` : 'span')
 </script>
 <template>
 <div ref="sectionHeaderElement"
@@ -77,7 +94,9 @@ const showToolbar = computed(() => {
 
             <!-- Title slot, default slot -->
             <div class="rsui-section-header__title">
-                <slot></slot>
+                <component :is="titleTag" class="rsui-section-header__title-text">
+                    <slot></slot>
+                </component>
                 <div v-if="$slots.badge" class="rsui-section-header__badge">
                     <slot name="badge"></slot>
                 </div>

package/src/components/Section/SectionSlider.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, useSlots } from 'vue'
-import { useScroll, useEventListener } from '@vueuse/core'
+import { useScroll } from '@vueuse/core'
 import { Icon } from '../Icon'
 import Section from './Section.vue'
 import SectionHeader from './SectionHeader.vue'
@@ -20,6 +20,16 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Heading level (1-6) for the slider title. When set, the title renders
+     * as a real <h1>-<h6> for a correct document outline; left unset it stays
+     * a non-heading <span> so existing consumers are unaffected.
+     */
+    headingLevel: {
+        type: [Number, String],
+        default: null,
+        validator: (value) => value === null || ['1', '2', '3', '4', '5', '6'].includes(String(value)),
+    },
 })
 
 const sectionVariant = computed(() => {
@@ -56,14 +66,6 @@ function generateItemId(index) {
  */
 const sliderContainerRef = ref(null)
 
-/**
- * Listener for keyboard events on the document
- */
-useEventListener(document, 'keydown', (e) => {
-    if (e.key === 'ArrowRight') e.preventDefault()
-    if (e.key === 'ArrowLeft') e.preventDefault()
-})
-
 /**
  * Whether the slider container is scrolling
  */
@@ -170,7 +172,7 @@ function showPreviousSlide() {
         v-bind="$attrs"
     >
         <template #header>
-            <SectionHeader :showDivider="false" :showMoreActions="false">
+            <SectionHeader :showDivider="false" :showMoreActions="false" :headingLevel="headingLevel">
                 <template v-if="slots.icon" #icon>
                     <slot name="icon"></slot>
                 </template>
@@ -193,8 +195,9 @@ function showPreviousSlide() {
                         :disabledNextButton="disabledNextButton"
                     >
                         <button class="rsui-section-slider__action"
-                            :disabled="disabledPrevButton"
+                            type="button"
                             aria-label="Previous"
+                            :disabled="disabledPrevButton"
                             data-ph-capture-attribute-component="SectionSliderAction"
                             data-ph-capture-attribute-label="Previous"
                             @click="showPreviousSlide"
@@ -205,8 +208,9 @@ function showPreviousSlide() {
                         </button>
 
                         <button class="rsui-section-slider__action"
-                            :disabled="disabledNextButton"
+                            type="button"
                             aria-label="Next"
+                            :disabled="disabledNextButton"
                             data-ph-capture-attribute-component="SectionSliderAction"
                             data-ph-capture-attribute-label="Next"
                             @click="showNextSlide"

package/src/components/Section/SectionSliderItem.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, onBeforeUnmount } from 'vue'
-import { useEventListener, useElementVisibility } from '@vueuse/core'
+import { useElementVisibility } from '@vueuse/core'
 
 const props = defineProps({
     id: {
@@ -31,13 +31,6 @@ watch(isVisible, (newVal) => {
 onBeforeUnmount(() => {
     emit('hidden', props.id)
 })
-
-/**
- * Listener for keyboard events on the item
- */
-useEventListener(itemRef, 'keydown', (e) => {
-    if (e.key === 'Tab') e.preventDefault()
-})
 </script>
 
 <template>

package/src/components/Skeleton/Skeleton.vue

@@ -66,6 +66,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    label: {
+        type: String,
+        default: '',
+    },
 })
 
 const shape = computed(() => {
@@ -99,7 +103,12 @@ const positionClass = computed(() => {
 </script>
 
 <template>
-    <div :class="['rsui-skeleton', widthClass, positionClass]">
+    <div
+        :class="['rsui-skeleton', widthClass, positionClass]"
+        :role="label ? 'status' : undefined"
+        :aria-busy="label ? 'true' : undefined"
+    >
+        <span v-if="label" class="rsui-skeleton__label">{{ label }}</span>
         <div
             :class="[
                 shape === 'line' && 'rsui-skeleton__line',

package/src/components/Table/Table.vue

@@ -169,6 +169,7 @@ const visibleColumns = computed(() => {
                     <Tr v-for="row in rows"
                         :key="row.id"
                         :clickable="row.clickable ?? clickableRows"
+                        :aria-label="row.ariaLabel"
                         @click="$emit('click:row', row)"
                     >
                         <Td v-for="column in visibleColumns"

package/src/components/Table/Th.vue

@@ -88,16 +88,18 @@ function handleSort(event) {
     ]"
     :scope="scope"
     :aria-sort="ariaSort"
-    :tabindex="sortable ? 0 : undefined"
-    @click="handleSort($event)"
-    @keydown.enter.self.prevent="handleSort($event)"
-    @keydown.space.self.prevent="handleSort($event)"
 >
-    <div class="rsui-th__content">
+    <!-- Sortable headers wrap their content in a real <button> so AT announces
+         them as activatable (4.1.2) and Enter/Space work natively. The <th>
+         keeps its columnheader role + aria-sort (valid only on that role). -->
+    <button v-if="sortable"
+        type="button"
+        class="rsui-th__button"
+        @click="handleSort($event)"
+    >
         <slot></slot>
 
-        <div v-if="sortable"
-            class="rsui-th__sort"
+        <span class="rsui-th__sort"
             aria-hidden="true"
         >
             <Icon v-if="!isAsc && !isDesc"
@@ -118,7 +120,11 @@ function handleSort(event) {
             >
                 <ArrowUpIcon />
             </Icon>
-        </div>
+        </span>
+    </button>
+
+    <div v-else class="rsui-th__content">
+        <slot></slot>
     </div>
 </th>
 </template>

package/src/components/Table/Tr.vue

@@ -4,6 +4,14 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // Accessible name for the clickable row. The row keeps its native table-row
+    // role; without a label, assistive tech falls back to the row's cell text,
+    // so set this to a concise action label (e.g. "View John Doe") for clearer
+    // AT output.
+    ariaLabel: {
+        type: String,
+        default: undefined,
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -23,6 +31,7 @@ function handleClick(event) {
         { 'rsui-tr--clickable': clickable },
     ]"
     :tabindex="clickable ? 0 : undefined"
+    :aria-label="clickable ? ariaLabel : undefined"
     @click="handleClick($event)"
     @keydown.enter.self.prevent="handleClick($event)"
     @keydown.space.self.prevent="handleClick($event)"