srcdev-nuxt-components 9.5.1 → 9.5.2

package/.claude/skills/components/input-error.md

@@ -41,7 +41,7 @@ No slots.
 ```vue
 <template>
   <div class="my-field">
-    <input :id :aria-describedby :aria-invalid="fieldHasError" />
+    <input :id :aria-describedby="ariaDescribedby()" :aria-invalid="fieldHasError" />
     <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
   </div>
 </template>

package/app/components/05.forms/input-checkbox/MultipleCheckboxes.vue

@@ -39,7 +39,7 @@
             :theme
             :input-variant
             :direction
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
             :display-as-disc
             :is-pill="isPill"
           >
@@ -64,7 +64,7 @@
             :true-value="item.value"
             :theme
             :input-variant
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
             :display-as-disc
           >
             <template #checkedIcon>

package/app/components/05.forms/input-checkbox/SingleCheckbox.vue

@@ -35,7 +35,7 @@
           :false-value
           :theme
           :input-variant
-          :aria-describedby
+          :aria-describedby="ariaDescribedby()"
         >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>

package/app/components/05.forms/input-number/InputNumberField.vue

@@ -43,7 +43,7 @@
       :input-variant
       :field-has-error
       :style-class-passthrough
-      :aria-describedby
+      :aria-describedby="ariaDescribedby()"
     >
       <template v-if="slots.left" #left>
         <InputButton

package/app/components/05.forms/input-radio/MultipleRadiobuttons.vue

@@ -40,7 +40,7 @@
             :theme
             :input-variant
             :direction
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
             :is-pill="isPill"
           >
             <template #checkedIcon>
@@ -63,7 +63,7 @@
             :true-value="item.value"
             :theme
             :input-variant
-            :aria-describedby
+            :aria-describedby="ariaDescribedby()"
           >
             <template #checkedIcon>
               <slot name="checkedIcon"></slot>

package/app/components/05.forms/input-range/InputRangeDefault.vue

@@ -39,7 +39,7 @@
       :required
       :weight
       :field-has-error
-      :aria-describedby="ariaDescribedby"
+      :aria-describedby="ariaDescribedby()"
       :style-class-passthrough="styleClassPassthrough"
     >
       <template v-if="slots.datalist" #datalist>

package/app/components/05.forms/input-select/InputSelectWithLabel.vue

@@ -44,7 +44,7 @@
         :required
         :style-class-passthrough
         :theme="FormUiTheme"
-        :aria-describedby
+        :aria-describedby="ariaDescribedby()"
         :input-variant
       />
 

package/app/components/05.forms/input-text/InputTextAsNumberWithLabel.vue

@@ -45,7 +45,7 @@
       :style-class-passthrough="elementClasses"
       :theme
       inputmode="numeric"
-      :aria-describedby
+      :aria-describedby="ariaDescribedby()"
       :input-variant
     >
       <template v-if="slots.left" #left>

package/app/components/05.forms/input-text/InputTextWithLabel.vue

@@ -49,7 +49,7 @@
         :required
         :style-class-passthrough
         :theme
-        :aria-describedby
+        :aria-describedby="ariaDescribedby()"
         :input-variant
       >
         <template v-if="slots.left" #left>

package/app/components/05.forms/input-text/tests/InputTextWithLabel.spec.ts

@@ -2,6 +2,7 @@
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ComponentUnderTest from "../InputTextWithLabel.vue";
+import { defineComponent, nextTick, ref } from "vue";
 
 const initialPropsData = {
   type: "text" as const,
@@ -44,4 +45,27 @@ describe("InputTextWithLabel", () => {
     expect(input.attributes("min")).toBe("2026-01-01");
     expect(input.attributes("max")).toBe("2026-12-31");
   });
+
+  it("points aria-describedby at the description once it appears after mount", async () => {
+    const Host = defineComponent({
+      components: { ComponentUnderTest },
+      setup() {
+        return { modelValue: ref(""), showDescription: ref(false) };
+      },
+      template: `
+        <ComponentUnderTest v-model="modelValue" type="text" name="email" label="Email" error-message="">
+          <template v-if="showDescription" #descriptionText>We never share it.</template>
+        </ComponentUnderTest>
+      `,
+    });
+    const host = await mountSuspended(Host);
+    const input = () => host.find("input");
+    expect(input().attributes("aria-describedby")).toBeFalsy();
+    (host.vm as unknown as { showDescription: boolean }).showDescription = true;
+    await nextTick();
+    expect(input().attributes("aria-describedby")).toMatch(/-description$/);
+    (host.vm as unknown as { showDescription: boolean }).showDescription = false;
+    await nextTick();
+    expect(input().attributes("aria-describedby")).toBeFalsy();
+  });
 });

package/app/components/05.forms/input-textarea/InputTextareaWithLabel.vue

@@ -44,7 +44,7 @@
         :style-class-passthrough
         :theme
         :input-variant
-        :aria-describedby
+        :aria-describedby="ariaDescribedby()"
       >
         <template v-if="slots.left" #left>
           <slot name="left"></slot>

package/app/components/05.forms/toggle-switch/ToggleSwitchWithLabel.vue

@@ -86,10 +86,10 @@ const toggleSwitchId = computed(() => `toggle-switch-${id}`);
 const descriptionId = computed(() => `${id}-description`);
 const errorId = computed(() => `${id}-error-message`);
 
-// A plain function rather than useAriaDescribedById's computed: slots aren't reactive, so a
-// computed would keep its first answer if a description slot is added or removed after mount
-// (Claude.md pitfall #25). Lists both ids when there's a description and an error, so the
-// description is still announced while the field is invalid.
+// A plain function, like useAriaDescribedById's: slots aren't reactive, so a computed would keep
+// its first answer if a description slot is added or removed after mount (Claude.md pitfall #25).
+// Lists both ids when there's a description and an error, so the description is still announced
+// while the field is invalid.
 const ariaDescribedby = () => {
   const ids: string[] = [];
   if (slots.descriptionText || slots.descriptionHtml) ids.push(descriptionId.value);

package/app/composables/tests/useAriaDescribedById.spec.ts

@@ -38,7 +38,7 @@ describe("useAriaDescribedById", () => {
   describe("ariaDescribedby", () => {
     it("is null when no slots and no error", () => {
       const { ariaDescribedby } = useAriaDescribedById("email", ref(false), noSlots);
-      expect(ariaDescribedby.value).toBeNull();
+      expect(ariaDescribedby()).toBeNull();
     });
 
     it("includes descriptionId when descriptionText slot is present", () => {
@@ -47,7 +47,7 @@ describe("useAriaDescribedById", () => {
         ref(false),
         withSlot("descriptionText")
       );
-      expect(ariaDescribedby.value).toContain(descriptionId);
+      expect(ariaDescribedby()).toContain(descriptionId);
     });
 
     it("includes descriptionId when descriptionHtml slot is present", () => {
@@ -56,7 +56,7 @@ describe("useAriaDescribedById", () => {
         ref(false),
         withSlot("descriptionHtml")
       );
-      expect(ariaDescribedby.value).toContain(descriptionId);
+      expect(ariaDescribedby()).toContain(descriptionId);
     });
 
     it("includes descriptionId when description slot is present", () => {
@@ -65,17 +65,17 @@ describe("useAriaDescribedById", () => {
         ref(false),
         withSlot("description")
       );
-      expect(ariaDescribedby.value).toContain(descriptionId);
+      expect(ariaDescribedby()).toContain(descriptionId);
     });
 
     it("includes errorId when fieldHasError is true", () => {
       const { errorId, ariaDescribedby } = useAriaDescribedById("email", ref(true), noSlots);
-      expect(ariaDescribedby.value).toContain(errorId);
+      expect(ariaDescribedby()).toContain(errorId);
     });
 
     it("does not include errorId when fieldHasError is false (value is null)", () => {
       const { ariaDescribedby } = useAriaDescribedById("email", ref(false), noSlots);
-      expect(ariaDescribedby.value).toBeNull();
+      expect(ariaDescribedby()).toBeNull();
     });
 
     it("does not include errorId when slot is present but fieldHasError is false", () => {
@@ -84,7 +84,7 @@ describe("useAriaDescribedById", () => {
         ref(false),
         withSlot("descriptionText")
       );
-      expect(ariaDescribedby.value).not.toContain(errorId);
+      expect(ariaDescribedby()).not.toContain(errorId);
     });
 
     it("includes both descriptionId and errorId when slot present and error active", () => {
@@ -94,8 +94,8 @@ describe("useAriaDescribedById", () => {
         fieldHasError,
         withSlot("descriptionText")
       );
-      expect(ariaDescribedby.value).toContain(descriptionId);
-      expect(ariaDescribedby.value).toContain(errorId);
+      expect(ariaDescribedby()).toContain(descriptionId);
+      expect(ariaDescribedby()).toContain(errorId);
     });
 
     it("descriptionId appears before errorId in the combined string", () => {
@@ -105,7 +105,7 @@ describe("useAriaDescribedById", () => {
         fieldHasError,
         withSlot("descriptionText")
       );
-      const value = ariaDescribedby.value!;
+      const value = ariaDescribedby()!;
       expect(value.indexOf(descriptionId)).toBeLessThan(value.indexOf(errorId));
     });
   });
@@ -116,19 +116,35 @@ describe("useAriaDescribedById", () => {
     it("ariaDescribedby updates when fieldHasError changes to true", async () => {
       const fieldHasError = ref(false);
       const { errorId, ariaDescribedby } = useAriaDescribedById("email", fieldHasError, noSlots);
-      expect(ariaDescribedby.value).toBeNull();
+      expect(ariaDescribedby()).toBeNull();
       fieldHasError.value = true;
       await nextTick();
-      expect(ariaDescribedby.value).toContain(errorId);
+      expect(ariaDescribedby()).toContain(errorId);
     });
 
     it("ariaDescribedby updates when fieldHasError changes back to false", async () => {
       const fieldHasError = ref(true);
       const { ariaDescribedby } = useAriaDescribedById("email", fieldHasError, noSlots);
-      expect(ariaDescribedby.value).toBeTruthy();
+      expect(ariaDescribedby()).toBeTruthy();
       fieldHasError.value = false;
       await nextTick();
-      expect(ariaDescribedby.value).toBeNull();
+      expect(ariaDescribedby()).toBeNull();
+    });
+
+    it("picks up a description slot added after setup", () => {
+      const slots: Slots = {};
+      const { descriptionId, ariaDescribedby } = useAriaDescribedById("email", ref(false), slots);
+      expect(ariaDescribedby()).toBeNull();
+      slots.descriptionText = () => [];
+      expect(ariaDescribedby()).toBe(descriptionId);
+    });
+
+    it("drops a description slot removed after setup", () => {
+      const slots: Slots = withSlot("descriptionText");
+      const { ariaDescribedby } = useAriaDescribedById("email", ref(false), slots);
+      expect(ariaDescribedby()).toBeTruthy();
+      delete slots.descriptionText;
+      expect(ariaDescribedby()).toBeNull();
     });
   });
 });

package/app/composables/useAriaDescribedById.ts

@@ -5,7 +5,11 @@ export function useAriaDescribedById(name: string | Ref<string>, fieldHasError:
   const errorId = `${id}-error-message`;
   const descriptionId = `${id}-description`;
 
-  const ariaDescribedby = computed(() => {
+  // A plain function, not a computed: the slots object isn't reactive, so a computed would cache
+  // its first answer and keep pointing at (or away from) the description after a description slot
+  // is added or removed post-mount (Claude.md pitfall #25). Call it from the template,
+  // `:aria-describedby="ariaDescribedby()"`, so it's re-evaluated on every render.
+  const ariaDescribedby = () => {
     const hasDescription = slots.descriptionText || slots.descriptionHtml || slots.description;
     const ids = [];
 
@@ -13,7 +17,7 @@ export function useAriaDescribedById(name: string | Ref<string>, fieldHasError:
     if (fieldHasError.value) ids.push(errorId);
 
     return ids.length ? ids.join(" ") : null;
-  });
+  };
 
   return { id, errorId, descriptionId, ariaDescribedby };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.5.1",
+  "version": "9.5.2",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",