From 42ab8b428918fe361fea5d90a18ff75b2701170d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 2 Oct 2026 15:56:17 +0100
Subject: [PATCH 1/2] Associate ui/Field labels with nested controls

Field now generates an id for its label and lets the first nested control
claim it, so screens like login get a proper for/id association without
call-site changes. Explicit Field ids (Publish) are not injected, avoiding
duplicate ids inside fieldtypes.
---
 .../js/components/ui/Combobox/Combobox.vue    |  11 +-
 resources/js/components/ui/Field.vue          |  20 ++-
 resources/js/components/ui/Input/Input.vue    |   9 +-
 resources/js/components/ui/Label.vue          |   3 +
 resources/js/components/ui/Slider/Slider.vue  |  11 +-
 resources/js/components/ui/Switch.vue         |   9 +-
 resources/js/components/ui/Textarea.vue       |   7 +-
 resources/js/composables/ui-field-id.js       |  49 ++++++
 resources/js/tests/components/Field.test.js   | 150 ++++++++++++++++++
 9 files changed, 250 insertions(+), 19 deletions(-)
 create mode 100644 resources/js/composables/ui-field-id.js

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 6832897ef5b..c84067a6b12 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -12,7 +12,7 @@ import {
     ComboboxVirtualizer,
     FocusScope
 } from 'reka-ui';
