srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/02.molecules/samaritan-prompt/stories/SamaritanPromptMixed.stories.ts

@@ -0,0 +1,124 @@
+import { computed } from "vue";
+import SamaritanPromptMixed from "../SamaritanPromptMixed.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { SamaritanPromptMessageConfig } from "~/types/components";
+
+// Dark stage because the default colours are white. Keying on the serialised args restarts the
+// loop when a control changes, so the new value is visible straight away.
+const stageStyle =
+  "display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #000; color: #fff;";
+
+const messageConfigs: SamaritanPromptMessageConfig[] = [
+  { text: "Good evening", effect: "typewriter", holdDuration: 2500 },
+  { text: "Stand by", effect: "word-pulse", wordDuration: 2000, fadeDuration: 800 },
+  { text: "Connection established", effect: "typewriter", typeSpeed: 50, holdDuration: 2500 },
+];
+
+const meta: Meta<typeof SamaritanPromptMixed> = {
+  title: "Molecules/SamaritanPromptMixed",
+  component: SamaritanPromptMixed,
+  argTypes: {
+    messageConfigs: {
+      control: "object",
+      description: "Messages, each optionally overriding the effect and timing props below",
+      table: { category: "Content" },
+    },
+    effect: {
+      control: "inline-radio",
+      options: ["typewriter", "word-pulse"],
+      description: "Default effect for messages that don't set their own",
+      table: { category: "Content", defaultValue: { summary: "typewriter" } },
+    },
+    introDelay: {
+      control: { type: "range", min: 0, max: 5000, step: 100 },
+      description: "ms before the first message of each loop",
+      table: { category: "Timing", defaultValue: { summary: "2000" } },
+    },
+    typeSpeed: {
+      control: { type: "range", min: 10, max: 400, step: 10 },
+      description: "ms per character typed",
+      table: { category: "Typewriter", defaultValue: { summary: "80" } },
+    },
+    deleteSpeed: {
+      control: { type: "range", min: 10, max: 400, step: 10 },
+      description: "ms per character deleted",
+      table: { category: "Typewriter", defaultValue: { summary: "40" } },
+    },
+    holdDuration: {
+      control: { type: "range", min: 0, max: 10000, step: 100 },
+      description: "ms the fully typed text holds before deleting",
+      table: { category: "Typewriter", defaultValue: { summary: "7000" } },
+    },
+    pauseDuration: {
+      control: { type: "range", min: 0, max: 5000, step: 100 },
+      description: "ms pause after each message",
+      table: { category: "Timing", defaultValue: { summary: "1000" } },
+    },
+    wordDuration: {
+      control: { type: "range", min: 200, max: 5000, step: 100 },
+      description: "ms a word-pulse message stays fully visible",
+      table: { category: "Word pulse", defaultValue: { summary: "1200" } },
+    },
+    fadeDuration: {
+      control: { type: "range", min: 0, max: 2000, step: 50 },
+      description: "ms for the word-pulse fade in and out",
+      table: { category: "Word pulse", defaultValue: { summary: "400" } },
+    },
+    hideCursorInCycle: {
+      control: "boolean",
+      description: "Hide the cursor while text animates, show it during pauses",
+      table: { category: "Cursor", defaultValue: { summary: "true" } },
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    messageConfigs,
+    effect: "typewriter",
+    introDelay: 500,
+    typeSpeed: 80,
+    deleteSpeed: 40,
+    holdDuration: 7000,
+    pauseDuration: 1000,
+    wordDuration: 1200,
+    fadeDuration: 400,
+    hideCursorInCycle: true,
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { SamaritanPromptMixed },
+    setup() {
+      const restartKey = computed(() => JSON.stringify(args));
+      return { args, restartKey, stageStyle };
+    },
+    template: `
+      <div :style="stageStyle">
+        <SamaritanPromptMixed :key="restartKey" v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof SamaritanPromptMixed>;
+
+export const Default: Story = {};
+
+export const LightPage: Story = {
+  name: "Light Page (token override)",
+  render: (args) => ({
+    components: { SamaritanPromptMixed },
+    setup() {
+      const restartKey = computed(() => JSON.stringify(args));
+      return { args, restartKey };
+    },
+    template: `
+      <div style="display: grid; place-items: center; min-block-size: 32rem; padding: 3.2rem; background: #fff; --samaritan-prompt-text-colour: #000; --samaritan-prompt-underline-colour: #000;">
+        <SamaritanPromptMixed :key="restartKey" v-bind="args" />
+      </div>
+    `,
+  }),
+};

package/app/components/02.molecules/samaritan-prompt/tests/SamaritanPrompt.spec.ts

@@ -366,3 +366,69 @@ describe("SamaritanPrompt — word-pulse", () => {
     expect(wrapper.find(".samaritan-prompt__cursor").attributes("style")).toContain("opacity: 1");
   });
 });
+
+// ─── Accessibility, pause and slots ─────────────────────────────────────────
+
+describe("SamaritanPrompt — accessibility and pause", () => {
+  it("hides the animated content from assistive tech and exposes a polite live region", async () => {
+    const wrapper = await mountSuspended(SamaritanPrompt, { props: { messages } });
+    expect(wrapper.find(".samaritan-prompt__content").attributes("aria-hidden")).toBe("true");
+    const live = wrapper.find(".samaritan-prompt__sr-text");
+    expect(live.attributes("aria-live")).toBe("polite");
+    expect(live.attributes("aria-atomic")).toBe("true");
+    expect(live.text()).toBe("");
+  });
+
+  it("announces the full message once typed, and clears it when deleting starts", async () => {
+    const wrapper = await mountSuspended(SamaritanPrompt, {
+      props: { messages, typeSpeed: 10, holdDuration: 500, deleteSpeed: 10 },
+    });
+
+    vi.advanceTimersByTime(10 * (firstMessage.length + 1));
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__sr-text").text()).toBe(firstMessage);
+
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__sr-text").text()).toBe("");
+  });
+
+  it("stops typing while hovered and resumes on leave", async () => {
+    const wrapper = await mountSuspended(SamaritanPrompt, { props: { messages, typeSpeed: 100 } });
+    const root = wrapper.find(".samaritan-prompt");
+
+    vi.advanceTimersByTime(200);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__text").text()).toBe("He");
+
+    await root.trigger("pointerenter");
+    expect(root.attributes("data-paused")).toBeDefined();
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__text").text()).toBe("He");
+
+    await root.trigger("pointerleave");
+    expect(root.attributes("data-paused")).toBeUndefined();
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__text").text()).toBe("Hel");
+  });
+
+  it("renders a custom cursor from the cursor slot", async () => {
+    const wrapper = await mountSuspended(SamaritanPrompt, {
+      props: { messages },
+      slots: { cursor: () => "_" },
+    });
+    expect(wrapper.find(".samaritan-prompt__cursor").text()).toBe("_");
+  });
+
+  it("updates passthrough classes when the prop changes", async () => {
+    const wrapper = await mountSuspended(SamaritanPrompt, {
+      props: { messages, styleClassPassthrough: "first-class" },
+    });
+    await wrapper.setProps({ styleClassPassthrough: "second-class" });
+    const classes = wrapper.find(".samaritan-prompt").classes();
+    expect(classes).toContain("second-class");
+    expect(classes).not.toContain("first-class");
+  });
+});

package/app/components/02.molecules/samaritan-prompt/tests/SamaritanPromptMixed.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import SamaritanPromptMixed from "../SamaritanPromptMixed.vue";
-import type { MessageConfig } from "../SamaritanPromptMixed.vue";
+import type { SamaritanPromptMessageConfig as MessageConfig } from "~/types/components/samaritan-prompt";
 
 // ─── Typewriter ───────────────────────────────────────────────────────────────
 //
@@ -38,14 +38,14 @@ describe("SamaritanPromptMixed — typewriter", () => {
     expect(wrapper.find(".samaritan-prompt__stage").exists()).toBe(true);
   });
 
-  it.skip("types the first character immediately on mount", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("types the first character immediately on mount", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick();
     expect(wrapper.find(".samaritan-prompt__text").text()).toBe("H");
   });
 
-  it.skip("types one character per typeSpeed tick", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("types one character per typeSpeed tick", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick();
     expect(wrapper.find(".samaritan-prompt__text").text()).toBe("H");
 
@@ -55,8 +55,8 @@ describe("SamaritanPromptMixed — typewriter", () => {
     expect(wrapper.find(".samaritan-prompt__text").text()).toBe("HE");
   });
 
-  it.skip("hides cursor when typing starts", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("hides cursor when typing starts", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick();
     expect(wrapper.find(".samaritan-prompt__cursor").attributes("style")).toContain("opacity: 0");
   });
@@ -166,16 +166,16 @@ describe("SamaritanPromptMixed — word-pulse", () => {
     expect(wrapper.find(".samaritan-prompt__text").text()).toBe("");
   });
 
-  it.skip("fades content out when cycle starts", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("fades content out when cycle starts", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick(); // component's await nextTick() resolves → sets opacity=0
     await nextTick(); // DOM update
 
     expect(wrapper.find(".samaritan-prompt__content").attributes("style")).toContain("opacity: 0");
   });
 
-  it.skip("hides cursor when cycle starts", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("hides cursor when cycle starts", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick();
     await nextTick();
 
@@ -192,8 +192,8 @@ describe("SamaritanPromptMixed — word-pulse", () => {
     expect(wrapper.find(".samaritan-prompt__cursor").attributes("style")).toContain("opacity: 1");
   });
 
-  it.skip("shows text and restores opacity after fade duration and settle delay", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("shows text and restores opacity after fade duration and settle delay", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick(); // component's nextTick resolves → opacity=0, await wait(fadeDuration)
     await nextTick(); // DOM update
 
@@ -211,8 +211,8 @@ describe("SamaritanPromptMixed — word-pulse", () => {
     expect(wrapper.find(".samaritan-prompt__content").attributes("style")).toContain("opacity: 1");
   });
 
-  it.skip("fades text back out after word duration", async () => {
-    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+  it("fades text back out after word duration", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
     await nextTick();
     await nextTick();
 
@@ -241,10 +241,11 @@ describe("SamaritanPromptMixed — config resolution", () => {
     // wrappers are unmounted inline in each test
   });
 
-  it.skip("falls back to global effect prop when not specified per message", async () => {
+  it("falls back to global effect prop when not specified per message", async () => {
     const wrapper = await mountSuspended(SamaritanPromptMixed, {
       props: {
         messageConfigs: [{ text: "TEST" }], // no effect
+        introDelay: 0,
         effect: "typewriter",
         typeSpeed: 100,
       },
@@ -255,10 +256,11 @@ describe("SamaritanPromptMixed — config resolution", () => {
     wrapper.unmount();
   });
 
-  it.skip("falls back to global typeSpeed when not specified per message", async () => {
+  it("falls back to global typeSpeed when not specified per message", async () => {
     const wrapper = await mountSuspended(SamaritanPromptMixed, {
       props: {
         messageConfigs: [{ text: "HI", effect: "typewriter" }],
+        introDelay: 0,
         typeSpeed: 150,
       },
     });
@@ -304,3 +306,79 @@ describe("SamaritanPromptMixed — config resolution", () => {
     wrapper.unmount();
   });
 });
+
+// ─── Accessibility, pause and slots ───────────────────────────────────────────
+
+describe("SamaritanPromptMixed — accessibility and pause", () => {
+  const config: MessageConfig = {
+    text: "HI",
+    effect: "typewriter",
+    typeSpeed: 100,
+    deleteSpeed: 50,
+    holdDuration: 300,
+    pauseDuration: 100,
+  };
+
+  let wrapper: Awaited<ReturnType<typeof mountSuspended>>;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  it("hides the animated content from assistive tech and exposes a polite live region", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
+    expect(wrapper.find(".samaritan-prompt__content").attributes("aria-hidden")).toBe("true");
+    const live = wrapper.find(".samaritan-prompt__sr-text");
+    expect(live.attributes("aria-live")).toBe("polite");
+    expect(live.attributes("aria-atomic")).toBe("true");
+  });
+
+  it("announces the full message once it is typed", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], introDelay: 0 } });
+    await vi.advanceTimersByTimeAsync(200);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__sr-text").text()).toBe("HI");
+  });
+
+  it("sets data-paused on hover and removes it on leave", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config] } });
+    const root = wrapper.find(".samaritan-prompt");
+    await root.trigger("pointerenter");
+    expect(root.attributes("data-paused")).toBeDefined();
+    await root.trigger("pointerleave");
+    expect(root.attributes("data-paused")).toBeUndefined();
+  });
+
+  it("stops typing while hovered and resumes on leave", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, {
+      props: { messageConfigs: [{ ...config, text: "HELLO" }], introDelay: 0 },
+    });
+    await vi.advanceTimersByTimeAsync(100);
+    await nextTick();
+    const typedBeforePause = wrapper.find(".samaritan-prompt__text").text();
+
+    await wrapper.find(".samaritan-prompt").trigger("pointerenter");
+    await vi.advanceTimersByTimeAsync(1000);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__text").text()).toBe(typedBeforePause);
+
+    await wrapper.find(".samaritan-prompt").trigger("pointerleave");
+    await vi.advanceTimersByTimeAsync(300);
+    await nextTick();
+    expect(wrapper.find(".samaritan-prompt__text").text().length).toBeGreaterThan(typedBeforePause.length);
+  });
+
+  it("renders a custom cursor from the cursor slot", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, {
+      props: { messageConfigs: [config] },
+      slots: { cursor: () => "_" },
+    });
+    expect(wrapper.find(".samaritan-prompt__cursor").text()).toBe("_");
+  });
+
+  it("exposes the fade duration as an inline private token", async () => {
+    wrapper = await mountSuspended(SamaritanPromptMixed, { props: { messageConfigs: [config], fadeDuration: 900 } });
+    const style = (wrapper.find(".samaritan-prompt").element as HTMLElement).style;
+    expect(style.getPropertyValue("--_fade-duration")).toBe("900ms");
+  });
+});

package/app/components/02.molecules/select-menu/CONSUMER-STYLING.md

@@ -54,7 +54,7 @@ global token so it matches the rest of the design system out of the box.
 
 ---
 
-## Global theming — recommended approach
+## Global theming
 
 Create `assets/styles/setup/07.components/select-menu.css` in the consuming app and set tokens
 on `:root`. This applies to every `SelectMenu` across the site.
@@ -77,7 +77,15 @@ on `:root`. This applies to every `SelectMenu` across the site.
 
 ---
 
-## Per-instance overrides via styleClassPassthrough
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 ```vue
 <SelectMenu
@@ -166,3 +174,4 @@ story.
   the bottom of the viewport (`position-try-fallbacks: flip-block`).
 - **Chevron rotation** is pure CSS via `:has(.select-menu-popover:popover-open)` — no JS state
   needed for the visual, though `isOpen` is still tracked internally to drive `aria-expanded`.
+

package/app/components/02.molecules/social-icons-list/CONSUMER-STYLING.md

@@ -0,0 +1,43 @@
+# SocialIconsList — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--social-icons-list-icon-size` | `2.4rem` | Icon size (applied as `font-size`) |
+| `--social-icons-list-gap` | `1.2rem` | Gap between icons |
+| `--social-icons-list-hover-scale` | `1.15` | Scale on hover/focus (no scaling under `prefers-reduced-motion: reduce`) |
+| `--social-icons-list-hover-opacity` | `0.85` | Opacity on hover/focus |
+
+The focus outline uses `--theme-ring`, falling back to `currentColor`. Icon colour is whatever the
+Iconify icon renders (`logos:` icons carry their own brand colours; mono sets follow `color`).
+
+> Changed 2026-09-28: `--theme-social-icon-size` and `--theme-social-icon-gap` were renamed to
+> `--social-icons-list-icon-size` and `--social-icons-list-gap`; the old names no longer work. The
+> icon is now sized with `font-size` (it used an inline `width`/`height` style). The hover tokens
+> are new, and the hover scale now respects reduced motion.
+
+No private `--_` tokens.
+
+---
+
+## State hooks
+
+Inner classes: `.social-icon-item` (each `<li>`), `.social-icon-link` (the `<a>`, opens in a new
+tab), `.social-icon` (the icon, `aria-hidden`).
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `<ul>`. Reactive after mount.

package/app/components/02.molecules/social-icons-list/SocialIconsList.vue

@@ -4,15 +4,11 @@
       <a
         :href="`${item.baseHref}${item.profileId}`"
         class="social-icon-link"
-        :aria-label="`${item.networkName} profile`"
+        :aria-label="linkLabel(item)"
         rel="noopener noreferrer"
         target="_blank"
       >
-        <Icon
-          :name="item.iconName"
-          class="social-icon"
-          :style="{ width: 'var(--_icon-size)', height: 'var(--_icon-size)' }"
-        />
+        <Icon :name="item.iconName" class="social-icon" aria-hidden="true" />
       </a>
     </li>
   </ul>
@@ -24,14 +20,18 @@ import type { ISocialIcon } from "~/types/components/social-icons-list.d";
 interface Props {
   items: ISocialIcon[];
   label?: string;
+  linkLabelTemplate?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: "Social media profiles",
+  linkLabelTemplate: "{network} profile (opens in a new tab)",
   styleClassPassthrough: () => [],
 });
 
+const linkLabel = (item: ISocialIcon) => item.label ?? props.linkLabelTemplate.replace("{network}", item.networkName);
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -45,12 +45,9 @@ watch(
 <style lang="css">
 @layer components {
   .social-icons-list {
-    --_icon-size: var(--theme-social-icon-size, 2.4rem);
-    --_gap: var(--theme-social-icon-gap, 1.2rem);
-
     display: flex;
     flex-wrap: wrap;
-    gap: var(--_gap);
+    gap: var(--social-icons-list-gap, 1.2rem);
     list-style: none;
     padding: 0;
     margin: 0;
@@ -69,19 +66,22 @@ watch(
 
         &:hover,
         &:focus-visible {
-          transform: scale(1.15);
-          opacity: 0.85;
+          transform: scale(var(--social-icons-list-hover-scale, 1.15));
+          opacity: var(--social-icons-list-hover-opacity, 0.85);
+
+          @media (prefers-reduced-motion: reduce) {
+            transform: none;
+          }
         }
 
         &:focus-visible {
-          outline: 2px solid currentColor;
+          outline: 2px solid var(--theme-ring, currentColor);
           outline-offset: 3px;
           border-radius: 2px;
         }
 
         .social-icon {
-          /* width: var(--_icon-size); */
-          /* height: var(--_icon-size); */
+          font-size: var(--social-icons-list-icon-size, 2.4rem);
         }
       }
     }

package/app/components/02.molecules/social-icons-list/stories/SocialIconsList.stories.ts

@@ -48,6 +48,10 @@ const meta: Meta<typeof SocialIconsList> = {
       control: "text",
       description: "aria-label for the list element",
     },
+    linkLabelTemplate: {
+      control: "text",
+      description: "aria-label for each link; {network} is replaced with the item's networkName",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -56,6 +60,7 @@ const meta: Meta<typeof SocialIconsList> = {
   args: {
     items: sampleItems,
     label: "Social media profiles",
+    linkLabelTemplate: "{network} profile (opens in a new tab)",
     styleClassPassthrough: ["m-40"],
   },
 };
@@ -84,7 +89,7 @@ export const LargeIcons: Story = {
     setup() {
       return { args };
     },
-    template: `<SocialIconsList v-bind="args" style="--theme-social-icon-size: 4rem;" />`,
+    template: `<SocialIconsList v-bind="args" style="--social-icons-list-icon-size: 4rem;" />`,
   }),
 };
 

package/app/components/02.molecules/social-icons-list/tests/SocialIconsList.spec.ts

@@ -62,7 +62,7 @@ describe("SocialIconsList", () => {
     });
     const links = wrapper.findAll(".social-icon-link");
     defaultItems.forEach((item, i) => {
-      expect(links[i]!.attributes("aria-label")).toBe(`${item.networkName} profile`);
+      expect(links[i]!.attributes("aria-label")).toBe(`${item.networkName} profile (opens in a new tab)`);
     });
   });
 
@@ -122,3 +122,24 @@ describe("SocialIconsList", () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
+
+describe("SocialIconsList link labels", () => {
+  it("uses linkLabelTemplate for each link", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: defaultItems, linkLabelTemplate: "Profil {network}" },
+    });
+    expect(wrapper.findAll(".social-icon-link")[0]!.attributes("aria-label")).toBe("Profil Facebook");
+  });
+
+  it("lets an item's own label override the template", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, {
+      props: { items: [{ ...defaultItems[0]!, label: "Our Facebook page" }] },
+    });
+    expect(wrapper.find(".social-icon-link").attributes("aria-label")).toBe("Our Facebook page");
+  });
+
+  it("hides the icon from assistive tech (the link carries the name)", async () => {
+    const wrapper = await mountSuspended(SocialIconsList, { props: { items: defaultItems } });
+    expect(wrapper.find(".social-icon").attributes("aria-hidden")).toBe("true");
+  });
+});

