@redseed/redseed-ui-vue3 10.1.0 → 10.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "10.1.0",
+    "version": "10.3.1",
     "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="[

package/src/components/FormField/FormFieldSlot.vue

@@ -15,6 +15,21 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Set by a field component to say "the id I handed you is already on my own control".
+     *
+     * It is what lets `useFormFieldA11y()` tell two identical-looking nestings apart. A
+     * field renders this slot as its own root and puts the id on its own input, so anything
+     * appearing in the slots below is a SEPARATE control and must mint its own id. A bare
+     * FormFieldSlot written by a consumer owns no control, so whatever it wraps is the
+     * control this label belongs to and should adopt the id.
+     *
+     * Injection alone cannot distinguish those — both cases simply see a provider above.
+     */
+    idClaimed: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 defineOptions({
@@ -39,11 +54,13 @@ const ariaDescribedby = computed(() => {
 // aria-invalid when error slot is present
 const ariaInvalid = computed(() => slots.error ? true : undefined)
 
-// Provide a11y values for child components to inject
+// Provide a11y values for child components to inject. `idClaimed` travels with them so a
+// nested field can tell whether the id above it is already spoken for.
 provide(FormFieldA11yKey, {
     inputId,
     ariaDescribedby,
     ariaInvalid,
+    idClaimed: computed(() => props.idClaimed),
 })
 
 const formFieldSlotClass = computed(() => [

package/src/components/FormField/FormFieldText.vue

@@ -23,7 +23,8 @@ defineExpose({
 </script>
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-text']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
@@ -47,7 +48,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="inputId || $attrs.id"
+            :id="inputId"
             :inputmode="$attrs.inputmode"
             :max="$attrs.max"
             :maxlength="$attrs.maxlength"

package/src/components/FormField/FormFieldTextarea.vue

@@ -50,7 +50,8 @@ defineExpose({
 </script>
 <template>
     <FormFieldSlot
-        :id="$attrs.id"
+        :id="inputId"
+    id-claimed
         :class="[$attrs.class, 'rsui-form-field-textarea']"
         :required="$attrs.required"
         :showAsterisk="$attrs.showAsterisk"
@@ -69,7 +70,7 @@ defineExpose({
             :autocomplete="$attrs.autocomplete"
             :autofocus="$attrs.autofocus"
             :disabled="$attrs.disabled"
-            :id="inputId || $attrs.id"
+            :id="inputId"
             :maxlength="$attrs.maxlength"
             :minlength="$attrs.minlength"
             :name="$attrs.name"

package/src/components/FormField/FormFieldTreeSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useAttrs } from 'vue'
+import { ref, computed } from 'vue'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import FormFieldSlot from './FormFieldSlot.vue'
 import FormFieldSearch from './FormFieldSearch.vue'
@@ -49,7 +49,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change'])
 
-const attrs = useAttrs()
 const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 
 const model = defineModel({
@@ -57,8 +56,6 @@ const model = defineModel({
     validator: () => true,
 })
 
-const effectiveId = computed(() => inputId.value || attrs.id)
-
 const show = ref(false)
 function openModal() {
     if (props.disabled) return
@@ -181,7 +178,8 @@ function deselectOption(node) {
 
 <template>
 <FormFieldSlot
-    :id="$attrs.id"
+    :id="inputId"
+    id-claimed
     :class="[$attrs.class, 'rsui-form-field-tree-select']"
     :required="$attrs.required"
     :showAsterisk="$attrs.showAsterisk"
@@ -199,7 +197,7 @@ function deselectOption(node) {
                 { 'rsui-form-field-tree-select__trigger--full': fullWidth },
                 { 'rsui-form-field-tree-select__trigger--disabled': disabled },
             ]"
-            :id="effectiveId"
+            :id="inputId"
             :aria-describedby="ariaDescribedby"
             :aria-invalid="ariaInvalid"
             :aria-required="$attrs.required || undefined"
@@ -222,7 +220,14 @@ function deselectOption(node) {
         </template>
 
         <div class="rsui-form-field-tree-select__search">
+            <!--
+                Its own id. This search box lives inside the tree select's own
+                FormFieldSlot, so without one it would adopt the outer field's id and two
+                controls would answer to it — the trigger and this input. `id-claimed`
+                above makes it mint its own, and naming it explicitly keeps it legible.
+            -->
             <FormFieldSearch
+                :id="`${inputId}-search`"
                 v-model="searchInput"
                 :placeholder="searchPlaceholder"
             ></FormFieldSearch>

package/src/components/Layout/PageHeader.vue

@@ -46,6 +46,26 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /*
+     * The heading level of the title.
+     *
+     * Defaults to 1, which is right for a real page and was the hardcoded behaviour.
+     * It is wrong everywhere else, and there was no way to say so: a PageHeader in a
+     * drawer, a preview or a docs page emitted a second <h1> that no care in the
+     * surrounding markup could correct. Any page that demonstrates the component more than
+     * once emits one <h1> per instance — the Storybook autodocs page for PageHeader
+     * renders 21 stories, so 21 of them on one page.
+     *
+     * Same shape and validator as SectionHeader.headingLevel, deliberately — the two
+     * header components disagreeing about whether their level is the consumer's business
+     * is what #337 started closing and this finishes. `null` renders a <span>, for a
+     * title that is styled as one but is not a heading at all.
+     */
+    headingLevel: {
+        type: [Number, String],
+        default: 1,
+        validator: (value) => value === null || ['1', '2', '3', '4', '5', '6'].includes(String(value)),
+    },
 })
 
 /**
@@ -108,6 +128,28 @@ onBeforeUnmount(() => {
     metaObserver = null
 })
 
+/*
+ * Shared with the tag below but NOT with the validator in defineProps, which is forced to
+ * repeat the list: defineProps() is hoisted outside setup() and cannot close over a local.
+ * A test asserts the two agree.
+ */
+const HEADING_LEVELS = ['1', '2', '3', '4', '5', '6']
+
+/*
+ * Falls back to a span for anything that is not a real heading level, rather than
+ * interpolating whatever it was handed.
+ *
+ * The validator only warns, and Vue strips validators from production builds — so before
+ * this, `heading-level="null"` (the string, an easy slip when the correct form needs a
+ * binding) rendered <hnull>, and `:heading-level="7"` rendered <h7>. Both are invalid
+ * elements, both shipped silently, and both LOOKED correct because the styling hook is a
+ * class rather than the tag. Rendered and verified, not assumed.
+ *
+ * A span is the safe direction: it never corrupts the document outline, where <h7> is
+ * simply broken markup.
+ */
+const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLevel)) ? `h${props.headingLevel}` : 'span')
+
 const pageHeaderClass = computed(() => [
     'rsui-page-header',
     {
@@ -143,9 +185,9 @@ const pageHeaderClass = computed(() => [
                     </div>
 
                     <div class="rsui-page-header__title-text-container">
-                        <h1>
+                        <component :is="titleTag" class="rsui-page-header__heading">
                             <slot name="title"></slot>
-                        </h1>
+                        </component>
                         <div v-if="$slots.status" class="rsui-page-header__status">
                             <slot name="status"></slot>
                         </div>

package/src/components/MetaInfo/MetaInfo.vue

@@ -85,5 +85,17 @@ const emit = defineEmits(['click'])
     <div class="rsui-meta-info__value">
         <slot></slot>
     </div>
+
+    <!--
+        A second, subordinate line UNDER the value — "Repeats weekly on Tuesday" beneath
+        a date, rather than a fourth field beside it.
+
+        A sibling of __value rather than a child of it: __value is a flex ROW (it lines an
+        avatar up beside its text), so a subtitle dropped inside it lands next to the value
+        instead of below. The root is the column, and its gap-y already spaces this.
+    -->
+    <div v-if="$slots.subtitle" class="rsui-meta-info__subtitle">
+        <slot name="subtitle"></slot>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionHeader.vue

@@ -139,7 +139,27 @@ function showsToolbar() {
  * Element used to render the title — a real heading when a level is supplied,
  * otherwise a non-heading <span>, which now requires passing null explicitly.
  */
-const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` : 'span')
+/*
+ * Shared with the tag below but NOT with the validator in defineProps, which is forced to
+ * repeat the list: defineProps() is hoisted outside setup() and cannot close over a local.
+ * A test asserts the two agree.
+ */
+const HEADING_LEVELS = ['1', '2', '3', '4', '5', '6']
+
+/*
+ * Falls back to a span for anything that is not a real heading level, rather than
+ * interpolating whatever it was handed.
+ *
+ * The validator only warns, and Vue strips validators from production builds — so before
+ * this, `heading-level="null"` (the string, an easy slip when the correct form needs a
+ * binding) rendered <hnull>, and `:heading-level="7"` rendered <h7>. Both are invalid
+ * elements, both shipped silently, and both LOOKED correct because the styling hook is a
+ * class rather than the tag. Rendered and verified, not assumed.
+ *
+ * A span is the safe direction: it never corrupts the document outline, where <h7> is
+ * simply broken markup.
+ */
+const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLevel)) ? `h${props.headingLevel}` : 'span')
 </script>
 <template>
 <div ref="sectionHeaderElement"

package/src/components/Table/Table.vue

@@ -5,6 +5,7 @@ import Tr from './Tr.vue'
 import Th from './Th.vue'
 import Td from './Td.vue'
 import ColumnPicker from './ColumnPicker.vue'
+import FormFieldCheckbox from '../FormField/FormFieldCheckbox.vue'
 
 const titleId = _.uniqueId('table-title-')
 
@@ -58,8 +59,96 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    /**
+     * Row selection: a checkbox column, and a select-all in the header.
+     *
+     * Opt-in, so no existing table changes. Use with `v-model:selected`, which holds the
+     * ids of the selected rows.
+     *
+     * Exists because the alternative was consumers hand-rolling it, and the LMS shows what
+     * that costs: bare `<input type="checkbox">` elements with the select-all reconciled
+     * through `document.getElementById`, no indeterminate state, no accessible names, and
+     * the select-all stranded in the `#title` slot because there was no header cell to put
+     * it in — which is why it landed on its own line on a phone (#390).
+     */
+    selectable: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Accessible name for the select-all checkbox.
+     *
+     * A prop rather than a slot because it is an accessible name, not content — there is
+     * nothing to render, and a slot would invite markup into a `<th>` that holds only a
+     * control.
+     */
+    selectAllLabel: {
+        type: String,
+        default: 'Select all rows',
+    },
+})
+
+/*
+ * v-model:selected — the ids of the selected rows.
+ *
+ * The consumer owns the array, which is the whole point: the LMS version kept the truth in
+ * the DOM and wrote `.checked` directly, so two tables on one page collided on the id and
+ * nothing could read the selection back out.
+ */
+const selected = defineModel('selected', {
+    type: Array,
+    default: () => [],
 })
 
+const selectableRowIds = computed(() => props.rows.map((row) => row.id))
+
+const isRowSelected = (row) => selected.value.includes(row.id)
+
+/*
+ * Every row, none, or some. The third is the state a select-all exists to report and the
+ * one the hand-rolled version could not: with a plain boolean, a partial selection renders
+ * identically to an empty one.
+ */
+const allSelected = computed(() =>
+    selectableRowIds.value.length > 0
+    && selectableRowIds.value.every((id) => selected.value.includes(id))
+)
+
+const someSelected = computed(() =>
+    selectableRowIds.value.some((id) => selected.value.includes(id))
+)
+
+function toggleRow(row) {
+    // Rebuilt rather than mutated, so a consumer holding the array in a readonly store or
+    // watching it shallowly still sees the change.
+    selected.value = isRowSelected(row)
+        ? selected.value.filter((id) => id !== row.id)
+        : [...selected.value, row.id]
+}
+
+/*
+ * Select-all acts on THESE rows, not on everything the consumer might have.
+ *
+ * A paginated or filtered table only knows the page it was handed, so "all" can only
+ * honestly mean "all of these". Clearing removes just this page's ids and leaves any
+ * selection made on another page intact.
+ */
+function toggleAll() {
+    selected.value = allSelected.value
+        ? selected.value.filter((id) => !selectableRowIds.value.includes(id))
+        : [...new Set([...selected.value, ...selectableRowIds.value])]
+}
+
+/*
+ * Names the row, not the control. A column of boxes all called "Select row" is a column of
+ * identical announcements with nothing to tell them apart, which is what the LMS shipped.
+ * `row.selectionLabel` wins; `row.ariaLabel` is the fallback because rows already carry it
+ * for the clickable case, so most consumers get a real name for free.
+ */
+function rowSelectionLabel(row) {
+    return row.selectionLabel ?? row.ariaLabel ?? 'Select row'
+}
+
 // v-model:visibleKeys — undefined means "uncontrolled" / use internal default (all visible).
 const visibleKeys = defineModel('visibleKeys', {
     type: Array,
@@ -242,6 +331,29 @@ watch([() => props.rows, visibleColumns], () => nextTick(updateScrollable), { de
                 <caption v-if="!showHeader && $slots.title"><slot name="title"></slot></caption>
                 <thead v-if="visibleColumns.length">
                     <Tr>
+                        <!--
+                            A real header cell for the select-all, which is the point.
+                            It used to have nowhere to go but the #title slot, and
+                            CardHeader stacks title and actions on separate rows when
+                            narrow — so on a phone it was stranded on a line of its own
+                            above the search (#390).
+
+                            scope="col" like any other header cell; the checkbox carries
+                            the accessible name, so the cell needs no text of its own.
+                        -->
+                        <Th v-if="selectable"
+                            scope="col"
+                            :fixed="fixedColumns"
+                            class="rsui-table__select-cell"
+                        >
+                            <FormFieldCheckbox sm
+                                :model-value="allSelected"
+                                :indeterminate="someSelected && !allSelected"
+                                :aria-label="selectAllLabel"
+                                @update:model-value="toggleAll"
+                            ></FormFieldCheckbox>
+                        </Th>
+
                         <Th v-for="column in visibleColumns"
                             :key="column.key"
                             scope="col"
@@ -268,6 +380,24 @@ watch([() => props.rows, visibleColumns], () => nextTick(updateScrollable), { de
                         :aria-label="row.ariaLabel"
                         @click="$emit('click:row', row)"
                     >
+                        <!--
+                            @click.stop so ticking a box on a clickable row does not also
+                            open the row. Selecting and navigating are different intents,
+                            and the whole reason to select is to act on rows without
+                            visiting them.
+                        -->
+                        <Td v-if="selectable"
+                            :fixed="fixedColumns"
+                            class="rsui-table__select-cell"
+                            @click.stop
+                        >
+                            <FormFieldCheckbox sm
+                                :model-value="isRowSelected(row)"
+                                :aria-label="rowSelectionLabel(row)"
+                                @update:model-value="toggleRow(row)"
+                            ></FormFieldCheckbox>
+                        </Td>
+
                         <Td v-for="column in visibleColumns"
                             :key="column.key"
                             :alignment="column?.alignment"

package/src/composables/useFormFieldA11y.js

@@ -1,28 +1,85 @@
-import { inject, ref } from 'vue'
+import { computed, inject, useAttrs, useSlots } from 'vue'
 
-// Injection key used by FormFieldSlot to provide a11y values
+// Injection key used by FormFieldSlot to hand these values to anything nested deeper.
 export const FormFieldA11yKey = Symbol('FormFieldA11y')
 
 /**
- * Consumer side of a provide/inject pattern for WCAG a11y attributes.
+ * The three WCAG wiring values every field control needs:
  *
- * FormFieldSlot (the wrapper) provides three reactive values under FormFieldA11yKey:
- *   - inputId:          a unique ID (from _.uniqueId()) 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
+ *   - inputId          the id on the control, and the target of the label's `for`
+ *   - ariaDescribedby  points at the help and error text, when either is present
+ *   - ariaInvalid      true while an error slot is rendered
  *
- * Child input components (FormFieldText, Checkbox, Select, Toggle, etc.) call this
- * composable to inject those values and bind them to their <input> elements.
+ * THE ID IS GENERATED HERE, by the field component, and handed DOWN to FormFieldSlot.
+ * That direction is the whole point, and it used to run the other way (#342).
  *
- * 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.
+ * FormFieldSlot generates an id too, and provides it under FormFieldA11yKey — but
+ * FormFieldSlot is the field's CHILD: it is the root element of FormFieldText's template,
+ * not its wrapper. provide/inject only ever flows parent to child, so a field injecting
+ * what its own child provides gets nothing and silently fell back to ref(null). Measured
+ * before the fix, with no consumer id passed:
+ *
+ *     label[for]  form-field-1
+ *     input id    undefined
+ *
+ * The label pointed at an element that did not exist, and aria-describedby never rendered,
+ * so help and error text did not reach the control either. WCAG 3.3.2 and 1.3.1, on every
+ * field in the library that did not pass an id by hand.
+ *
+ * Five components had already worked around it by recomputing a local `effectiveId`, and
+ * in four of those the workaround was itself broken: the control took the local id while
+ * the label took FormFieldSlot's separate one, so the two still disagreed. Those are gone;
+ * this is the single place an id is minted.
+ *
+ * A consumer-supplied `id` still wins, so nothing changes for a call site that passes one.
+ *
+ * The inject is kept for the genuinely nested case — a control rendered *inside* a
+ * FormFieldSlot's slots rather than being its parent. When there is a provider above, its
+ * values win, which keeps a nested control on the same id as the label above it.
  */
 export function useFormFieldA11y() {
-    const a11y = inject(FormFieldA11yKey, null)
+    const provided = inject(FormFieldA11yKey, null)
+
+    /*
+     * Adopt an injected id only when no control owns it yet.
+     *
+     * A provider above means one of two things, and they look identical from here:
+     *
+     *   a consumer's bare FormFieldSlot wrapping this control — one field, and this IS its
+     *   control, so it should take the outer id or the label points at nothing;
+     *
+     *   another FIELD's FormFieldSlot, because this control sits in its #prefix, #suffix or
+     *   default slot — two controls, and taking the outer id puts the same id on both.
+     *
+     * The second was a real regression: `<FormFieldText><template #prefix><FormFieldText/>`
+     * rendered two inputs sharing one id, so `label[for]` resolved to whichever the browser
+     * picked. WCAG 4.1.1, and silent — the markup reads correctly and nothing warns.
+     *
+     * `idClaimed` is the discriminator. A field sets it when it puts the id on its own
+     * control; a bare FormFieldSlot leaves it false because it owns no control.
+     */
+    if (provided && !provided.idClaimed?.value) return provided
+
+    const attrs = useAttrs()
+    const slots = useSlots()
+
+    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 ariaInvalid = computed(() => slots.error ? true : undefined)
 
     return {
-        inputId: a11y?.inputId ?? ref(null),
-        ariaDescribedby: a11y?.ariaDescribedby ?? ref(null),
-        ariaInvalid: a11y?.ariaInvalid ?? ref(null),
+        inputId,
+        ariaDescribedby,
+        ariaInvalid,
     }
 }