-import { computed, nextTick, ref, useAttrs, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, ref, toRef, useAttrs, useTemplateRef, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';
 import Button from '../Button/Button.vue';
 import Icon from '../Icon/Icon.vue';
@@ -20,6 +20,7 @@ import Badge from '../Badge.vue';
 import fuzzysort from 'fuzzysort';
 import DOMPurify from 'dompurify';
 import { SortableList } from '@/components/sortable/Sortable.js';
+import { useUiFieldId } from '@/composables/ui-field-id.js';
 
 const emit = defineEmits(['update:modelValue', 'search', 'selected', 'added']);
 
@@ -37,8 +38,8 @@ const props = defineProps({
 	discreteFocusOutline: { type: Boolean, default: false },
 	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
 	icon: { type: String, default: null },
-	/** ID attribute for the input element */
-	id: { type: String },
+	/** ID attribute for the input element. Inherits from parent `Field` when omitted. */
+	id: { type: String, default: null },
 	/** When `true`, the Combobox will avoid filtering options, allowing you to handle filtering yourself by listening to the `search` event and updating the `options` prop. */
 	ignoreFilter: { type: Boolean, default: false },
 	/** When `true`, the option labels will be rendered with `v-html` instead of `v-text`. */
@@ -79,6 +80,8 @@ defineOptions({
     inheritAttrs: false,
 });
 
+const { id, labelId } = useUiFieldId(toRef(props, 'id'));
+
 const attrs = useAttrs();
 
 const wrapperClasses = computed(() => twMerge('w-full min-w-0', attrs.class));
@@ -397,6 +400,8 @@ defineExpose({
                         as="div"
                         ref="trigger"
                         v-bind="triggerAttrs"
+                        :id="shouldShowInput ? undefined : id"
+                        :aria-labelledby="shouldShowInput ? undefined : labelId"
                         :class="triggerClasses"
                         data-ui-combobox-trigger
                         @keydown.enter="openDropdown"
diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index 6cf910f224e..452f7f6f756 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -1,11 +1,12 @@
 <script setup>
 import { cva } from 'cva';
-import { computed } from 'vue';
+import { computed, provide, useId } from 'vue';
 import Description from './Description.vue';
 import Label from './Label.vue';
 import ErrorMessage from './ErrorMessage.vue';
 import markdown from '@/util/markdown.js';
 import { twMerge } from 'tailwind-merge';
+import { UI_FIELD_ID_KEY } from '@/composables/ui-field-id.js';
 
 defineOptions({
     inheritAttrs: false,
@@ -25,7 +26,8 @@ const props = defineProps({
     errors: { type: Object },
     /** When `true`, forces the field to use full width even when `asConfig` is enabled. */
     fullWidthSetting: { type: Boolean, default: false },
-    id: { type: String },
+    /** ID shared by the label and control. Defaults to a generated id. */
+    id: { type: String, default: null },
     /** Instructions text to display above or below the label. Supports Markdown. */
     instructions: { type: String, default: '' },
     /** When `true`, displays instructions below the control instead of below the label. */
@@ -36,9 +38,19 @@ const props = defineProps({
     required: { type: Boolean, default: false },
 });
 
+const generatedId = useId();
+const hasExplicitId = computed(() => props.id != null && props.id !== '');
+const fieldId = computed(() => (hasExplicitId.value ? props.id : generatedId));
+const labelId = computed(() => `${fieldId.value}-label`);
+
+// Only auto-generated ids are injectable. Explicit ids (e.g. Publish/Field) stay on
+// the fieldtype via its own `id` prop so nested controls don't inherit them.
+provide(UI_FIELD_ID_KEY, hasExplicitId.value ? null : { id: fieldId, labelId, claimed: false });
+
 const labelProps = computed(() => ({
     badge: props.badge,
-    for: props.id,
+    for: fieldId.value,
+    id: labelId.value,
     required: props.required,
     text: props.label,
 }));
@@ -103,7 +115,7 @@ const hasErrors = computed(() => {
             </slot>
             <Description :text="instructions" v-if="instructions && !instructionsBelow" />
         </div>
-        <slot />
+        <slot :id="fieldId" />
         <div v-if="(instructions && instructionsBelow) || hasErrors" class="flex flex-col gap-2">
             <Description :text="instructions" v-if="instructions && instructionsBelow" />
             <ErrorMessage v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" />
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index 682a828a65d..08cbfe4d7b3 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { computed, useSlots, useAttrs, ref, useId, useTemplateRef, onMounted, nextTick } from 'vue';
+import { computed, useSlots, useAttrs, ref, toRef, useTemplateRef, onMounted, nextTick } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from '../Icon/Icon.vue';
 import Button from '../Button/Button.vue';
 import CharacterCounter from '../CharacterCounter.vue';
 import useCopy from '@/composables/copy';
+import { useUiFieldId } from '@/composables/ui-field-id.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -29,8 +30,8 @@ const props = defineProps({
     iconAppend: { type: String, default: null },
     /** Icon name. Will display before the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     iconPrepend: { type: String, default: null },
-    /** ID attribute for the input element */
-    id: { type: String, default: () => useId() },
+    /** ID attribute for the input element. Inherits from parent `Field` when omitted. */
+    id: { type: String, default: null },
     /** Specify a character limit */
     limit: { type: Number, default: null },
     /** When `true`, an animated loading indicator will show next to the input */
@@ -57,6 +58,8 @@ const props = defineProps({
     inputClass: { type: String, default: '' },
 });
 
+const { id } = useUiFieldId(toRef(props, 'id'));
+
 const inputAttributeKeys = [
     'accept', 'autocomplete', 'autofocus', 'capture', 'checked', 'dirname', 'form',
     'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget',
diff --git a/resources/js/components/ui/Label.vue b/resources/js/components/ui/Label.vue
index 69c8bbedd15..cfaf95741a3 100644
--- a/resources/js/components/ui/Label.vue
+++ b/resources/js/components/ui/Label.vue
@@ -8,6 +8,8 @@ const hasDefaultSlot = !!slots.default;
 const props = defineProps({
     /** The ID of the form element this label is for */
     for: { type: String, default: null },
+    /** Optional id attribute for the label element itself */
+    id: { type: String, default: null },
     /** Optional badge text to display on the right side of the label */
     badge: { type: String, default: '' },
     required: { type: Boolean, default: false },
@@ -20,6 +22,7 @@ const props = defineProps({
     <label
         class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
         data-ui-label
+        :id="id"
         :for="for"
     >
         <div>
diff --git a/resources/js/components/ui/Slider/Slider.vue b/resources/js/components/ui/Slider/Slider.vue
index e86336c36f7..0030688a75d 100644
--- a/resources/js/components/ui/Slider/Slider.vue
+++ b/resources/js/components/ui/Slider/Slider.vue
@@ -1,13 +1,14 @@
 <script setup>
-import { useId } from 'vue';
+import { toRef } from 'vue';
 import { cva } from 'cva';
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui';
+import { useUiFieldId } from '@/composables/ui-field-id.js';
 
 const props = defineProps({
     /** Description text for the slider. */
     description: { type: String, default: null },
-    /** ID attribute for the slider. */
-    id: { type: String, default: () => useId() },
+    /** ID attribute for the slider. Inherits from parent `Field` when omitted. */
+    id: { type: String, default: null },
     /** Label text for the slider. */
     label: { type: String, default: null },
     /** The controlled value of the slider. */
@@ -26,6 +27,8 @@ const props = defineProps({
 
 defineEmits(['update:modelValue']);
 
+const { id } = useUiFieldId(toRef(props, 'id'));
+
 const rootClasses = cva({
     base: 'relative flex w-full touch-none items-center select-none',
     variants: {
@@ -73,7 +76,6 @@ const thumbClasses = cva({
     <SliderRoot
         data-ui-control
         :class="rootClasses"
-        :id
         :max="max"
         :min="min"
         :step="step"
@@ -84,6 +86,7 @@ const thumbClasses = cva({
             <SliderRange :class="rangeClasses" />
         </SliderTrack>
         <SliderThumb
+            :id
             :class="thumbClasses"
             :aria-label="label"
         />
diff --git a/resources/js/components/ui/Switch.vue b/resources/js/components/ui/Switch.vue
index 3d03590e8b7..bae280d99f4 100644
--- a/resources/js/components/ui/Switch.vue
+++ b/resources/js/components/ui/Switch.vue
@@ -1,12 +1,13 @@
 <script setup>
-import { useId } from 'vue';
+import { toRef } from 'vue';
 import { SwitchRoot, SwitchThumb } from 'reka-ui';
 import { cva } from 'cva';
+import { useUiFieldId } from '@/composables/ui-field-id.js';
 
 const props = defineProps({
     required: { type: Boolean, default: false },
-    /** The id attribute for the toggle */
-    id: { type: String, default: () => useId() },
+    /** The id attribute for the toggle. Inherits from parent `Field` when omitted. */
+    id: { type: String, default: null },
     /** The controlled value of the switch */
     modelValue: { type: Boolean, default: false },
     /** Controls the size of the switch. <br><br> Options: `xs`, `sm`, `base`, `lg` */
@@ -17,6 +18,8 @@ const props = defineProps({
 
 defineEmits(['update:modelValue']);
 
+const { id } = useUiFieldId(toRef(props, 'id'));
+
 const switchRootClasses = cva({
     base: [
         'relative flex rounded-full shrink-0 border-2 with-contrast:border-1 with-contrast:border-gray-500!',
diff --git a/resources/js/components/ui/Textarea.vue b/resources/js/components/ui/Textarea.vue
index f0d567ae2a1..b58a27460b9 100644
--- a/resources/js/components/ui/Textarea.vue
+++ b/resources/js/components/ui/Textarea.vue
@@ -3,8 +3,9 @@ import { cva } from 'cva';
 import CharacterCounter from './CharacterCounter.vue';
 import Button from './Button/Button.vue';
 import autosize from 'autosize/dist/autosize.js';
-import { computed, nextTick, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, toRef, useTemplateRef } from 'vue';
 import useCopy from '@/composables/copy';
+import { useUiFieldId } from '@/composables/ui-field-id.js';
 
 defineEmits(['update:modelValue']);
 
@@ -14,7 +15,7 @@ const props = defineProps({
     /** When `true`, shows a copy button to copy the value to clipboard */
     copyable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    /** ID attribute for the textarea element */
+    /** ID attribute for the textarea element. Inherits from parent `Field` when omitted. */
     id: { type: String, default: null },
     readOnly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
@@ -28,6 +29,8 @@ const props = defineProps({
     limit: { type: Number, default: null },
 });
 
+const { id } = useUiFieldId(toRef(props, 'id'));
+
 const { copySupported, copied, copy } = useCopy();
 const canCopy = computed(() => props.copyable && copySupported.value);
 
diff --git a/resources/js/composables/ui-field-id.js b/resources/js/composables/ui-field-id.js
new file mode 100644
index 00000000000..597c8e65b60
--- /dev/null
+++ b/resources/js/composables/ui-field-id.js
@@ -0,0 +1,49 @@
+import { computed, inject, unref, useId } from 'vue';
+
+export const UI_FIELD_ID_KEY = 'uiFieldId';
+
+/**
+ * Resolve a control's id: explicit prop, then a claimed parent ui/Field id, then a generated id.
+ *
+ * Field only exposes an id for injection when it auto-generated one (no explicit `id` prop).
+ * The first control to call this claims that id so sibling controls don't share it.
+ *
+ * Returns `{ id, labelId }`. `labelId` is set when this control claimed the Field association
+ * (for non-labelable controls that need `aria-labelledby`).
+ */
+export function useUiFieldId(id) {
+    const context = inject(UI_FIELD_ID_KEY, null);
+    const fallback = useId();
+
+    const explicit = unref(id);
+    const hasExplicit = explicit != null && explicit !== '';
+
+    let claimedId = null;
+    let claimedLabelId = null;
+
+    if (!hasExplicit && context?.id != null && !context.claimed) {
+        context.claimed = true;
+        claimedId = context.id;
+        claimedLabelId = context.labelId ?? null;
+    }
+
+    const resolvedId = computed(() => {
+        const current = unref(id);
+        if (current != null && current !== '') return current;
+
+        if (claimedId != null) {
+            const fromField = unref(claimedId);
+            if (fromField != null && fromField !== '') return fromField;
+        }
+
+        return fallback;
+    });
+
+    const labelId = computed(() => {
+        if (claimedLabelId == null) return null;
+        const value = unref(claimedLabelId);
+        return value != null && value !== '' ? value : null;
+    });
+
+    return { id: resolvedId, labelId };
+}
diff --git a/resources/js/tests/components/Field.test.js b/resources/js/tests/components/Field.test.js
index d7fd49d0e85..b540181015b 100644
--- a/resources/js/tests/components/Field.test.js
+++ b/resources/js/tests/components/Field.test.js
@@ -1,6 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { expect, test } from 'vitest';
+import { h } from 'vue';
 import Field from '@/components/ui/Field.vue';
+import Input from '@/components/ui/Input/Input.vue';
+import Switch from '@/components/ui/Switch.vue';
+import Combobox from '@/components/ui/Combobox/Combobox.vue';
+
+window.__ = (key) => key;
 
 test('it does not set a dir attribute by default', () => {
     const wrapper = mount(Field, {
@@ -22,3 +28,147 @@ test('it sets the dir attribute on the root element when provided', () => {
 
     expect(wrapper.attributes('dir')).toBe('rtl');
 });
+
+test('it associates the label with a nested input when id is omitted', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Email' },
+        slots: {
+            default: () => h(Input, { name: 'email' }),
+        },
+        attachTo: document.body,
+    });
+
+    const label = wrapper.find('[data-ui-label]');
+    const input = wrapper.find('[data-ui-control]');
+
+    expect(label.attributes('for')).toBeTruthy();
+    expect(input.attributes('id')).toBe(label.attributes('for'));
+
+    wrapper.unmount();
+});
+
+test('an explicit field id is used for the label for attribute', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Email', id: 'login-email' },
+        slots: {
+            default: () => h(Input, { name: 'email' }),
+        },
+        attachTo: document.body,
+    });
+
+    const label = wrapper.find('[data-ui-label]');
+
+    expect(label.attributes('for')).toBe('login-email');
+    expect(label.attributes('id')).toBe('login-email-label');
+
+    wrapper.unmount();
+});
+
+test('it associates the label with a nested switch when id is omitted', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Required' },
+        slots: {
+            default: () => h(Switch),
+        },
+        attachTo: document.body,
+    });
+
+    const label = wrapper.find('[data-ui-label]');
+    const control = wrapper.find('[data-ui-control]');
+
+    expect(label.attributes('for')).toBeTruthy();
+    expect(control.attributes('id')).toBe(label.attributes('for'));
+
+    wrapper.unmount();
+});
+
+test('it lets only the first nested control claim an auto-generated field id', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Pair' },
+        slots: {
+            default: () => [h(Input, { name: 'a' }), h(Input, { name: 'b' })],
+        },
+        attachTo: document.body,
+    });
+
+    const label = wrapper.find('[data-ui-label]');
+    const inputs = wrapper.findAll('[data-ui-control]');
+
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0].attributes('id')).toBe(label.attributes('for'));
+    expect(inputs[1].attributes('id')).toBeTruthy();
+    expect(inputs[1].attributes('id')).not.toBe(label.attributes('for'));
+
+    wrapper.unmount();
+});
+
+test('an explicit control id wins over an auto-generated field id', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Email' },
+        slots: {
+            default: () => h(Input, { name: 'email', id: 'custom-input' }),
+        },
+        attachTo: document.body,
+    });
+
+    const input = wrapper.find('[data-ui-control]');
+
+    expect(input.attributes('id')).toBe('custom-input');
+
+    wrapper.unmount();
+});
+
+test('an explicit field id is not injected into nested controls', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Title', id: 'field_title' },
+        slots: {
+            default: () => [h(Input, { name: 'a' }), h(Input, { name: 'b' })],
+        },
+        attachTo: document.body,
+    });
+
+    const label = wrapper.find('[data-ui-label]');
+    const inputs = wrapper.findAll('[data-ui-control]');
+
+    expect(label.attributes('for')).toBe('field_title');
+    expect(inputs[0].attributes('id')).not.toBe('field_title');
+    expect(inputs[1].attributes('id')).not.toBe('field_title');
+    expect(inputs[0].attributes('id')).not.toBe(inputs[1].attributes('id'));
+
+    wrapper.unmount();
+});
+
+test('a standalone input still gets a unique generated id', () => {
+    const wrapper = mount(Input, {
+        props: { name: 'email' },
+        attachTo: document.body,
+    });
+
+    expect(wrapper.find('[data-ui-control]').attributes('id')).toBeTruthy();
+
+    wrapper.unmount();
+});
+
+test('it associates the label with a nested combobox trigger via aria-labelledby when id is omitted', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Format' },
+        slots: {
+            default: () => h(Combobox, {
+                options: [{ label: 'One', value: 'one' }],
+                modelValue: null,
+                searchable: false,
+                placeholder: 'Select...',
+            }),
+        },
+        attachTo: document.body,
+    });
+
+    const label = wrapper.find('[data-ui-label]');
+    const trigger = wrapper.find('[data-ui-combobox-trigger]');
+
+    expect(label.attributes('id')).toBeTruthy();
+    expect(trigger.attributes('id')).toBe(label.attributes('for'));
+    expect(trigger.attributes('aria-labelledby')).toBe(label.attributes('id'));
+
+    wrapper.unmount();
+});

From e537a4a0cbf528ee9f3e306f17854de50c020e7f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 2 Oct 2026 16:39:37 +0100
Subject: [PATCH 2/2] Associate validation errors with the failing field

Wire ErrorMessage and Description ids into aria-describedby, set
aria-invalid on the field's control, and focus the first invalid
control after a failed submit so screen readers can find the error.
---
 resources/js/components/Reveal.js             |  35 +++++
 .../js/components/ui/Combobox/Combobox.vue    |   6 +-
 resources/js/components/ui/Description.vue    |   8 +-
 resources/js/components/ui/ErrorMessage.vue   |   8 +-
 resources/js/components/ui/Field.vue          |  81 ++++++++---
 resources/js/components/ui/Input/Input.vue    |  21 ++-
 resources/js/components/ui/Slider/Slider.vue  |   6 +-
 resources/js/components/ui/Switch.vue         |   4 +-
 resources/js/components/ui/Textarea.vue       |  22 ++-
 resources/js/composables/ui-field-id.js       |  50 ++++++-
 resources/js/pages/auth/Login.vue             |   8 +-
 resources/js/tests/components/Field.test.js   | 134 ++++++++++++++++++
 resources/js/tests/components/Reveal.test.js  |  79 +++++++++++
 13 files changed, 418 insertions(+), 44 deletions(-)
 create mode 100644 resources/js/tests/components/Reveal.test.js

diff --git a/resources/js/components/Reveal.js b/resources/js/components/Reveal.js
index 83a903246bf..7914e539139 100644
--- a/resources/js/components/Reveal.js
+++ b/resources/js/components/Reveal.js
@@ -2,6 +2,16 @@ import { nextTick, onMounted, onBeforeUnmount } from 'vue';
 
 const registry = new WeakMap();
 
+const FOCUSABLE_CONTROL_SELECTORS = [
+    'input:not([disabled]):not([type="hidden"]):not([aria-disabled="true"])',
+    'textarea:not([disabled]):not([aria-disabled="true"])',
+    'select:not([disabled]):not([aria-disabled="true"])',
+    '[role="switch"]:not([disabled]):not([aria-disabled="true"]):not([data-disabled])',
+    '[role="combobox"]:not([disabled]):not([aria-disabled="true"]):not([data-disabled])',
+    '[role="slider"]:not([disabled]):not([aria-disabled="true"])',
+    'button[data-ui-control]:not([disabled])',
+];
+
 class Reveal {
     use(ref, callback) {
         onMounted(() => this.mount(ref.value, callback));
@@ -29,11 +39,36 @@ class Reveal {
         });
     }
 
+    focusableControl(root) {
+        if (!root) return null;
+
+        for (const selector of FOCUSABLE_CONTROL_SELECTORS) {
+            const control = root.querySelector(selector);
+            if (!control) continue;
+            if (control.tabIndex < 0 && control.getAttribute('role') === 'combobox') continue;
+            return control;
+        }
+
+        return null;
+    }
+
     invalid() {
         nextTick(() => {
             const el = document.querySelector('[data-ui-field-has-errors]:not(:has([data-ui-field-has-errors]))');
             if (!el) return;
+
+            const fieldId = el.id || el.querySelector('[data-ui-label]')?.htmlFor || null;
             this.element(el);
+
+            nextTick(() => {
+                const current =
+                    document.querySelector('[data-ui-field-has-errors]:not(:has([data-ui-field-has-errors]))') || el;
+                const control =
+                    this.focusableControl(current) ||
+                    (fieldId ? document.getElementById(fieldId) : null);
+
+                control?.focus?.({ preventScroll: true });
+            });
         });
     }
 }
diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index c84067a6b12..0c2f88e099c 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -80,7 +80,7 @@ defineOptions({
     inheritAttrs: false,
 });
 
-const { id, labelId } = useUiFieldId(toRef(props, 'id'));
+const { id, labelId, describedBy, invalid } = useUiFieldId(toRef(props, 'id'));
 
 const attrs = useAttrs();
 
@@ -402,6 +402,8 @@ defineExpose({
                         v-bind="triggerAttrs"
                         :id="shouldShowInput ? undefined : id"
                         :aria-labelledby="shouldShowInput ? undefined : labelId"
+                        :aria-describedby="shouldShowInput ? undefined : describedBy"
+                        :aria-invalid="!shouldShowInput && invalid ? 'true' : undefined"
                         :class="triggerClasses"
                         data-ui-combobox-trigger
                         @keydown.enter="openDropdown"
@@ -412,6 +414,8 @@ defineExpose({
                                 v-if="shouldShowInput"
                                 :id
                                 :placeholder
+                                :aria-describedby="describedBy"
+                                :aria-invalid="invalid ? 'true' : undefined"
                                 ref="search"
                                 class="w-full bg-transparent text-gray-900 dark:text-gray-300 opacity-100 focus:outline-none placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:hidden cursor-pointer"
                                 :class="{
diff --git a/resources/js/components/ui/Description.vue b/resources/js/components/ui/Description.vue
index b7b9c67b00a..aef9a222773 100644
--- a/resources/js/components/ui/Description.vue
+++ b/resources/js/components/ui/Description.vue
@@ -5,13 +5,19 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
+    /** Optional id so the description can be referenced by aria-describedby */
+    id: { type: String, default: null },
     /** The description text to display */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 </script>
 
 <template>
-    <div class="text-sm font-normal text-gray-600/90 dark:text-gray-400 st-text-trim-start [&_a]:underline [&_a:hover]:text-gray-700 dark:[&_a:hover]:text-gray-300 [&_code]:px-0.5 [&_code]:rounded-sm" data-ui-description>
+    <div
+        :id="id"
+        class="text-sm font-normal text-gray-600/90 dark:text-gray-400 st-text-trim-start [&_a]:underline [&_a:hover]:text-gray-700 dark:[&_a:hover]:text-gray-300 [&_code]:px-0.5 [&_code]:rounded-sm"
+        data-ui-description
+    >
         <slot v-if="hasDefaultSlot" />
         <span v-else v-html="text" />
     </div>
diff --git a/resources/js/components/ui/ErrorMessage.vue b/resources/js/components/ui/ErrorMessage.vue
index 292735ad65c..c3a7035d04e 100644
--- a/resources/js/components/ui/ErrorMessage.vue
+++ b/resources/js/components/ui/ErrorMessage.vue
@@ -5,13 +5,19 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
+    /** Optional id so the error can be referenced by aria-describedby */
+    id: { type: String, default: null },
     /** The error message to display */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 </script>
 
 <template>
-    <div class="text-sm font-normal text-red-600 st-text-trim-start text-pretty @5xl/panel:text-balance [[data-ui-panel-header]_&]:text-red-600 [&_a]:underline [&_a:hover]:text-red-700 dark:[&_a:hover]:text-red-300" data-ui-error-message>
+    <div
+        :id="id"
+        class="text-sm font-normal text-red-600 st-text-trim-start text-pretty @5xl/panel:text-balance [[data-ui-panel-header]_&]:text-red-600 [&_a]:underline [&_a:hover]:text-red-700 dark:[&_a:hover]:text-red-300"
+        data-ui-error-message
+    >
         <slot v-if="hasDefaultSlot" />
         <span v-else v-html="text" />
     </div>
diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index 452f7f6f756..ec0ecec41eb 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -42,10 +42,51 @@ const generatedId = useId();
 const hasExplicitId = computed(() => props.id != null && props.id !== '');
 const fieldId = computed(() => (hasExplicitId.value ? props.id : generatedId));
 const labelId = computed(() => `${fieldId.value}-label`);
+const descriptionId = computed(() => `${fieldId.value}-description`);
 
-// Only auto-generated ids are injectable. Explicit ids (e.g. Publish/Field) stay on
-// the fieldtype via its own `id` prop so nested controls don't inherit them.
-provide(UI_FIELD_ID_KEY, hasExplicitId.value ? null : { id: fieldId, labelId, claimed: false });
+const instructions = computed(() => props.instructions ? markdown(__(props.instructions), { openLinksInNewTabs: true }) : null);
+
+const errorList = computed(() => {
+    if (props.error) {
+        return [props.error];
+    }
+
+    if (!props.errors) {
+        return [];
+    }
+
+    return Array.isArray(props.errors) ? props.errors : Object.values(props.errors);
+});
+
+const hasErrors = computed(() => errorList.value.length > 0);
+
+// Keep the first error id stable as `${fieldId}-error` for the common single-error case.
+const errorIds = computed(() =>
+    errorList.value.map((_, i) => (i === 0 ? `${fieldId.value}-error` : `${fieldId.value}-error-${i}`)),
+);
+
+const describedBy = computed(() => {
+    const ids = [];
+
+    if (instructions.value) {
+        ids.push(descriptionId.value);
+    }
+
+    ids.push(...errorIds.value);
+
+    return ids.length ? ids.join(' ') : null;
+});
+
+// Auto-generated ids may be claimed by the first nested control. Explicit ids (Publish)
+// stay on the fieldtype via its own `id` prop. describedBy/invalid are always available.
+provide(UI_FIELD_ID_KEY, {
+    id: fieldId,
+    labelId,
+    claimable: !hasExplicitId.value,
+    describedBy,
+    invalid: hasErrors,
+    claimed: false,
+});
 
 const labelProps = computed(() => ({
     badge: props.badge,
@@ -76,21 +117,6 @@ const rootClasses = computed(() =>
         ...props,
     })),
 );
-
-const instructions = computed(() => props.instructions ? markdown(__(props.instructions), { openLinksInNewTabs: true }) : null);
-
-const errors = computed(() => {
-    if (props.error) {
-        return [props.error];
-    }
-
-    return props.errors;
-});
-
-const hasErrors = computed(() => {
-    if (!errors.value) return false;
-    return Array.isArray(errors.value) ? errors.value.length > 0 : Object.keys(errors.value).length > 0;
-});
 </script>
 
 <template>
@@ -113,12 +139,25 @@ const hasErrors = computed(() => {
             <slot v-else name="label">
                 <Label v-if="label" v-bind="labelProps" />
             </slot>
-            <Description :text="instructions" v-if="instructions && !instructionsBelow" />
+            <Description
+                v-if="instructions && !instructionsBelow"
+                :id="descriptionId"
+                :text="instructions"
+            />
         </div>
         <slot :id="fieldId" />
         <div v-if="(instructions && instructionsBelow) || hasErrors" class="flex flex-col gap-2">
-            <Description :text="instructions" v-if="instructions && instructionsBelow" />
-            <ErrorMessage v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" />
+            <Description
+                v-if="instructions && instructionsBelow"
+                :id="descriptionId"
+                :text="instructions"
+            />
+            <ErrorMessage
+                v-for="(error, i) in errorList"
+                :id="errorIds[i]"
+                :key="i"
+                :text="error"
+            />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index 08cbfe4d7b3..f984751ce51 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.vue';
 import Button from '../Button/Button.vue';
 import CharacterCounter from '../CharacterCounter.vue';
 import useCopy from '@/composables/copy';
-import { useUiFieldId } from '@/composables/ui-field-id.js';
+import { mergeAriaDescribedBy, useUiFieldId } from '@/composables/ui-field-id.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -58,7 +58,7 @@ const props = defineProps({
     inputClass: { type: String, default: '' },
 });
 
-const { id } = useUiFieldId(toRef(props, 'id'));
+const { id, describedBy, invalid } = useUiFieldId(toRef(props, 'id'));
 
 const inputAttributeKeys = [
     'accept', 'autocomplete', 'autofocus', 'capture', 'checked', 'dirname', 'form',
@@ -70,7 +70,9 @@ const inputAttributeKeys = [
 const outerAttrs = computed(() => {
     const result = {};
     for (const key in attrs) {
-        if (!inputAttributeKeys.includes(key.toLowerCase())) result[key] = attrs[key];
+        if (!inputAttributeKeys.includes(key.toLowerCase()) && key !== 'aria-describedby' && key !== 'aria-invalid') {
+            result[key] = attrs[key];
+        }
     }
     return result;
 });
@@ -93,6 +95,15 @@ const inputAttrs = computed(() => {
     return { ...result, ...normalizedInputAttrs.value };
 });
 
+const controlAttrs = computed(() => {
+    const { 'aria-describedby': _describedBy, 'aria-invalid': _invalid, ...rest } = inputAttrs.value;
+    return rest;
+});
+
+const resolvedDescribedBy = computed(() =>
+    mergeAriaDescribedBy(describedBy.value, inputAttrs.value['aria-describedby'], attrs['aria-describedby']),
+);
+
 const hasPrependedIcon = computed(() => !!props.iconPrepend || !!props.icon || !!slots.prepend);
 const hasAppendedIcon = computed(() => !!props.iconAppend || !!slots.append || clearable.value || props.viewable || canCopy.value || props.loading);
 
@@ -230,7 +241,9 @@ defineExpose({ focus, select });
                 :readonly="readOnly"
                 data-ui-control
                 data-ui-group-target
-                v-bind="inputAttrs"
+                v-bind="controlAttrs"
+                :aria-describedby="resolvedDescribedBy"
+                :aria-invalid="invalid ? 'true' : undefined"
                 @input="$emit('update:modelValue', $event.target.value)"
             />
             <div v-if="hasAppendedIcon" :class="appendedIconClasses">
diff --git a/resources/js/components/ui/Slider/Slider.vue b/resources/js/components/ui/Slider/Slider.vue
index 0030688a75d..fd6ed61fbb7 100644
--- a/resources/js/components/ui/Slider/Slider.vue
+++ b/resources/js/components/ui/Slider/Slider.vue
@@ -27,7 +27,7 @@ const props = defineProps({
 
 defineEmits(['update:modelValue']);
 
-const { id } = useUiFieldId(toRef(props, 'id'));
+const { id, describedBy, invalid } = useUiFieldId(toRef(props, 'id'));
 
 const rootClasses = cva({
     base: 'relative flex w-full touch-none items-center select-none',
@@ -74,7 +74,6 @@ const thumbClasses = cva({
 
 <template>
     <SliderRoot
-        data-ui-control
         :class="rootClasses"
         :max="max"
         :min="min"
@@ -89,6 +88,9 @@ const thumbClasses = cva({
             :id
             :class="thumbClasses"
             :aria-label="label"
+            :aria-describedby="describedBy"
+            :aria-invalid="invalid ? 'true' : undefined"
+            data-ui-control
         />
     </SliderRoot>
 </template>
diff --git a/resources/js/components/ui/Switch.vue b/resources/js/components/ui/Switch.vue
index bae280d99f4..17c03ef1e16 100644
--- a/resources/js/components/ui/Switch.vue
+++ b/resources/js/components/ui/Switch.vue
@@ -18,7 +18,7 @@ const props = defineProps({
 
 defineEmits(['update:modelValue']);
 
-const { id } = useUiFieldId(toRef(props, 'id'));
+const { id, describedBy, invalid } = useUiFieldId(toRef(props, 'id'));
 
 const switchRootClasses = cva({
     base: [
@@ -60,6 +60,8 @@ const switchThumbClasses = cva({
         data-ui-control
         dir="ltr"
         :id="id"
+        :aria-describedby="describedBy"
+        :aria-invalid="invalid ? 'true' : undefined"
         :model-value="modelValue"
         :class="switchRootClasses"
         :disabled="disabled"
diff --git a/resources/js/components/ui/Textarea.vue b/resources/js/components/ui/Textarea.vue
index b58a27460b9..7e9be6149b2 100644
--- a/resources/js/components/ui/Textarea.vue
+++ b/resources/js/components/ui/Textarea.vue
@@ -3,12 +3,14 @@ import { cva } from 'cva';
 import CharacterCounter from './CharacterCounter.vue';
 import Button from './Button/Button.vue';
 import autosize from 'autosize/dist/autosize.js';
-import { computed, nextTick, onBeforeUnmount, onMounted, toRef, useTemplateRef } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, toRef, useAttrs, useTemplateRef } from 'vue';
 import useCopy from '@/composables/copy';
-import { useUiFieldId } from '@/composables/ui-field-id.js';
+import { mergeAriaDescribedBy, useUiFieldId } from '@/composables/ui-field-id.js';
 
 defineEmits(['update:modelValue']);
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps({
     /** When `true`, the textarea will automatically grow/shrink to fit content */
     elastic: { type: Boolean, default: false },
@@ -29,7 +31,17 @@ const props = defineProps({
     limit: { type: Number, default: null },
 });
 
-const { id } = useUiFieldId(toRef(props, 'id'));
+const attrs = useAttrs();
+const { id, describedBy, invalid } = useUiFieldId(toRef(props, 'id'));
+
+const resolvedDescribedBy = computed(() =>
+    mergeAriaDescribedBy(describedBy.value, attrs['aria-describedby']),
+);
+
+const textareaAttrs = computed(() => {
+    const { 'aria-describedby': _describedBy, 'aria-invalid': _invalid, ...rest } = attrs;
+    return rest;
+});
 
 const { copySupported, copied, copy } = useCopy();
 const canCopy = computed(() => props.copyable && copySupported.value);
@@ -77,10 +89,12 @@ onBeforeUnmount(() => {
             :class="classes"
             :rows="rows"
             :id="id"
-            v-bind="$attrs"
+            v-bind="textareaAttrs"
             :value="modelValue"
             :disabled="disabled"
             :readonly="readOnly"
+            :aria-describedby="resolvedDescribedBy"
+            :aria-invalid="invalid ? 'true' : undefined"
             data-ui-control
             @input="$emit('update:modelValue', $event.target.value)"
         />
diff --git a/resources/js/composables/ui-field-id.js b/resources/js/composables/ui-field-id.js
index 597c8e65b60..f89a224d166 100644
--- a/resources/js/composables/ui-field-id.js
+++ b/resources/js/composables/ui-field-id.js
@@ -3,13 +3,31 @@ import { computed, inject, unref, useId } from 'vue';
 export const UI_FIELD_ID_KEY = 'uiFieldId';
 
 /**
- * Resolve a control's id: explicit prop, then a claimed parent ui/Field id, then a generated id.
+ * Merge aria-describedby id lists, dropping empties and duplicates.
+ */
+export function mergeAriaDescribedBy(...parts) {
+    const ids = parts
+        .flatMap((part) => {
+            const value = unref(part);
+            if (value == null || value === '') return [];
+            return String(value).split(/\s+/);
+        })
+        .filter(Boolean);
+
+    return ids.length ? [...new Set(ids)].join(' ') : undefined;
+}
+
+/**
+ * Resolve a control's id and field a11y attrs from a parent ui/Field.
+ *
+ * Id resolution: explicit prop, then a claimed parent Field id (when claimable),
+ * then a generated id. Only the first control claims an auto-generated Field id.
  *
- * Field only exposes an id for injection when it auto-generated one (no explicit `id` prop).
- * The first control to call this claims that id so sibling controls don't share it.
+ * `describedBy` and `invalid` are only applied when this control's resolved id
+ * matches the Field's id — so composite fieldtypes (Table, List, etc.) don't
+ * mark every nested control invalid.
  *
- * Returns `{ id, labelId }`. `labelId` is set when this control claimed the Field association
- * (for non-labelable controls that need `aria-labelledby`).
+ * Returns `{ id, labelId, describedBy, invalid }`.
  */
 export function useUiFieldId(id) {
     const context = inject(UI_FIELD_ID_KEY, null);
@@ -21,7 +39,9 @@ export function useUiFieldId(id) {
     let claimedId = null;
     let claimedLabelId = null;
 
-    if (!hasExplicit && context?.id != null && !context.claimed) {
+    const canClaim = context?.claimable !== false;
+
+    if (!hasExplicit && canClaim && context?.id != null && !context.claimed) {
         context.claimed = true;
         claimedId = context.id;
         claimedLabelId = context.labelId ?? null;
@@ -45,5 +65,21 @@ export function useUiFieldId(id) {
         return value != null && value !== '' ? value : null;
     });
 
-    return { id: resolvedId, labelId };
+    const isFieldControl = computed(() => {
+        const fieldId = unref(context?.id);
+        if (fieldId == null || fieldId === '') return false;
+        return resolvedId.value === fieldId;
+    });
+
+    const describedBy = computed(() => {
+        if (!isFieldControl.value) return undefined;
+        return mergeAriaDescribedBy(context?.describedBy);
+    });
+
+    const invalid = computed(() => {
+        if (!isFieldControl.value) return false;
+        return !!unref(context?.invalid);
+    });
+
+    return { id: resolvedId, labelId, describedBy, invalid };
 }
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 0a910807bd4..d7f31f0c0ef 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -3,8 +3,9 @@ import Head from '@/pages/layout/Head.vue';
 import Outside from '@/pages/layout/Outside.vue';
 import { AuthCard, Input, Field, Button, Separator, Checkbox, ErrorMessage } from '@ui';
 import { Link, router } from '@inertiajs/vue3';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { usePasskey } from '@/composables/passkey';
+import { reveal } from '@api';
 
 defineOptions({ layout: Outside });
 
@@ -40,7 +41,10 @@ const submit = () => {
             processing.value = true;
             errors.value = {};
         },
-        onError: () => processing.value = false
+        onError: () => {
+            processing.value = false;
+            nextTick(() => reveal.invalid());
+        },
     });
 }
 
diff --git a/resources/js/tests/components/Field.test.js b/resources/js/tests/components/Field.test.js
index b540181015b..6cd453a8004 100644
--- a/resources/js/tests/components/Field.test.js
+++ b/resources/js/tests/components/Field.test.js
@@ -172,3 +172,137 @@ test('it associates the label with a nested combobox trigger via aria-labelledby
 
     wrapper.unmount();
 });
+
+test('it associates errors and instructions with the nested input', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Email',
+            instructions: 'Your work email',
+            error: 'This field is required.',
+        },
+        slots: {
+            default: () => h(Input, { name: 'email' }),
+        },
+        attachTo: document.body,
+    });
+
+    const input = wrapper.find('[data-ui-control]');
+    const description = wrapper.find('[data-ui-description]');
+    const error = wrapper.find('[data-ui-error-message]');
+
+    expect(description.attributes('id')).toBeTruthy();
+    expect(error.attributes('id')).toBe(`${input.attributes('id')}-error`);
+    expect(input.attributes('aria-invalid')).toBe('true');
+    expect(input.attributes('aria-describedby')).toContain(description.attributes('id'));
+    expect(input.attributes('aria-describedby')).toContain(error.attributes('id'));
+
+    wrapper.unmount();
+});
+
+test('an explicit field id still wires describedby and invalid onto nested inputs', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Title',
+            id: 'field_title',
+            error: 'This field is required.',
+        },
+        slots: {
+            default: () => h(Input, { name: 'title', id: 'field_title' }),
+        },
+        attachTo: document.body,
+    });
+
+    const input = wrapper.find('[data-ui-control]');
+    const error = wrapper.find('[data-ui-error-message]');
+
+    expect(input.attributes('id')).toBe('field_title');
+    expect(error.attributes('id')).toBe('field_title-error');
+    expect(input.attributes('aria-invalid')).toBe('true');
+    expect(input.attributes('aria-describedby')).toBe('field_title-error');
+
+    wrapper.unmount();
+});
+
+test('descendant controls that do not share the field id are not marked invalid', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Table',
+            id: 'field_table',
+            error: 'This field is required.',
+        },
+        slots: {
+            default: () => [h(Input, { name: 'a' }), h(Input, { name: 'b' })],
+        },
+        attachTo: document.body,
+    });
+
+    const inputs = wrapper.findAll('[data-ui-control]');
+
+    expect(inputs[0].attributes('aria-invalid')).toBeUndefined();
+    expect(inputs[1].attributes('aria-invalid')).toBeUndefined();
+    expect(inputs[0].attributes('aria-describedby')).toBeUndefined();
+    expect(inputs[1].attributes('aria-describedby')).toBeUndefined();
+
+    wrapper.unmount();
+});
+
+test('it assigns stable ids across multiple errors', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Email',
+            id: 'field_email',
+            errors: ['Required.', 'Must be valid.'],
+        },
+        slots: {
+            default: () => h(Input, { name: 'email', id: 'field_email' }),
+        },
+        attachTo: document.body,
+    });
+
+    const errors = wrapper.findAll('[data-ui-error-message]');
+    const input = wrapper.find('[data-ui-control]');
+
+    expect(errors[0].attributes('id')).toBe('field_email-error');
+    expect(errors[1].attributes('id')).toBe('field_email-error-1');
+    expect(input.attributes('aria-describedby')).toBe('field_email-error field_email-error-1');
+
+    wrapper.unmount();
+});
+
+test('it does not set aria-describedby when the field has no instructions or errors', () => {
+    const wrapper = mount(Field, {
+        props: { label: 'Email' },
+        slots: {
+            default: () => h(Input, { name: 'email' }),
+        },
+        attachTo: document.body,
+    });
+
+    expect(wrapper.find('[data-ui-control]').attributes('aria-describedby')).toBeUndefined();
+
+    wrapper.unmount();
+});
+
+test('it merges consumer aria-describedby with the field description', () => {
+    const wrapper = mount(Field, {
+        props: {
+            label: 'Email',
+            id: 'field_email',
+            error: 'Required.',
+        },
+        slots: {
+            default: () => h(Input, {
+                name: 'email',
+                id: 'field_email',
+                inputAttrs: { 'aria-describedby': 'extra-help' },
+            }),
+        },
+        attachTo: document.body,
+    });
+
+    expect(wrapper.find('[data-ui-control]').attributes('aria-describedby')).toBe(
+        'field_email-error extra-help',
+    );
+
+    wrapper.unmount();
+});
diff --git a/resources/js/tests/components/Reveal.test.js b/resources/js/tests/components/Reveal.test.js
new file mode 100644
index 00000000000..e09a9016fa8
--- /dev/null
+++ b/resources/js/tests/components/Reveal.test.js
@@ -0,0 +1,79 @@
+import { afterEach, expect, test, vi } from 'vitest';
+import { nextTick } from 'vue';
+import Reveal from '@/components/Reveal.js';
+
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+
+test('invalid focuses the first control inside the first errored field', async () => {
+    document.body.innerHTML = `
+        <div data-ui-field-has-errors id="field-wrap">
+            <input data-ui-control id="field_title" />
+        </div>
+        <div data-ui-field-has-errors>
+            <input data-ui-control id="field_slug" />
+        </div>
+    `;
+
+    const field = document.getElementById('field-wrap');
+    const first = document.getElementById('field_title');
+    const second = document.getElementById('field_slug');
+    field.scrollIntoView = vi.fn();
+    first.focus = vi.fn();
+    second.focus = vi.fn();
+
+    const reveal = new Reveal();
+    reveal.invalid();
+
+    await nextTick();
+    await nextTick();
+
+    expect(first.focus).toHaveBeenCalled();
+    expect(second.focus).not.toHaveBeenCalled();
+});
+
+test('invalid focuses a slider thumb instead of the non-focusable root', async () => {
+    document.body.innerHTML = `
+        <div data-ui-field-has-errors id="field-wrap">
+            <div data-ui-control>
+                <span role="slider" tabindex="0" id="field_quality"></span>
+            </div>
+        </div>
+    `;
+
+    const field = document.getElementById('field-wrap');
+    const thumb = document.getElementById('field_quality');
+    field.scrollIntoView = vi.fn();
+    thumb.focus = vi.fn();
+
+    const reveal = new Reveal();
+    reveal.invalid();
+
+    await nextTick();
+    await nextTick();
+
+    expect(thumb.focus).toHaveBeenCalled();
+});
+
+test('invalid skips a disabled combobox trigger', async () => {
+    document.body.innerHTML = `
+        <div data-ui-field-has-errors id="field-wrap">
+            <div role="combobox" tabindex="-1" data-disabled></div>
+            <input id="field_fallback" />
+        </div>
+    `;
+
+    const field = document.getElementById('field-wrap');
+    const fallback = document.getElementById('field_fallback');
+    field.scrollIntoView = vi.fn();
+    fallback.focus = vi.fn();
+
+    const reveal = new Reveal();
+    reveal.invalid();
+
+    await nextTick();
+    await nextTick();
+
+    expect(fallback.focus).toHaveBeenCalled();
+});