@redseed/redseed-ui-vue3 8.22.0 → 8.22.1

package/package.json

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

package/src/components/ActivityFeeds/FeedItem.vue

@@ -60,7 +60,7 @@ function handleClick() {
         <div v-if="status !== false"
             class="rsui-feed-item__avatar-indicator"
         >
-            <span class="sr-only">{{ status }}</span>
+            <span class="rsui-feed-item__avatar-indicator-label">{{ status }}</span>
             <slot name="avatar-indicator"
                 :status="status"
             >

package/src/components/FormField/FormFieldUploaderWrapper.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, useAttrs, useSlots } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import Loader from '../Loader/Loader.vue'
 import { PlusIcon, DocumentIcon, ExclamationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline'
-import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
     inheritAttrs: false,
@@ -20,9 +19,21 @@ const props = defineProps({
     },
 })
 
+const attrs = useAttrs()
+const slots = useSlots()
+
 const emit = defineEmits(['remove'])
 
-const { inputId, ariaDescribedby } = useFormFieldA11y()
+// Generate a11y values locally — useFormFieldA11y() cannot inject from
+// FormFieldSlot because the slot is a child, not a parent
+const autoId = _.uniqueId('form-field-')
+const inputId = computed(() => attrs.id || autoId)
+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
+})
 
 const stateDefault = computed(() => {
     return !stateUploading.value
@@ -102,7 +113,7 @@ function removeAction() {
 </script>
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
     :class="[$attrs.class, 'rsui-form-field-uploader']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"

package/src/components/List/ListItem.vue

@@ -66,7 +66,6 @@ function clickItem(event) {
     :class="listItemClass"
     :tabindex="clickable ? 0 : undefined"
     :role="clickable ? 'button' : undefined"
-    @click="clickItem"
     @keydown.enter.self.prevent="!$event.repeat && clickItem($event)"
     @keydown.space.self.prevent="!$event.repeat && clickItem($event)"
 >
@@ -105,7 +104,7 @@ function clickItem(event) {
         The hover effect is also applied when the header action button is hovered,
         but not the active effect when the header action button is clicked.
     -->
-    <div :class="listItemBackgroundClass"></div>
+    <div :class="listItemBackgroundClass" @click="clickItem"></div>
     <!--
         This body div is used to show meta and description slots in larger screens.
         It is hidden in smaller screens.