@redseed/redseed-ui-vue3 8.21.1 → 8.22.0

package/package.json

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

package/src/components/ActivityFeeds/FeedItem.vue

@@ -40,7 +40,11 @@ function handleClick() {
             'rsui-feed-item--padded': padded,
         }
     ]"
+    :tabindex="clickable ? 0 : undefined"
+    :role="clickable ? 'button' : undefined"
     @click="handleClick"
+    @keydown.enter.self.prevent="!$event.repeat && handleClick()"
+    @keydown.space.self.prevent="!$event.repeat && handleClick()"
 >
 
     <div class="rsui-feed-item__avatar">
@@ -48,7 +52,7 @@ function handleClick() {
         <slot name="icon">
             <IconCircleBackground lg invert>
                 <slot name="avatar">
-                    <UserIcon />
+                    <UserIcon aria-hidden="true" />
                 </slot>
             </IconCircleBackground>
         </slot>
@@ -56,6 +60,7 @@ function handleClick() {
         <div v-if="status !== false"
             class="rsui-feed-item__avatar-indicator"
         >
+            <span class="sr-only">{{ status }}</span>
             <slot name="avatar-indicator"
                 :status="status"
             >

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -14,22 +14,36 @@ const props = defineProps({
     }
 })
 
+const isLastItem = (index) => index === props.items.length - 1
+
 function clickItem(item) {
     if (typeof item.action === 'function') item.action()
 }
 </script>
 <template>
-<div class="rsui-breadcrumbs">
-    <div v-for="(item, index) in items"
-        :key="index"
-        :class="[
-            'rsui-breadcrumbs__item',
-            { 'rsui-breadcrumbs__item--action': typeof item.action === 'function' }
-        ]"
-    >
-        <span @click="clickItem(item)">
-            {{ item.label }}
-        </span>
-    </div>
-</div>
+<nav aria-label="Breadcrumb" class="rsui-breadcrumbs">
+    <ol class="rsui-breadcrumbs__list">
+        <li v-for="(item, index) in items"
+            :key="index"
+            :class="[
+                'rsui-breadcrumbs__item',
+                { 'rsui-breadcrumbs__item--action': typeof item.action === 'function' }
+            ]"
+            :aria-current="isLastItem(index) ? 'page' : undefined"
+        >
+            <span v-if="typeof item.action === 'function'"
+                role="button"
+                tabindex="0"
+                @click="clickItem(item)"
+                @keydown.enter.prevent="!$event.repeat && clickItem(item)"
+                @keydown.space.prevent="!$event.repeat && clickItem(item)"
+            >
+                {{ item.label }}
+            </span>
+            <span v-if="typeof item.action !== 'function'">
+                {{ item.label }}
+            </span>
+        </li>
+    </ol>
+</nav>
 </template>

