@redseed/redseed-ui-vue3 8.18.0 → 8.20.0

package/package.json

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

package/src/components/Form/FormFieldset.vue

@@ -6,7 +6,7 @@ defineOptions({
 <template>
 <div class="rsui-form-fieldset">
     <fieldset v-bind="$attrs">
-        <legend>
+        <legend v-if="$slots.legend">
             <slot name="legend"></slot>
         </legend>
 

package/src/components/Form/FormWrapperBuild.vue

@@ -6,7 +6,7 @@ import LogoRedSeedBuild from '../Logo/LogoRedSeedBuild.vue'
 <template>
 <FormSlot class="rsui-form-wrapper-build">
     <template #image>
-        <LogoRedSeedBuild class="rsui-form-wrapper-build__image"></LogoRedSeedBuild>
+        <LogoRedSeedBuild class="rsui-form-wrapper-build__image" aria-hidden="true"></LogoRedSeedBuild>
     </template>
 
     <template #top v-if="$slots.top">

package/src/components/FormField/FormFieldCheckbox.vue

@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { CheckIcon } from '@heroicons/vue/24/outline'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -17,6 +18,8 @@ watch(() => model.value, () => checked.value = model.value)
 
 const emit = defineEmits(['input'])
 
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
 function check(event) {
     checked.value = !checked.value
     model.value = checked.value
@@ -24,17 +27,24 @@ function check(event) {
 }
 </script>
 <template>
-<FormFieldSlot class="rsui-form-field-checkbox">
+<FormFieldSlot
+    :id="$attrs.id"
+    :required="$attrs.required"
+    class="rsui-form-field-checkbox"
+>
     <template #label>
         <div class="rsui-form-field-checkbox__checkbox">
             <div class="rsui-form-field-checkbox__check">
-                <CheckIcon v-if="checked"></CheckIcon>
+                <CheckIcon v-if="checked" aria-hidden="true"></CheckIcon>
                 <input
                     v-model="checked"
                     type="checkbox"
+                    :aria-describedby="ariaDescribedby"
+                    :aria-invalid="ariaInvalid"
+                    :aria-required="$attrs.required || undefined"
                     :autofocus="$attrs.autofocus"
                     :disabled="$attrs.disabled"
-                    :id="$attrs.id"
+                    :id="inputId || $attrs.id"
                     :name="$attrs.name"
                     :required="$attrs.required"
                     @input="check"
@@ -50,6 +60,9 @@ function check(event) {
             </div>
         </div>
     </template>
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
     <template #error v-if="$slots.error">
         <slot name="error"></slot>
     </template>

package/src/components/FormField/FormFieldCombobox.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue'
 import { onClickOutside, useElementBounding } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -34,16 +35,25 @@ const props = defineProps({
     minSearchLength: {
         type: Number,
         default: 2
+    },
+    navigable: {
+        type: Boolean,
+        default: false
     }
 })
 
-const emit = defineEmits(['input', 'change', 'keyup-enter'])
+const emit = defineEmits(['input', 'change', 'keyup-enter', 'navigate'])
+
+const attrs = useAttrs()
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 
 const isOpen = ref(false)
 const searchText = ref('')
+const hasEdited = ref(false)
 const inputElement = ref(null)
 const comboboxElement = ref(null)
 const dropdownElement = ref(null)
+const highlightedIndex = ref(-1)
 
 // Async search state
 const isLoading = ref(false)
@@ -51,6 +61,19 @@ const searchError = ref(null)
 const asyncOptions = ref([])
 const debounceTimeout = ref(null)
 
+const effectiveId = computed(() => inputId.value || attrs.id)
+
+// Live region announcement for screen readers
+const liveAnnouncement = computed(() => {
+    if (!isOpen.value) return ''
+    if (isLoading.value) return 'Loading results'
+    if (searchError.value) return 'Search failed'
+    if (filteredOptions.value.length > 0) {
+        return `${filteredOptions.value.length} result${filteredOptions.value.length === 1 ? '' : 's'} available`
+    }
+    return 'No results found'
+})
+
 // Filter options based on search text
 const filteredOptions = computed(() => {
     // If using async search, return async results
@@ -72,6 +95,26 @@ const filteredOptions = computed(() => {
     )
 })
 
+// Group filtered options by their group field
+const groupedOptions = computed(() => {
+    const options = filteredOptions.value
+    if (!options.some(o => o.group)) return null
+
+    const groups = []
+    let currentGroup = null
+
+    for (const option of options) {
+        const groupName = option.group || ''
+        if (!currentGroup || currentGroup.name !== groupName) {
+            currentGroup = { name: groupName, options: [] }
+            groups.push(currentGroup)
+        }
+        currentGroup.options.push(option)
+    }
+
+    return groups
+})
+
 // Computed property to determine what to show in dropdown
 const dropdownContent = computed(() => {
     if (props.searchFunction) {
@@ -99,15 +142,17 @@ const dropdownContent = computed(() => {
     }
 })
 
-// Get display text for the input
+// Get display text for the input — when the dropdown is open and the user has started
+// editing, show their searchText so backspace/typing works naturally; otherwise show
+// the selected option's label (or the raw model value for custom entries).
 const displayText = computed(() => {
-    // Always show the selected option label if there is one, regardless of dropdown state
+    if (isOpen.value && hasEdited.value) return searchText.value
+
     const selectedOption = props.options.find(option => option.value === model.value)
     if (selectedOption) {
         return selectedOption.label
     }
-    
-    // If no option is selected, show search text when open or model value when closed
+
     if (isOpen.value) return searchText.value
     return model.value
 })
@@ -123,6 +168,8 @@ function toggleDropdown() {
 function open() {
     isOpen.value = true
     searchText.value = ''
+    hasEdited.value = false
+    highlightedIndex.value = -1
     setTimeout(() => {
         inputElement.value?.focus()
         calculateDropdownPosition()
@@ -132,7 +179,9 @@ function open() {
 function close() {
     isOpen.value = false
     searchText.value = ''
-    
+    hasEdited.value = false
+    highlightedIndex.value = -1
+
     // Clean up async search state
     if (debounceTimeout.value) {
         clearTimeout(debounceTimeout.value)
@@ -144,6 +193,12 @@ function close() {
 }
 
 function choose(option) {
+    if (props.navigable) {
+        emit('navigate', option.value, option)
+        close()
+        return
+    }
+
     // If clicking on the currently selected option, deselect it
     if (option.value === model.value) {
         model.value = ''
@@ -192,6 +247,7 @@ function debouncedSearch(query) {
 
 function handleInput(event) {
     searchText.value = event.target.value
+    hasEdited.value = true
     if (!isOpen.value) {
         isOpen.value = true
         setTimeout(() => calculateDropdownPosition(), 1)
@@ -207,7 +263,9 @@ function handleInput(event) {
 
 function handleKeyup(event) {
     if (event.key === 'Enter') {
-        if (filteredOptions.value.length === 1) {
+        if (highlightedIndex.value >= 0 && highlightedIndex.value < filteredOptions.value.length) {
+            choose(filteredOptions.value[highlightedIndex.value])
+        } else if (filteredOptions.value.length === 1) {
             // If only one option matches, select it
             choose(filteredOptions.value[0])
         } else if (props.allowCustomValue && searchText.value) {
@@ -227,14 +285,35 @@ function handleKeydown(event) {
         event.preventDefault()
         if (!isOpen.value) {
             open()
+        } else if (filteredOptions.value.length > 0) {
+            highlightedIndex.value = Math.min(
+                highlightedIndex.value + 1,
+                filteredOptions.value.length - 1
+            )
         }
-        // TODO: Add keyboard navigation for options
     } else if (event.key === 'ArrowUp') {
         event.preventDefault()
-        // TODO: Add keyboard navigation for options
+        if (isOpen.value && filteredOptions.value.length > 0) {
+            highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+        }
+    } else if (event.key === 'Home') {
+        event.preventDefault()
+        if (isOpen.value && filteredOptions.value.length > 0) {
+            highlightedIndex.value = 0
+        }
+    } else if (event.key === 'End') {
+        event.preventDefault()
+        if (isOpen.value && filteredOptions.value.length > 0) {
+            highlightedIndex.value = filteredOptions.value.length - 1
+        }
     }
 }
 
+// Reset highlighted index when filtered options change
+watch(filteredOptions, () => {
+    highlightedIndex.value = -1
+})
+
 onClickOutside(comboboxElement, () => {
     if (isOpen.value) {
         // If we're closing and there's search text but no exact match and custom values are allowed
@@ -313,13 +392,23 @@ defineExpose({
             <slot name="prefix"></slot>
         </div>
 
-        <input 
+        <input
             ref="inputElement"
+            role="combobox"
+            :aria-activedescendant="isOpen && dropdownContent === 'options' && highlightedIndex >= 0 ? `${effectiveId}-option-${highlightedIndex}` : undefined"
+            :aria-autocomplete="'list'"
+            :aria-busy="isLoading || undefined"
+            :aria-controls="`${effectiveId}-listbox`"
+            :aria-describedby="ariaDescribedby"
+            :aria-expanded="isOpen"
+            :aria-haspopup="'listbox'"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
             :value="displayText"
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="$attrs.id"
+            :id="effectiveId"
             :name="$attrs.name"
             :placeholder="$slots.placeholder ? '' : 'Type to search or select...'"
             :required="$attrs.required"
@@ -331,9 +420,10 @@ defineExpose({
         >
 
         <!-- Placeholder slot for custom placeholder rendering -->
-        <div 
+        <div
             v-if="$slots.placeholder && !displayText && !isOpen"
             class="rsui-form-field-combobox__placeholder"
+            aria-hidden="true"
             @click="open()"
         >
             <slot name="placeholder"></slot>
@@ -348,9 +438,11 @@ defineExpose({
                 leave-from-class="leave-from-class"
                 leave-to-class="leave-to-class"
             >
-                <div 
+                <div
                     ref="dropdownElement"
                     v-show="isOpen"
+                    :id="`${effectiveId}-listbox`"
+                    role="listbox"
                     :class="[
                         'rsui-form-field-combobox__options',
                         { 'rsui-form-field-combobox__options--open': isOpen }
@@ -409,21 +501,58 @@ defineExpose({
                         </div>
                     </div>
 
-                    <!-- Options -->
+                    <!-- 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">
+                                {{ group.name }}
+                            </div>
+                            <div
+                                v-for="option in group.options"
+                                :key="option.value"
+                                :id="`${effectiveId}-option-${filteredOptions.indexOf(option)}`"
+                                role="option"
+                                :aria-selected="option.value === model"
+                                :class="[
+                                    'rsui-form-field-combobox__option',
+                                    { 'rsui-form-field-combobox__option--highlighted': filteredOptions.indexOf(option) === highlightedIndex }
+                                ]"
+                                @click="choose(option)"
+                            >
+                                <div
+                                    class="rsui-form-field-combobox__option-label"
+                                    :title="option.label"
+                                >
+                                    {{ option.label }}
+                                </div>
+                                <div class="rsui-form-field-combobox__option-icon" aria-hidden="true">
+                                    <CheckIcon v-if="!navigable && option.value === model"></CheckIcon>
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+
+                    <!-- Flat options -->
                     <template v-else-if="dropdownContent === 'options'">
-                        <div 
-                            v-for="option in filteredOptions"
+                        <div
+                            v-for="(option, index) in filteredOptions"
                             :key="option.value"
-                            class="rsui-form-field-combobox__option"
+                            :id="`${effectiveId}-option-${index}`"
+                            role="option"
+                            :aria-selected="option.value === model"
+                            :class="[
+                                'rsui-form-field-combobox__option',
+                                { 'rsui-form-field-combobox__option--highlighted': index === highlightedIndex }
+                            ]"
                             @click="choose(option)"
                         >
-                            <div 
+                            <div
                                 class="rsui-form-field-combobox__option-label"
                                 :title="option.label"
                             >
                                 {{ option.label }}
                             </div>
-                            <div class="rsui-form-field-combobox__option-icon">
+                            <div class="rsui-form-field-combobox__option-icon" aria-hidden="true">
                                 <CheckIcon v-if="option.value === model"></CheckIcon>
                             </div>
                         </div>
@@ -439,15 +568,24 @@ defineExpose({
             <slot name="suffix"></slot>
         </div>
 
-        <div 
+        <div
             :class="[
                 'rsui-form-field-combobox__icon',
                 { 'rsui-form-field-combobox__icon--open': isOpen }
             ]"
+            aria-hidden="true"
             @click="toggleDropdown"
         >
             <ChevronDownIcon></ChevronDownIcon>
         </div>
+
+        <div
+            aria-live="polite"
+            aria-atomic="true"
+            class="sr-only"
+        >
+            {{ liveAnnouncement }}
+        </div>
     </div>
 
     <template #help v-if="$slots.help">

package/src/components/FormField/FormFieldPasswordToggle.vue

@@ -31,12 +31,17 @@ defineExpose({
     </template>
 
     <template #suffix>
-        <div class="rsui-form-field-password__icon"
+        <button
+            type="button"
+            class="rsui-form-field-password__icon"
+            :aria-label="show ? 'Hide password' : 'Show password'"
+            :aria-pressed="show"
+            :disabled="$attrs.disabled || undefined"
             @click.prevent="togglePassword"
         >
-            <EyeIcon v-if="!show"></EyeIcon>
-            <EyeSlashIcon v-if="show"></EyeSlashIcon>
-        </div>
+            <EyeIcon v-if="!show" aria-hidden="true"></EyeIcon>
+            <EyeSlashIcon v-if="show" aria-hidden="true"></EyeSlashIcon>
+        </button>
     </template>
 
     <template #help v-if="$slots.help">

package/src/components/FormField/FormFieldRadioGroup.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, useAttrs } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -17,6 +18,11 @@ const props = defineProps({
 
 const emit = defineEmits(['input'])
 
+const attrs = useAttrs()
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
+const effectiveId = computed(() => inputId.value || attrs.id)
+
 function setValue(value) {
     model.value = value
     emit('input', value)
@@ -32,19 +38,41 @@ function setValue(value) {
     :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">
-        <slot name="label"></slot>
+        <span :id="`${effectiveId}-label`">
+            <slot name="label"></slot>
+        </span>
     </template>
-    <div class="rsui-form-field-radio-group__items">
-        <div v-for="option in options" :key="option" :class="['rsui-form-field-radio-group__item', {'rsui-form-field-radio-group__item--disabled': option.disabled}]"
-            @click="!option.disabled && setValue(option.value)">
-            <div class="rsui-form-field-radio-group__control" v-if="model !== option.value"></div>
+    <div class="rsui-form-field-radio-group__items"
+        role="radiogroup"
+        :aria-labelledby="`${effectiveId}-label`"
+        :aria-describedby="ariaDescribedby"
+        :aria-invalid="ariaInvalid"
+        :aria-required="$attrs.required || undefined"
+    >
+        <div v-for="(option, index) in options"
+            :key="option.value"
+            :class="['rsui-form-field-radio-group__item', {'rsui-form-field-radio-group__item--disabled': option.disabled}]"
+        >
+            <div class="rsui-form-field-radio-group__control" v-if="model !== option.value" aria-hidden="true"></div>
             <div class="rsui-form-field-radio-group__control rsui-form-field-radio-group__control--active"
-                v-if="model == option.value">
+                v-if="model == option.value" aria-hidden="true">
                 <div></div>
             </div>
-            <input :disabled="option.disabled" class="rsui-form-field-radio-group__item-native-control" type="radio" :value="option.value"
-                v-model="model" :id="$attrs.id" :name="$attrs.name">
-            <label :class="['rsui-form-field-radio-group__item-label', {'rsui-form-field-radio-group__item-label--disabled': option.disabled}]">{{ option.label }}</label>
+            <input
+                :disabled="option.disabled"
+                class="rsui-form-field-radio-group__item-native-control"
+                type="radio"
+                :value="option.value"
+                v-model="model"
+                :id="`${effectiveId}-option-${index}`"
+                :name="$attrs.name"
+            >
+            <label
+                :for="`${effectiveId}-option-${index}`"
+                :class="['rsui-form-field-radio-group__item-label', {'rsui-form-field-radio-group__item-label--disabled': option.disabled}]"
+            >
+                {{ option.label }}
+            </label>
         </div>
     </div>
     <template #help v-if="$slots.help">

package/src/components/FormField/FormFieldSearch.vue

@@ -14,13 +14,14 @@ defineExpose({
 <template>
 <FormFieldText ref="formFieldTextElement"
     class="rsui-form-field-search"
+    type="search"
 >
     <template #label v-if="$slots.label">
         <slot name="label"></slot>
     </template>
 
     <template #prefix>
-        <MagnifyingGlassIcon class="rsui-form-field-search__icon"></MagnifyingGlassIcon>
+        <MagnifyingGlassIcon class="rsui-form-field-search__icon" aria-hidden="true"></MagnifyingGlassIcon>
     </template>
 
     <template #help v-if="$slots.help">

package/src/components/FormField/FormFieldSelect.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, useAttrs } from 'vue'
 import { onClickOutside, useElementBounding } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -19,16 +20,29 @@ const props = defineProps({
 
 const emit = defineEmits(['change'])
 
+const attrs = useAttrs()
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
 const isOpen = ref(false)
 const isMobileDevice = ref(false)
+const highlightedIndex = ref(-1)
+
+const effectiveId = computed(() => inputId.value || attrs.id)
 
 function toggleOptions() {
     isOpen.value = !isOpen.value
-    if (isOpen.value) setTimeout(() => calculateDropdownPosition(), 1)
+    if (isOpen.value) {
+        const selectedIndex = props.options.findIndex(o => o.value === model.value)
+        highlightedIndex.value = selectedIndex >= 0 ? selectedIndex : 0
+        setTimeout(() => calculateDropdownPosition(), 1)
+    } else {
+        highlightedIndex.value = -1
+    }
 }
 
 function close() {
     isOpen.value = false
+    highlightedIndex.value = -1
 }
 
 function choose(option) {
@@ -41,20 +55,61 @@ function nativeChoose(event) {
     emit('change', event.target.value)
 }
 
-function handleSelectClick(event) {
-    if (!isMobileDevice.value) {
+function handleKeydown(event) {
+    if (!isOpen.value && (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ')) {
+        if (event.repeat) return
         event.preventDefault()
         toggleOptions()
+        return
+    }
+
+    if (!isOpen.value) return
+
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault()
+            highlightedIndex.value = Math.min(highlightedIndex.value + 1, props.options.length - 1)
+            break
+        case 'ArrowUp':
+            event.preventDefault()
+            highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
+            break
+        case 'Enter':
+        case ' ':
+            if (event.repeat) return
+            event.preventDefault()
+            if (highlightedIndex.value >= 0) {
+                choose(props.options[highlightedIndex.value])
+            }
+            break
+        case 'Escape':
+            event.preventDefault()
+            close()
+            break
+        case 'Tab':
+            close()
+            break
+        case 'Home':
+            event.preventDefault()
+            highlightedIndex.value = 0
+            break
+        case 'End':
+            event.preventDefault()
+            highlightedIndex.value = props.options.length - 1
+            break
     }
 }
 
 const formFieldSelectElement = ref(null)
+const triggerElement = ref(null)
 const selectElement = ref(null)
 const dropdownElement = ref(null)
 
 onClickOutside(formFieldSelectElement, () => close())
 
-const selectElementBounding = useElementBounding(selectElement)
+// Anchor dropdown to the visible trigger (button on desktop, select on mobile)
+const anchorElement = computed(() => triggerElement.value || selectElement.value)
+const anchorBounding = useElementBounding(anchorElement)
 
 function calculateDropdownPosition() {
     if (!dropdownElement.value) return
@@ -63,62 +118,54 @@ function calculateDropdownPosition() {
      * Get the viewport height
      */
     const viewportHeight = window.innerHeight
-    // console.log('viewportHeight', viewportHeight)
 
     /**
      * Get the dropdown element height
      */
     const dropdownElementHeight = dropdownElement.value.offsetHeight
-    // console.log('dropdownElementHeight', dropdownElementHeight)
 
     /**
-     * Get space above the select element
+     * Get space above the anchor element
      */
-    const spaceAboveSelectElement = selectElementBounding.top.value
-    // console.log('spaceAboveSelectElement', spaceAboveSelectElement)
+    const spaceAbove = anchorBounding.top.value
 
     /**
-     * Get space below the select element
+     * Get space below the anchor element
      */
-    const spaceBelowSelectElement = viewportHeight - selectElementBounding.bottom.value
-    // console.log('spaceBelowSelectElement', spaceBelowSelectElement)
+    const spaceBelow = viewportHeight - anchorBounding.bottom.value
 
-    dropdownElement.value.style.width = `${selectElementBounding.width.value}px`
+    dropdownElement.value.style.width = `${anchorBounding.width.value}px`
 
-    dropdownElement.value.style.left = `${selectElementBounding.left.value}px`
+    dropdownElement.value.style.left = `${anchorBounding.left.value}px`
 
-    if (spaceAboveSelectElement <= dropdownElementHeight
-        && spaceBelowSelectElement <= dropdownElementHeight) {
+    if (spaceAbove <= dropdownElementHeight
+        && spaceBelow <= dropdownElementHeight) {
         dropdownElement.value.style.top = '0'
         dropdownElement.value.style.bottom = 'auto'
         return
-    } else if (spaceBelowSelectElement > dropdownElementHeight) {
-        // console.log('space below >= dropdown height')
-        dropdownElement.value.style.top = `${selectElementBounding.bottom.value + window.scrollY}px`
-        // console.log('dropdownElement.value.style.top', dropdownElement.value.style.top)
+    } else if (spaceBelow > dropdownElementHeight) {
+        dropdownElement.value.style.top = `${anchorBounding.bottom.value + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
         return
-    } else if (spaceAboveSelectElement > dropdownElementHeight) {
-        // console.log('space above > dropdown height')
+    } else if (spaceAbove > dropdownElementHeight) {
         dropdownElement.value.style.top = 'auto'
-        dropdownElement.value.style.bottom = `${spaceBelowSelectElement + selectElementBounding.height.value + 8 - window.scrollY}px`
-        // console.log('dropdownElement.value.style.bottom', dropdownElement.value.style.bottom)
+        dropdownElement.value.style.bottom = `${spaceBelow + anchorBounding.height.value + 8 - window.scrollY}px`
         return
     }
 }
 
+function handleResize() {
+    calculateDropdownPosition()
+}
+
 onMounted(() => {
-    // Check if the device is a mobile device
-    // by checking if the device has a touch screen
-    // or if the device has a max touch points
     isMobileDevice.value = 'ontouchstart' in window
         || (navigator.maxTouchPoints && navigator.maxTouchPoints > 0)
-
-    window.addEventListener('resize', () => calculateDropdownPosition())
+    window.addEventListener('resize', handleResize)
 })
 
 onUnmounted(() => {
-    window.removeEventListener('resize', () => calculateDropdownPosition())
+    window.removeEventListener('resize', handleResize)
 })
 
 defineExpose({
@@ -144,16 +191,42 @@ defineExpose({
         <slot name="label"></slot>
     </template>
     <div class="rsui-form-field-select__group">
+        <!-- Desktop-only keyboard-accessible trigger -->
+        <button
+            ref="triggerElement"
+            v-if="!isMobileDevice"
+            type="button"
+            class="rsui-form-field-select__trigger peer"
+            role="combobox"
+            :aria-activedescendant="highlightedIndex >= 0 ? `${effectiveId}-option-${highlightedIndex}` : undefined"
+            :aria-controls="`${effectiveId}-listbox`"
+            :aria-describedby="ariaDescribedby"
+            :aria-expanded="isOpen"
+            :aria-haspopup="'listbox'"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
+            :disabled="$attrs.disabled"
+            :id="effectiveId"
+            @click="toggleOptions"
+            @keydown="handleKeydown"
+        >
+            {{ options.find(o => o.value === model)?.label || 'Select an option' }}
+        </button>
+
         <select ref="selectElement"
-            class="peer"
+            :class="['peer', { 'sr-only': !isMobileDevice }]"
             v-model="model"
+            :aria-describedby="isMobileDevice ? ariaDescribedby : undefined"
+            :aria-invalid="isMobileDevice ? ariaInvalid : undefined"
+            :aria-required="isMobileDevice ? ($attrs.required || undefined) : undefined"
+            :aria-hidden="!isMobileDevice || undefined"
+            :tabindex="!isMobileDevice ? -1 : undefined"
             :autocomplete="$attrs.autocomplete"
-            :autofocus="$attrs.autofocus"
+            :autofocus="isMobileDevice ? $attrs.autofocus : undefined"
             :disabled="$attrs.disabled"
-            :id="$attrs.id"
+            :id="isMobileDevice ? effectiveId : undefined"
             :name="$attrs.name"
             :required="$attrs.required"
-            @click="handleSelectClick"
             @change.prevent="nativeChoose"
         >
             <option value="" disabled>
@@ -182,13 +255,17 @@ defineExpose({
             >
                 <div ref="dropdownElement"
                     v-show="isOpen"
+                    :id="`${effectiveId}-listbox`"
+                    role="listbox"
                     :class="[
                         'rsui-form-field-select__options',
                         { 'rsui-form-field-select__options--open': isOpen }
                     ]"
                 >
                     <div class="rsui-form-field-select__option rsui-form-field-select__option--disabled"
-                        value=""
+                        role="option"
+                        aria-selected="false"
+                        aria-disabled="true"
                     >
                         <div class="rsui-form-field-select__option-label">
                             <slot name="default-option">
@@ -196,9 +273,15 @@ defineExpose({
                             </slot>
                         </div>
                     </div>
-                    <div v-for="option in options"
+                    <div v-for="(option, index) in options"
                         :key="option.value"
-                        class="rsui-form-field-select__option"
+                        :id="`${effectiveId}-option-${index}`"
+                        role="option"
+                        :aria-selected="option.value === model"
+                        :class="[
+                            'rsui-form-field-select__option',
+                            { 'rsui-form-field-select__option--highlighted': index === highlightedIndex }
+                        ]"
                         @click="choose(option)"
                     >
                         <div class="rsui-form-field-select__option-label"
@@ -206,7 +289,7 @@ defineExpose({
                         >
                             {{ option.label }}
                         </div>
-                        <div class="rsui-form-field-select__option-icon">
+                        <div class="rsui-form-field-select__option-icon" aria-hidden="true">
                             <CheckIcon v-if="option.value === model"></CheckIcon>
                         </div>
                     </div>
@@ -217,7 +300,7 @@ defineExpose({
         <div :class="[
             'rsui-form-field-select__icon',
             { 'rsui-form-field-select__icon--open': isOpen }
-        ]">
+        ]" aria-hidden="true">
             <ChevronDownIcon></ChevronDownIcon>
         </div>
     </div>

package/src/components/FormField/FormFieldSlot.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useSlots, useId, provide } from 'vue'
+import { FormFieldA11yKey } from '../../composables/useFormFieldA11y.js'
 
 const props = defineProps({
     compact: {
@@ -17,6 +18,29 @@ defineOptions({
 })
 
 const attrs = useAttrs()
+const slots = useSlots()
+
+// Generate a stable unique ID, prefer consumer-provided id
+const autoId = useId()
+const inputId = computed(() => attrs.id || autoId)
+
+// Compute aria-describedby from rendered help/error slots
+const ariaDescribedby = computed(() => {
+    const ids = []
+    if (slots.help) ids.push(`${inputId.value}-help`)
+    if (slots.error) ids.push(`${inputId.value}-error`)
+    return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+// aria-invalid when error slot is present
+const ariaInvalid = computed(() => slots.error ? true : undefined)
+
+// Provide a11y values for child components to inject
+provide(FormFieldA11yKey, {
+    inputId,
+    ariaDescribedby,
+    ariaInvalid,
+})
 
 const formFieldSlotClass = computed(() => [
     attrs.class,
@@ -41,7 +65,7 @@ const formFieldSlotLabelClass = computed(() => [
         :class="formFieldSlotLabelClass"
     >
         <label
-            :for="$attrs.id"
+            :for="inputId"
         >
             <slot name="label"></slot>
         </label>
@@ -51,12 +75,15 @@ const formFieldSlotLabelClass = computed(() => [
     >
         <slot></slot>
         <div v-if="$slots.help"
+            :id="`${inputId}-help`"
             class="rsui-form-field-slot__help"
         >
             <slot name="help"></slot>
         </div>
         <div v-if="$slots.error"
+            :id="`${inputId}-error`"
             class="rsui-form-field-slot__error"
+            role="alert"
         >
             <slot name="error"></slot>
         </div>

package/src/components/FormField/FormFieldText.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -10,6 +11,8 @@ defineEmits(['input', 'keyup-enter'])
 
 const model = defineModel()
 
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
 const inputElement = ref(null)
 
 defineExpose({
@@ -32,17 +35,19 @@ defineExpose({
     <div class="rsui-form-field-text__group">
         <div v-if="$slots.prefix"
             class="rsui-form-field-text__prefix"
-            @click.prevent="inputElement.focus()"
         >
             <slot name="prefix"></slot>
         </div>
 
         <input ref="inputElement"
             v-model="model"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="$attrs.id"
+            :id="inputId || $attrs.id"
             :inputmode="$attrs.inputmode"
             :max="$attrs.max"
             :maxlength="$attrs.maxlength"
@@ -60,7 +65,6 @@ defineExpose({
 
         <div v-if="$slots.suffix"
             class="rsui-form-field-text__suffix"
-            @click.prevent="$refs.inputElement.focus()"
         >
             <slot name="suffix"></slot>
         </div>

package/src/components/FormField/FormFieldTextarea.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { useTextareaAutosize } from '@vueuse/core'
+import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -16,6 +17,8 @@ const props = defineProps({
 
 const emit = defineEmits(['input', 'select', 'keydown:enter'])
 
+const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
+
 const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
 
 const model = defineModel()
@@ -59,9 +62,12 @@ defineExpose({
 
         <textarea ref="textarea"
             v-model="input"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :aria-required="$attrs.required || undefined"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="$attrs.id"
+            :id="inputId || $attrs.id"
             :maxlength="$attrs.maxlength"
             :minlength="$attrs.minlength"
             :name="$attrs.name"

package/src/components/FormField/FormFieldUploaderWrapper.vue

@@ -119,7 +119,7 @@ function removeAction() {
 
     <div :class="uploaderContainerClass">
         <div :class="uploaderContentClass">
-            <div :class="uploaderStateIconClass">
+            <div :class="uploaderStateIconClass" aria-hidden="true">
                 <slot name="state-icon-default" v-if="stateDefault && !hasMedia">
                     <PlusIcon />
                 </slot>
@@ -177,13 +177,16 @@ function removeAction() {
         <div v-if="showRemoveAction"
             class="rsui-form-field-uploader__action"
         >
-            <div class="rsui-form-field-uploader__action-icon"
+            <button
+                type="button"
+                class="rsui-form-field-uploader__action-icon"
+                aria-label="Remove uploaded file"
                 @click="removeAction"
             >
                 <slot name="state-action">
-                    <XMarkIcon />
+                    <XMarkIcon aria-hidden="true" />
                 </slot>
-            </div>
+            </button>
         </div>
     </div>
 </FormFieldSlot>

package/src/components/Toggle/Toggle.vue

@@ -1,5 +1,9 @@
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, watch, useId, useSlots, useAttrs } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
 
 const props = defineProps({
     disabled: {
@@ -24,12 +28,36 @@ const model = defineModel();
 
 const emit = defineEmits(['update'])
 
+const attrs = useAttrs()
+const slots = useSlots()
+
+// Generate a stable unique ID for label/input association
+const autoId = useId()
+const toggleId = computed(() => attrs.id || autoId)
+
+// Compute aria-describedby from rendered help/error slots
+const ariaDescribedby = computed(() => {
+    const ids = []
+    if (slots.help) ids.push(`${toggleId.value}-help`)
+    if (slots.error) ids.push(`${toggleId.value}-error`)
+    return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+// aria-invalid when error slot is present
+const ariaInvalid = computed(() => slots.error ? true : undefined)
+
 watch(model, (val) => {
     emit('update', val)
 })
 
 const defaultSize = computed(() => !props.sm && !props.md)
 
+// Filter out id and aria-label from $attrs — id goes on <input>, aria-label is handled explicitly
+const rootAttrs = computed(() => {
+    const { id, 'aria-label': ariaLabel, ...rest } = attrs
+    return rest
+})
+
 const toggleClasses = computed(() => [
     'rsui-toggle',
     {
@@ -47,25 +75,35 @@ const controlClasses = computed(() => [
 ])
 </script>
 <template>
-<div :class="toggleClasses">
+<div :class="toggleClasses" v-bind="rootAttrs">
     <div :class="controlClasses">
         <label v-if="$slots['label']"
-            :for="$attrs.id"
+            :for="toggleId"
         >
             <slot name="label"></slot>
         </label>
         <input
+            :id="toggleId"
             :disabled="disabled"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :aria-label="!$slots['label'] ? $attrs['aria-label'] : undefined"
+            :aria-required="$attrs.required || undefined"
             v-model="model"
             type="checkbox"
         >
     </div>
     <div v-if="$slots['help']"
+        :id="`${toggleId}-help`"
         class="rsui-toggle__help"
     >
         <slot name="help"></slot>
     </div>
-    <div v-if="$slots['error']" class="formfield-input__error">
+    <div v-if="$slots['error']"
+        :id="`${toggleId}-error`"
+        role="alert"
+        class="rsui-toggle__error"
+    >
         <slot name="error"></slot>
     </div>
 </div>

package/src/composables/useFormFieldA11y.js

@@ -0,0 +1,28 @@
+import { inject, ref } from 'vue'
+
+// Injection key used by FormFieldSlot to provide a11y values
+export const FormFieldA11yKey = Symbol('FormFieldA11y')
+
+/**
+ * Consumer side of a provide/inject pattern for WCAG a11y attributes.
+ *
+ * FormFieldSlot (the wrapper) provides three reactive values under FormFieldA11yKey:
+ *   - inputId:          a unique ID (from useId()) for <label for> / <input id> association
+ *   - ariaDescribedby:  computed string linking to help/error text element IDs
+ *   - ariaInvalid:      computed boolean, true when an error slot is present
+ *
+ * Child input components (FormFieldText, Checkbox, Select, Toggle, etc.) call this
+ * composable to inject those values and bind them to their <input> elements.
+ *
+ * Safe to use outside FormFieldSlot — returns ref(null) fallbacks so ARIA attributes
+ * simply won't render when there's no wrapper providing help/error context.
+ */
+export function useFormFieldA11y() {
+    const a11y = inject(FormFieldA11yKey, null)
+
+    return {
+        inputId: a11y?.inputId ?? ref(null),
+        ariaDescribedby: a11y?.ariaDescribedby ?? ref(null),
+        ariaInvalid: a11y?.ariaInvalid ?? ref(null),
+    }
+}