srcdev-nuxt-components 9.5.1 → 9.5.3

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

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { ref } from "vue";
-import type { Slots } from "vue";
+import type { Slot, Slots } from "vue";
 import { mockNuxtImport } from "@nuxt/test-utils/runtime";
 import { useAriaDescribedById } from "../useAriaDescribedById";
 
@@ -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: Record<string, Slot> = {};
+      const { descriptionId, ariaDescribedby } = useAriaDescribedById("email", ref(false), slots as Slots);
+      expect(ariaDescribedby()).toBeNull();
+      slots.descriptionText = () => [];
+      expect(ariaDescribedby()).toBe(descriptionId);
+    });
+
+    it("drops a description slot removed after setup", () => {
+      const slots: Record<string, Slot> = { descriptionText: () => [] };
+      const { ariaDescribedby } = useAriaDescribedById("email", ref(false), slots as 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.3",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",