package/src/components/Button/ButtonSlot.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, watchEffect } from 'vue'
 
 const props = defineProps({
     xs: {
@@ -42,8 +42,8 @@ defineEmits(['click'])
 // button element ref
 const buttonElementRef = ref(null)
 
-// check if the button is an icon only button
-const iconOnly = computed(() => buttonElementRef.value && !buttonElementRef.value.textContent)
+// check if the button has no visible text (icon-only state)
+const iconOnly = computed(() => buttonElementRef.value && !buttonElementRef.value.textContent.trim())
 
 // button sizes
 const sizes = {
@@ -96,6 +96,15 @@ const buttonSlotClass = computed(() => [
         'rsui-button-slot--right': props.alignment === 'right',
     },
 ])
+
+// warn in development when an icon-only button lacks an accessible name
+onMounted(() => {
+    watchEffect(() => {
+        if (process.env.NODE_ENV !== 'production' && iconOnly.value && !buttonElementRef.value.getAttribute('aria-label') && !buttonElementRef.value.getAttribute('aria-labelledby')) {
+            console.warn('[RSUI] Icon-only button detected without aria-label. Add aria-label for accessibility.')
+        }
+    })
+})
 </script>
 <template>
 <button
@@ -104,6 +113,10 @@ const buttonSlotClass = computed(() => [
     type="button"
     @click="$emit('click', $event)"
 >
+    <span v-if="$slots.icon" aria-hidden="true">
+        <slot name="icon"></slot>
+    </span>
+
     <slot></slot>
 </button>
 </template>

package/src/components/Card/Card.vue

@@ -55,6 +55,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    ariaLabel: {
+        type: String,
+        default: undefined,
+    },
 })
 
 const emit = defineEmits(['click'])
@@ -121,6 +125,7 @@ function onClick() {
             role="button"
             :tabindex="disabled ? undefined : 0"
             :title="$attrs.title"
+            :aria-label="!$slots['aria-label'] ? ariaLabel : undefined"
             :aria-disabled="disabled ? true : undefined"
             @click="onClick"
             @keydown.enter.prevent="!$event.repeat && onClick()"

package/src/components/Card/CardHeader.vue

@@ -74,6 +74,10 @@ function handleMoreActionsClick() {
             'rsui-card-header--clickable': isClickable,
         }
     ]"
+    :role="isClickable ? 'button' : undefined"
+    :tabindex="isClickable ? 0 : undefined"
+    @keydown.enter.self.prevent="isClickable && !$event.repeat && $emit('click', $event)"
+    @keydown.space.self.prevent="isClickable && !$event.repeat && $emit('click', $event)"
 >
     <div :class="[
         'rsui-card-header__header',
@@ -141,7 +145,7 @@ function handleMoreActionsClick() {
                 <slot name="more-actions"
                     :handleMoreActionsClick="handleMoreActionsClick"
                 >
-                    <ButtonTertiary @click="handleMoreActionsClick">
+                    <ButtonTertiary aria-label="More actions" @click="handleMoreActionsClick">
                         <slot name="more-actions-label">
                             <Icon>
                                 <EllipsisVerticalIcon />

package/src/components/Card/CheckboxCard.vue

@@ -4,6 +4,8 @@ import Card from './Card.vue'
 import CardHeader from './CardHeader.vue'
 import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
 
+const checkboxId = _.uniqueId('checkbox-card-')
+
 const props = defineProps({
     checked: {
         type: Boolean,
@@ -35,7 +37,6 @@ watch(() => props.checked, (val) => {
     isChecked.value = val
 })
 
-
 function toggleChecked() {
     if (props.disabled) return
     isChecked.value = !isChecked.value
@@ -43,11 +44,6 @@ function toggleChecked() {
     emit(isChecked.value ? 'check' : 'uncheck', isChecked.value)
 }
 
-function onTitleClick() {
-    if (props.disabled) return
-    toggleChecked()
-}
-
 function onFieldInput() {
     emit('change', isChecked.value)
     emit(isChecked.value ? 'check' : 'uncheck', isChecked.value)
@@ -73,16 +69,17 @@ function onFieldInput() {
         >
             <div class="rsui-checkbox-card__title-row">
                 <div class="rsui-checkbox-card__field">
-                    <FormFieldCheckbox v-model="isChecked" :disabled="disabled" @input="onFieldInput" />
+                    <FormFieldCheckbox :id="checkboxId" v-model="isChecked" :disabled="disabled" @input="onFieldInput" />
                 </div>
-                <span :class="[
+                <label :for="checkboxId"
+                    :class="[
                         'rsui-checkbox-card__title-text',
                         { 'rsui-checkbox-card__title-text--strikethrough': strikethrough }
                     ]"
-                    @click.stop.prevent="onTitleClick"
+                    @click.stop
                 >
                     <slot name="title"></slot>
-                </span>
+                </label>
             </div>
 
             <template #subtitle v-if="$slots.subtitle">

package/src/components/Card/MetricCard.vue

@@ -28,6 +28,9 @@ const props = defineProps({
     :clickable="props.clickable"
     :hoverable="props.hoverable"
 >
+    <template v-if="$slots['aria-label']" #aria-label>
+        <slot name="aria-label"></slot>
+    </template>
     <FlexContainer flexCol justifyCenter>
         <div v-if="labelFirst"
             :class="[
@@ -37,7 +40,7 @@ const props = defineProps({
                 { 'rsui-metric-card--right': alignment === 'right' },
             ]"
         >
-            <div v-if="$slots.icon" class="rsui-metric-card__icon">
+            <div v-if="$slots.icon" class="rsui-metric-card__icon" aria-hidden="true">
                 <slot name="icon"></slot>
             </div>
             <div class="rsui-metric-card__label">
@@ -63,7 +66,7 @@ const props = defineProps({
                 { 'rsui-metric-card--right': alignment === 'right' },
             ]"
         >
-            <div v-if="$slots.icon" class="rsui-metric-card__icon">
+            <div v-if="$slots.icon" class="rsui-metric-card__icon" aria-hidden="true">
                 <slot name="icon"></slot>
             </div>
             <div class="rsui-metric-card__label">

package/src/components/Card/RadioCard.vue

@@ -29,6 +29,8 @@ const props = defineProps({
     },
 })
 
+const titleId = _.uniqueId('radio-card-title-')
+
 const isSelected = ref(props.selected)
 
 watch(() => props.selected, () => {
@@ -90,11 +92,16 @@ function handleClick(event) {
 <template>
 <div :class="componentClass"
     @click="handleSelect"
+    @keydown.enter.self.prevent="!$event.repeat && handleSelect()"
+    @keydown.space.self.prevent="!$event.repeat && handleSelect()"
     role="radio"
-    tabindex="0"
+    :aria-checked="isSelected ? 'true' : 'false'"
+    :aria-disabled="disabled || undefined"
+    :aria-labelledby="titleId"
+    :tabindex="disabled ? -1 : 0"
 >
     <div :class="titleRowClass">
-        <div class="rsui-radio-card__title">
+        <div :id="titleId" class="rsui-radio-card__title">
             <slot name="title"></slot>
         </div>
     </div>

package/src/components/CardGroup/CardGroup.vue

@@ -187,6 +187,43 @@ function cleanupDragState() {
     dragFromIndex.value = null
 }
 
+function onHandleKeyDown(e) {
+    if (e.repeat) return
+    const child = getCardChild(e.target)
+    if (!child) return
+    const container = cardsContainerElement.value
+    if (!container) return
+    const children = Array.from(container.children)
+    const index = children.indexOf(child)
+    if (index === -1) return
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+        e.preventDefault()
+        if (index > 0) {
+            emit('reorder', { fromIndex: index, toIndex: index - 1 })
+            // Re-focus the handle after DOM update
+            requestAnimationFrame(() => {
+                const updatedChildren = Array.from(container.children)
+                const handle = updatedChildren[index - 1]?.querySelector('.rsui-card-group__drag-handle')
+                if (handle) handle.focus()
+            })
+        }
+    }
+
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault()
+        if (index < children.length - 1) {
+            emit('reorder', { fromIndex: index, toIndex: index + 1 })
+            // Re-focus the handle after DOM update
+            requestAnimationFrame(() => {
+                const updatedChildren = Array.from(container.children)
+                const handle = updatedChildren[index + 1]?.querySelector('.rsui-card-group__drag-handle')
+                if (handle) handle.focus()
+            })
+        }
+    }
+}
+
 function syncHandles() {
     const container = cardsContainerElement.value
     if (!container) return
@@ -196,14 +233,19 @@ function syncHandles() {
         if (props.reorderable && !hasHandle) {
             const handle = document.createElement('div')
             handle.className = `rsui-card-group__drag-handle rsui-card-group__drag-handle--${props.handleAlignment}`
+            handle.setAttribute('role', 'button')
+            handle.setAttribute('tabindex', '0')
+            handle.setAttribute('aria-label', 'Reorder')
             handle.addEventListener('mousedown', onHandleMouseDown)
             handle.addEventListener('mouseup', onHandleMouseUp)
+            handle.addEventListener('keydown', onHandleKeyDown)
             handle.appendChild(createHandleSvg())
             child.style.position = 'relative'
             child.appendChild(handle)
         } else if (!props.reorderable && hasHandle) {
             hasHandle.removeEventListener('mousedown', onHandleMouseDown)
             hasHandle.removeEventListener('mouseup', onHandleMouseUp)
+            hasHandle.removeEventListener('keydown', onHandleKeyDown)
             hasHandle.remove()
         }
     })
@@ -217,6 +259,7 @@ function cleanupHandles() {
         if (handle) {
             handle.removeEventListener('mousedown', onHandleMouseDown)
             handle.removeEventListener('mouseup', onHandleMouseUp)
+            handle.removeEventListener('keydown', onHandleKeyDown)
             handle.remove()
         }
         child.removeAttribute('draggable')

package/src/components/Disclosure/Disclosure.vue

@@ -116,6 +116,8 @@ onMounted(() => {
     >
         <slot name="trigger"
             :handleTrigger="handleTrigger"
+            :isOpen="isOpen"
+            :contentId="contentId"
         >
             <ButtonTertiary
                 :sm="$attrs.sm"
@@ -124,6 +126,8 @@ onMounted(() => {
                 :xl="$attrs.xl"
                 :2xl="$attrs['2xl']"
                 :full="$attrs.full"
+                :aria-expanded="isOpen"
+                :aria-controls="contentId"
                 @click.stop="handleTrigger"
             >
                 <Icon v-bind="iconProps">

package/src/components/DropdownMenu/DropdownMenu.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 
 const props = defineProps({
@@ -26,27 +26,67 @@ const containerClass = computed(() => [
     },
 ])
 
+const containerRef = ref(null)
+
 function open() {
     isOpen.value = true
 }
 
+// Focus first menuitem when menu opens
+watch(isOpen, (value) => {
+    if (value) {
+        nextTick(() => {
+            if (!containerRef.value) return
+            const firstItem = containerRef.value.querySelector('[role="menuitem"]')
+            if (firstItem) firstItem.focus()
+        })
+    }
+})
+
 function close() {
     isOpen.value = false
 }
 
 function closeOnEscape(e) {
-    if (isOpen.value && e.key === 'Escape') {
+    if (isOpen.value && e.key === 'Escape' && !e.repeat) {
         isOpen.value = false
     }
 }
 
+// Arrow key navigation between menu items (WAI-ARIA menu pattern)
+function handleMenuKeydown(event) {
+    const items = containerRef.value?.querySelectorAll('[role="menuitem"]')
+    if (!items?.length) return
+
+    const currentIndex = Array.from(items).indexOf(document.activeElement)
+    let nextIndex = -1
+
+    if (event.key === 'ArrowDown') {
+        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0
+    }
+    if (event.key === 'ArrowUp') {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1
+    }
+    if (event.key === 'Home') {
+        nextIndex = 0
+    }
+    if (event.key === 'End') {
+        nextIndex = items.length - 1
+    }
+
+    if (nextIndex >= 0) {
+        event.preventDefault()
+        items[nextIndex].focus()
+    }
+}
+
 onMounted(() => document.addEventListener('keydown', closeOnEscape))
 onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 </script>
 <template>
 <div class="rsui-dropdown-menu">
-    <slot name="trigger" :open="open">
-        <ButtonTertiary @click="open">
+    <slot name="trigger" :open="open" :isOpen="isOpen">
+        <ButtonTertiary :aria-expanded="isOpen" @click="open">
             <slot name="trigger-label"></slot>
         </ButtonTertiary>
     </slot>
@@ -67,7 +107,10 @@ onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
     >
         <div
             v-show="isOpen"
+            ref="containerRef"
             :class="containerClass"
+            role="menu"
+            @keydown="handleMenuKeydown"
             @click="close"
         >
             <slot></slot>

package/src/components/DropdownMenu/DropdownOption.vue

@@ -1,9 +1,17 @@
 <script setup>
 const emit = defineEmits(['click'])
+
+function handleClick() {
+    emit('click')
+}
 </script>
 <template>
 <div class="rsui-dropdown-option"
-    @click="$emit('click')"
+    role="menuitem"
+    tabindex="0"
+    @click="handleClick"
+    @keydown.enter.prevent="!$event.repeat && handleClick()"
+    @keydown.space.prevent="!$event.repeat && handleClick()"
 >
     <slot></slot>
 </div>

package/src/components/FormField/FormFieldCheckbox.vue

@@ -37,7 +37,7 @@ function check(event) {
             <div class="rsui-form-field-checkbox__check">
                 <CheckIcon v-if="checked" aria-hidden="true"></CheckIcon>
                 <input
-                    v-model="checked"
+                    :checked="checked"
                     type="checkbox"
                     :aria-describedby="ariaDescribedby"
                     :aria-invalid="ariaInvalid"
@@ -47,7 +47,7 @@ function check(event) {
                     :id="inputId || $attrs.id"
                     :name="$attrs.name"
                     :required="$attrs.required"
-                    @input="check"
+                    @change="check"
                 >
             </div>
             <div v-if="$slots.label"

package/src/components/FormField/FormFieldCombobox.vue

@@ -449,9 +449,12 @@ defineExpose({
                     ]"
                 >
                     <!-- Loading state -->
-                    <div 
+                    <div
                         v-if="dropdownContent === 'loading'"
                         class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
                     >
                         <div class="rsui-form-field-combobox__option-label">
                             <slot name="loading-text">Searching...</slot>
@@ -462,9 +465,12 @@ defineExpose({
                     </div>
 
                     <!-- Error state -->
-                    <div 
-                        v-else-if="dropdownContent === 'error'"
+                    <div
+                        v-if="dropdownContent === 'error'"
                         class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled rsui-form-field-combobox__option--error"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
                     >
                         <div class="rsui-form-field-combobox__option-label">
                             <slot name="error-text">Search failed</slot>
@@ -472,9 +478,12 @@ defineExpose({
                     </div>
 
                     <!-- Start typing message -->
-                    <div 
-                        v-else-if="dropdownContent === 'start-typing'"
+                    <div
+                        v-if="dropdownContent === 'start-typing'"
                         class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled rsui-form-field-combobox__option--hint"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
                     >
                         <div class="rsui-form-field-combobox__option-label">
                             <slot name="start-typing-text">Start typing to search</slot>
@@ -482,9 +491,12 @@ defineExpose({
                     </div>
 
                     <!-- Minimum length message -->
-                    <div 
-                        v-else-if="dropdownContent === 'min-length'"
+                    <div
+                        v-if="dropdownContent === 'min-length'"
                         class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
                     >
                         <div class="rsui-form-field-combobox__option-label">
                             Type at least {{ minSearchLength }} characters to search
@@ -492,9 +504,12 @@ defineExpose({
                     </div>
 
                     <!-- No results -->
-                    <div 
-                        v-else-if="dropdownContent === 'no-results'"
+                    <div
+                        v-if="dropdownContent === 'no-results'"
                         class="rsui-form-field-combobox__option rsui-form-field-combobox__option--disabled"
+                        role="option"
+                        aria-disabled="true"
+                        aria-selected="false"
                     >
                         <div class="rsui-form-field-combobox__option-label">
                             <slot name="no-results-text">No results found</slot>
@@ -502,9 +517,14 @@ defineExpose({
                     </div>
 
                     <!-- Grouped options -->
-                    <template v-else-if="dropdownContent === 'options' && groupedOptions">
-                        <template v-for="group in groupedOptions" :key="group.name">
-                            <div v-if="group.name" class="rsui-form-field-combobox__group-header" role="presentation">
+                    <template v-if="dropdownContent === 'options' && groupedOptions">
+                        <div
+                            v-for="group in groupedOptions"
+                            :key="group.name"
+                            role="group"
+                            :aria-label="group.name || undefined"
+                        >
+                            <div v-if="group.name" class="rsui-form-field-combobox__group-header" aria-hidden="true">
                                 {{ group.name }}
                             </div>
                             <div
@@ -529,11 +549,11 @@ defineExpose({
                                     <CheckIcon v-if="!navigable && option.value === model"></CheckIcon>
                                 </div>
                             </div>
-                        </template>
+                        </div>
                     </template>
 
                     <!-- Flat options -->
-                    <template v-else-if="dropdownContent === 'options'">
+                    <template v-if="dropdownContent === 'options' && !groupedOptions">
                         <div
                             v-for="(option, index) in filteredOptions"
                             :key="option.value"
@@ -582,7 +602,7 @@ defineExpose({
         <div
             aria-live="polite"
             aria-atomic="true"
-            class="sr-only"
+            class="rsui-form-field-combobox__live-region"
         >
             {{ liveAnnouncement }}
         </div>

package/src/components/FormField/FormFieldRadioGroup.vue

@@ -65,7 +65,8 @@ function setValue(value) {
                 :value="option.value"
                 v-model="model"
                 :id="`${effectiveId}-option-${index}`"
-                :name="$attrs.name"
+                :name="$attrs.name || effectiveId"
+                :aria-describedby="ariaDescribedby"
             >
             <label
                 :for="`${effectiveId}-option-${index}`"