@redseed/redseed-ui-vue3 10.0.0 → 10.3.0

package/index.js

@@ -48,5 +48,6 @@ export * from './src/components/Switcher'
 export * from './src/components/TabSlider'
 export * from './src/components/Table'
 export * from './src/components/Toggle'
+export * from './src/components/Toast'
 export * from './src/components/Tooltip'
 export * from './src/helpers'

package/package.json

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

package/src/components/Button/ButtonSlot.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue'
+import { ref, computed, onMounted, watchEffect, useAttrs } from 'vue'
 
 const props = defineProps({
     xs: {
@@ -51,10 +51,90 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /*
+     * Render a real link that looks like a button.
+     *
+     * Material, Polaris and Carbon all do this, and the absence of it has already cost
+     * something in the LMS: because the button family could not navigate, navigation
+     * controls were built from LinkPrimary instead — and LinkPrimary then got used for
+     * things that do NOT navigate. TeamMemberOverviewTab still renders eight LinkPrimarys
+     * carrying only a @click, which are links that go nowhere: our own clickable standards
+     * broken in the product they were written for. (The homepage sections did the same
+     * until lms#5012 replaced them, so the pattern is real and recurring, not a one-off.)
+     *
+     * Declared here rather than on each wrapper. A fallthrough attr that matches a
+     * declared prop on the child is bound as that prop, so `<ButtonPrimary href="/x">`
+     * reaches this — covered by a test, because it is the kind of thing that works
+     * until someone adds `inheritAttrs: false` to a wrapper.
+     */
+    href: {
+        type: String,
+        default: null,
+    },
+    /*
+     * Declared rather than left to fall through, which is a change of mechanism and not of
+     * behaviour for a button.
+     *
+     * A fallthrough attr is merged onto the root element and beats an explicit binding
+     * there, so while `disabled` fell through there was no way to keep it off the anchor —
+     * and `disabled` is not a property of HTMLAnchorElement, so Vue wrote it as a literal
+     * attribute. Every enabled link button rendered `<a href="/x" disabled="false">`:
+     * invalid HTML, inert in practice, but it trips `[disabled]` selectors and reads as a
+     * disabled control to anything inspecting the DOM.
+     *
+     * `type: null` accepts any value and coerces none, so a consumer passing a string, a
+     * number or nothing gets exactly what they got before — see isDisabled below, which
+     * decides what those mean.
+     */
+    disabled: {
+        type: null,
+        default: undefined,
+    },
 })
 
 defineEmits(['click'])
 
+const attrs = useAttrs()
+
+/*
+ * A link when it navigates, a button when it acts — and a button when it is disabled,
+ * whatever else it is.
+ *
+ * `disabled` does not exist on an anchor. A disabled <a href> still navigates on click
+ * and still follows on Enter, and every variant's disabled styling is written with the
+ * `disabled:` pseudo-class, which never matches an anchor — so a disabled link would
+ * have looked enabled AND worked. Falling back to a real <button disabled> makes it
+ * genuinely inert and correctly styled, with no new CSS.
+ *
+ * `disabled` arrives as a fallthrough attr rather than a prop, so it is read from attrs.
+ * Vue renders `disabled="false"` as absent, but a consumer writing the string "false"
+ * means it to be truthy-looking and is wrong either way; only absent and `false` count
+ * as enabled.
+ */
+/*
+ * Matches what the DOM will actually do, which `!== undefined && !== false` did not.
+ *
+ * `:disabled="null"` and `:disabled="0"` are ordinary bindings — `:disabled="user.lockedAt"`
+ * is null when unlocked, `:disabled="count"` is 0 when empty. Both were treated as disabled
+ * here, so the href was withheld and the tag flipped to <button>; but Vue renders a nullish
+ * or zero `disabled` as ABSENT, so the button came out fully enabled. The result was an
+ * ordinary-looking button that navigated nowhere and fired a handler nobody wrote.
+ *
+ * Measured across every input: undefined/false/null/0 enable, "" and the string "false"
+ * disable — the last one deliberately, because an author writing disabled="false" means it
+ * to bind, and a disabled control is the safe way to be wrong.
+ */
+const isDisabled = computed(() =>
+    props.disabled !== undefined
+    && props.disabled !== null
+    && props.disabled !== false
+    && props.disabled !== 0
+)
+
+const isLink = computed(() => Boolean(props.href) && !isDisabled.value)
+
+const tag = computed(() => isLink.value ? 'a' : 'button')
+
 // button element ref
 const buttonElementRef = ref(null)
 
@@ -126,10 +206,12 @@ onMounted(() => {
 })
 </script>
 <template>
-<button
+<component :is="tag"
     ref="buttonElementRef"
     :class="buttonSlotClass"
-    type="button"
+    :href="isLink ? href : undefined"
+    :type="isLink ? undefined : 'button'"
+    :disabled="isLink ? undefined : (isDisabled || undefined)"
     @click="$emit('click', $event)"
 >
     <span v-if="$slots.icon" aria-hidden="true">
@@ -137,5 +219,5 @@ onMounted(() => {
     </span>
 
     <slot></slot>
-</button>
+</component>
 </template>

package/src/components/DropdownMenu/DropdownDivider.vue

@@ -0,0 +1,22 @@
+<script setup>
+/**
+ * A rule between groups of options in a DropdownMenu.
+ *
+ * `role="separator"` rather than `menuitem`, and deliberately not focusable.
+ * `DropdownMenu.handleMenuKeydown()` collects `[role="menuitem"]` for arrow-key
+ * navigation, so a separator carrying any other role is stepped over for free —
+ * the divider never becomes a stop on the way to the option below it.
+ *
+ * A component rather than a documented `<hr>`, because a consuming app writing
+ * its own would have nothing to style it with (apps pass no `class` or `style`)
+ * and could easily reach for `<hr tabindex="0">`, which lands in the tab order
+ * between two options.
+ *
+ * No orientation prop: the menu container is `flex-col`, so a separator in it is
+ * always horizontal. `role="separator"` defaults to `aria-orientation="horizontal"`,
+ * which is already correct.
+ */
+</script>
+<template>
+<div class="rsui-dropdown-divider" role="separator"></div>
+</template>

package/src/components/DropdownMenu/DropdownOption.vue

@@ -1,4 +1,28 @@
 <script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    /**
+     * A destructive option — Delete, Remove, Revoke.
+     *
+     * Presentation only. The option still announces as a plain `menuitem`, because
+     * "this one deletes something" is not a role and there is no ARIA for it. Colour
+     * must therefore not be the only signal (WCAG 1.4.1) — pair it with a trash icon
+     * and an explicit verb ("Delete meeting", not "Delete").
+     */
+    danger: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const optionClass = computed(() => [
+    'rsui-dropdown-option',
+    {
+        'rsui-dropdown-option--danger': props.danger,
+    },
+])
+
 const emit = defineEmits(['click'])
 
 function handleClick() {
@@ -6,7 +30,7 @@ function handleClick() {
 }
 </script>
 <template>
-<div class="rsui-dropdown-option"
+<div :class="optionClass"
     role="menuitem"
     tabindex="0"
     @click="handleClick"

package/src/components/DropdownMenu/index.js

@@ -1,7 +1,9 @@
 import DropdownMenu from './DropdownMenu.vue'
 import DropdownOption from './DropdownOption.vue'
+import DropdownDivider from './DropdownDivider.vue'
 
 export {
     DropdownMenu,
     DropdownOption,
-}
+    DropdownDivider,
+}

package/src/components/FormField/FormFieldCheckbox.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
-import { CheckIcon } from '@heroicons/vue/24/outline'
+import { CheckIcon, MinusIcon } from '@heroicons/vue/24/outline'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
 defineOptions({
@@ -19,6 +19,26 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Some but not all of the things this box stands for are selected.
+     *
+     * The state a select-all exists to show, and the one a plain boolean cannot: without
+     * it, "3 of 12 rows selected" renders identically to "none selected", so the control
+     * reports the opposite of the truth.
+     *
+     * Presentation AND semantics, but not value — an indeterminate box is still unchecked
+     * as far as `v-model` goes. Clicking it checks it, which is the platform behaviour and
+     * what every consumer expects: the next click selects everything.
+     *
+     * Ignored while `checked`, because a box cannot be both. That ordering is deliberate:
+     * a consumer computing `:indeterminate="some && !all"` alongside `v-model="all"` can
+     * leave both true for a tick during an update, and the checked state is the safer of
+     * the two to show.
+     */
+    indeterminate: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 // Resolve to a single size modifier so only one applies at a time.
@@ -36,6 +56,27 @@ const emit = defineEmits(['input'])
 
 const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 
+/*
+ * `indeterminate` is a DOM PROPERTY, not an attribute — there is no `indeterminate=""` to
+ * bind, and setting one does nothing. It has to be written to the element, which is why
+ * this needs a ref and a watch rather than a binding in the template.
+ *
+ * It is also what makes a screen reader announce "mixed" rather than "unchecked", so this
+ * is the accessible state and not only the glyph.
+ */
+const inputElement = ref(null)
+
+const isIndeterminate = computed(() => props.indeterminate && !checked.value)
+
+function syncIndeterminate() {
+    if (!inputElement.value) return
+
+    inputElement.value.indeterminate = isIndeterminate.value
+}
+
+watch(isIndeterminate, syncIndeterminate)
+onMounted(syncIndeterminate)
+
 function check(event) {
     checked.value = !checked.value
     model.value = checked.value
@@ -44,7 +85,8 @@ function check(event) {
 </script>
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :required="$attrs.required"
     :showAsterisk="false"
     class="rsui-form-field-checkbox"
@@ -53,15 +95,26 @@ function check(event) {
         <div class="rsui-form-field-checkbox__checkbox">
             <div :class="['rsui-form-field-checkbox__check', size && `rsui-form-field-checkbox__check--${size}`]">
                 <CheckIcon v-if="checked" aria-hidden="true"></CheckIcon>
-                <input
+                <!--
+                    A dash, not a tick. No v-else: each branch states its own condition, so
+                    the mutual exclusion is visible rather than implied.
+                -->
+                <MinusIcon v-if="isIndeterminate" aria-hidden="true"></MinusIcon>
+                <!--
+                    aria-label is bound explicitly because inheritAttrs is false, so it
+                    would otherwise land nowhere. A checkbox used without a visible #label
+                    — a table's selection column — has no accessible name without it.
+                -->
+                <input ref="inputElement"
                     :checked="checked"
                     type="checkbox"
                     :aria-describedby="ariaDescribedby"
                     :aria-invalid="ariaInvalid"
+                    :aria-label="$attrs['aria-label']"
                     :aria-required="$attrs.required || undefined"
                     :autofocus="$attrs.autofocus"
                     :disabled="$attrs.disabled"
-                    :id="inputId || $attrs.id"
+                    :id="inputId"
                     :name="$attrs.name"
                     :required="$attrs.required"
                     @change="check"

package/src/components/FormField/FormFieldCombobox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, useAttrs, useId } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
@@ -58,7 +58,6 @@ const props = defineProps({
 
 const emit = defineEmits(['input', 'change', 'keyup-enter', 'navigate', 'reject'])
 
-const attrs = useAttrs()
 const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 
 const isOpen = ref(false)
@@ -80,11 +79,6 @@ const searchError = ref(null)
 const asyncOptions = ref([])
 const debounceTimeout = ref(null)
 
-// Stable fallback so the listbox/datalist/option IDs (and the native <input
-// list>/<datalist id> association) never collapse to `undefined-...` when a
-// consumer supplies neither an injected inputId nor an explicit id attr.
-const fallbackId = useId()
-const effectiveId = computed(() => inputId.value || attrs.id || fallbackId)
 
 // Engage the native <datalist> path only when opted in, on a touch device, and
 // for the plain synchronous-options case a <datalist> can actually represent
@@ -96,7 +90,7 @@ const useNativeMobile = computed(() =>
     && !props.searchFunction
     && !props.navigable
 )
-const datalistId = computed(() => `${effectiveId.value}-datalist`)
+const datalistId = computed(() => `${inputId.value}-datalist`)
 
 // Live region announcement for screen readers
 const liveAnnouncement = computed(() => {
@@ -472,7 +466,8 @@ defineExpose({
 <template>
 <FormFieldSlot
     ref="comboboxElement"
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-combobox']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
@@ -495,10 +490,10 @@ defineExpose({
             v-if="!useNativeMobile"
             ref="inputElement"
             role="combobox"
-            :aria-activedescendant="isOpen && dropdownContent === 'options' && highlightedIndex >= 0 ? `${effectiveId}-option-${highlightedIndex}` : undefined"
+            :aria-activedescendant="isOpen && dropdownContent === 'options' && highlightedIndex >= 0 ? `${inputId}-option-${highlightedIndex}` : undefined"
             :aria-autocomplete="'list'"
             :aria-busy="isLoading || undefined"
-            :aria-controls="`${effectiveId}-listbox`"
+            :aria-controls="`${inputId}-listbox`"
             :aria-describedby="ariaDescribedby"
             :aria-expanded="isOpen"
             :aria-haspopup="'listbox'"
@@ -508,7 +503,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="effectiveId"
+            :id="inputId"
             :name="$attrs.name"
             :placeholder="$slots.placeholder ? '' : 'Type to search or select...'"
             :required="$attrs.required"
@@ -533,7 +528,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="effectiveId"
+            :id="inputId"
             :name="$attrs.name"
             :placeholder="$slots.placeholder ? '' : 'Type to search or select...'"
             :required="$attrs.required"
@@ -571,7 +566,7 @@ defineExpose({
                 <div
                     ref="dropdownElement"
                     v-show="isOpen"
-                    :id="`${effectiveId}-listbox`"
+                    :id="`${inputId}-listbox`"
                     role="listbox"
                     :class="[
                         'rsui-form-field-combobox__options',
@@ -660,7 +655,7 @@ defineExpose({
                             <div
                                 v-for="option in group.options"
                                 :key="option.value"
-                                :id="`${effectiveId}-option-${filteredOptions.indexOf(option)}`"
+                                :id="`${inputId}-option-${filteredOptions.indexOf(option)}`"
                                 role="option"
                                 :aria-selected="option.value === model"
                                 :class="[
@@ -687,7 +682,7 @@ defineExpose({
                         <div
                             v-for="(option, index) in filteredOptions"
                             :key="option.value"
-                            :id="`${effectiveId}-option-${index}`"
+                            :id="`${inputId}-option-${index}`"
                             role="option"
                             :aria-selected="option.value === model"
                             :class="[

package/src/components/FormField/FormFieldRadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
 
@@ -26,11 +26,8 @@ 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)
@@ -60,21 +57,26 @@ const itemsClass = computed(() => [
 </script>
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-radio-group']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
     :compact="$attrs.compact"
     :lg="$attrs.lg"
 >
+    <!--
+        No id-carrying wrapper here. FormFieldSlot's own <label> already carries
+        `${inputId}-label`, so a span with the same id inside it put that id in the
+        document twice and left aria-labelledby resolving to whichever the browser
+        picked (WCAG 4.1.1). The group points at FormFieldSlot's label instead.
+    -->
     <template #label v-if="$slots.label">
-        <span :id="`${effectiveId}-label`">
-            <slot name="label"></slot>
-        </span>
+        <slot name="label"></slot>
     </template>
     <div :class="itemsClass"
         role="radiogroup"
-        :aria-labelledby="$slots.label ? `${effectiveId}-label` : undefined"
+        :aria-labelledby="$slots.label ? `${inputId}-label` : undefined"
         :aria-describedby="ariaDescribedby"
         :aria-invalid="ariaInvalid"
         :aria-required="$attrs.required || undefined"
@@ -98,12 +100,12 @@ const itemsClass = computed(() => [
                 type="radio"
                 :value="option.value"
                 v-model="model"
-                :id="`${effectiveId}-option-${index}`"
-                :name="$attrs.name || effectiveId"
+                :id="`${inputId}-option-${index}`"
+                :name="$attrs.name || inputId"
                 :aria-describedby="ariaDescribedby"
             >
             <label
-                :for="`${effectiveId}-option-${index}`"
+                :for="`${inputId}-option-${index}`"
                 :class="['rsui-form-field-radio-group__item-label', {'rsui-form-field-radio-group__item-label--disabled': option.disabled}]"
             >
                 {{ option.label }}

package/src/components/FormField/FormFieldSearchAsync.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, useAttrs } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
@@ -36,7 +36,6 @@ const props = defineProps({
 
 const emit = defineEmits(['input', 'query-change', 'navigate', 'keyup-enter'])
 
-const attrs = useAttrs()
 const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 
 const query = ref('')
@@ -53,8 +52,6 @@ const results = ref([])
 const debounceTimeout = ref(null)
 let latestRequestId = 0
 
-const effectiveId = computed(() => inputId.value || attrs.id)
-
 const liveAnnouncement = computed(() => {
     if (!isOpen.value) return ''
     if (isLoading.value) return 'Searching'
@@ -274,7 +271,8 @@ defineExpose({
 <template>
 <FormFieldSlot
     ref="rootElement"
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-search-async', 'rsui-form-field-search', 'rsui-form-field-text']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
@@ -297,10 +295,10 @@ defineExpose({
             ref="inputElement"
             role="combobox"
             class="rsui-form-field-search"
-            :aria-activedescendant="isOpen && dropdownContent === 'results' && highlightedIndex >= 0 ? `${effectiveId}-result-${highlightedIndex}` : undefined"
+            :aria-activedescendant="isOpen && dropdownContent === 'results' && highlightedIndex >= 0 ? `${inputId}-result-${highlightedIndex}` : undefined"
             :aria-autocomplete="'list'"
             :aria-busy="isLoading || undefined"
-            :aria-controls="`${effectiveId}-listbox`"
+            :aria-controls="`${inputId}-listbox`"
             :aria-describedby="ariaDescribedby"
             :aria-expanded="isOpen"
             :aria-haspopup="'listbox'"
@@ -310,7 +308,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete || 'off'"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="effectiveId"
+            :id="inputId"
             :name="$attrs.name"
             :placeholder="$attrs.placeholder || 'Search...'"
             :required="$attrs.required"
@@ -333,7 +331,7 @@ defineExpose({
                 <div
                     ref="dropdownElement"
                     v-show="isOpen"
-                    :id="`${effectiveId}-listbox`"
+                    :id="`${inputId}-listbox`"
                     role="listbox"
                     :class="[
                         'rsui-form-field-combobox__options',
@@ -416,7 +414,7 @@ defineExpose({
                             <div
                                 v-for="{ result, flatIndex } in group.items"
                                 :key="result.value"
-                                :id="`${effectiveId}-result-${flatIndex}`"
+                                :id="`${inputId}-result-${flatIndex}`"
                                 role="option"
                                 aria-selected="false"
                                 :class="[
@@ -446,7 +444,7 @@ defineExpose({
                         <div
                             v-for="(result, index) in results"
                             :key="result.value"
-                            :id="`${effectiveId}-result-${index}`"
+                            :id="`${inputId}-result-${index}`"
                             role="option"
                             aria-selected="false"
                             :class="[

package/src/components/FormField/FormFieldSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted, useAttrs } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
@@ -21,21 +21,12 @@ 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)
 
-// 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
@@ -212,7 +203,8 @@ defineExpose({
 <template>
 <FormFieldSlot
     ref="formFieldSelectElement"
-    :id="effectiveId"
+    :id="inputId"
+    id-claimed
     :class="[
         $attrs.class,
         'rsui-form-field-select',
@@ -237,15 +229,15 @@ defineExpose({
                 { 'rsui-form-field-select__trigger--invalid': isNativeInvalid }
             ]"
             role="combobox"
-            :aria-activedescendant="highlightedIndex >= 0 ? `${effectiveId}-option-${highlightedIndex}` : undefined"
-            :aria-controls="isOpen ? `${effectiveId}-listbox` : undefined"
+            :aria-activedescendant="highlightedIndex >= 0 ? `${inputId}-option-${highlightedIndex}` : undefined"
+            :aria-controls="isOpen ? `${inputId}-listbox` : undefined"
             :aria-describedby="ariaDescribedby"
             :aria-expanded="isOpen"
             :aria-haspopup="'listbox'"
             :aria-invalid="ariaInvalid || isNativeInvalid || undefined"
             :aria-required="$attrs.required || undefined"
             :disabled="$attrs.disabled"
-            :id="effectiveId"
+            :id="inputId"
             @click="toggleOptions"
             @keydown="handleKeydown"
         >
@@ -263,7 +255,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="isMobileDevice ? $attrs.autofocus : undefined"
             :disabled="$attrs.disabled"
-            :id="isMobileDevice ? effectiveId : undefined"
+            :id="isMobileDevice ? inputId : undefined"
             :name="$attrs.name"
             :required="$attrs.required"
             @change.prevent="nativeChoose"
@@ -295,7 +287,7 @@ defineExpose({
             >
                 <div ref="dropdownElement"
                     v-show="isOpen"
-                    :id="`${effectiveId}-listbox`"
+                    :id="`${inputId}-listbox`"
                     role="listbox"
                     :class="[
                         'rsui-form-field-select__options',
@@ -303,7 +295,7 @@ defineExpose({
                     ]"
                 >
                     <div class="rsui-form-field-select__option rsui-form-field-select__option--disabled"
-                        :id="`${effectiveId}-option-placeholder`"
+                        :id="`${inputId}-option-placeholder`"
                         role="option"
                         aria-selected="false"
                         aria-disabled="true"
@@ -316,7 +308,7 @@ defineExpose({
                     </div>
                     <div v-for="(option, index) in options"
                         :key="option.value"
-                        :id="`${effectiveId}-option-${index}`"
+                        :id="`${inputId}-option-${index}`"
                         role="option"
                         :aria-selected="option.value === model"
                         :class="[