package/app/components/02.molecules/social-icons-list/tests/__snapshots__/SocialIconsList.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`SocialIconsList > renders the correct HTML structure 1`] = `
 "<ul class="social-icons-list" aria-label="Social media profiles">
-  <li class="social-icon-item"><a href="https://www.facebook.com/testprofile" class="social-icon-link" aria-label="Facebook profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:facebook social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
-  <li class="social-icon-item"><a href="https://www.instagram.com/testhandle" class="social-icon-link" aria-label="Instagram profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:instagram-icon social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
-  <li class="social-icon-item"><a href="https://www.youtube.com/@testchannel" class="social-icon-link" aria-label="YouTube profile" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:youtube-icon social-icon" aria-hidden="true" style="width: var(--_icon-size); height: var(--_icon-size);"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.facebook.com/testprofile" class="social-icon-link" aria-label="Facebook profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:facebook social-icon" aria-hidden="true"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.instagram.com/testhandle" class="social-icon-link" aria-label="Instagram profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:instagram-icon social-icon" aria-hidden="true"></span></a></li>
+  <li class="social-icon-item"><a href="https://www.youtube.com/@testchannel" class="social-icon-link" aria-label="YouTube profile (opens in a new tab)" rel="noopener noreferrer" target="_blank"><span class="iconify i-logos:youtube-icon social-icon" aria-hidden="true"></span></a></li>
 </ul>"
 `;