@codeforamerica/marcomms-design-system 1.21.2 → 1.22.1

package/src/components/tab-list.js

@@ -4,7 +4,9 @@ import { buttonStyles } from "./button";
 import "./tab";
 
 class TabList extends LitElement {
-  static properties = {};
+  static properties = {
+    _idCounter: { state: true },
+  };
   static styles = [
     commonStyles,
     buttonStyles,
@@ -46,42 +48,72 @@ class TabList extends LitElement {
 
   constructor() {
     super();
+    this._idCounter = 0;
   }
 
   firstUpdated() {
     this.addEventListener("click", this._onTabClick);
+    this.addEventListener("keydown", this._onTabKeydown);
     this.setAttribute("role", "tablist");
     this._setInitialAriaAttributes();
   }
 
+  _getTabPanelId(tab) {
+    return tab.getAttribute("panelid") || tab.getAttribute("panel-id") || "";
+  }
+
+  _ensureTabId(tab) {
+    if (!tab.id) {
+      this._idCounter += 1;
+      tab.id = `tab-${this._idCounter}`;
+    }
+  }
+
   _setInitialAriaAttributes() {
     const tabs = this.querySelectorAll("cfa-tab");
     tabs.forEach((tab, index) => {
+      const panelId = this._getTabPanelId(tab);
+
+      this._ensureTabId(tab);
       tab.setAttribute("role", "tab");
+      if (panelId) {
+        tab.setAttribute("aria-controls", panelId);
+      }
       tab.setAttribute("aria-selected", "false");
       tab.setAttribute("tabindex", "-1");
+      tab.active = false;
       if (index === 0) {
         tab.setAttribute("aria-selected", "true");
         tab.setAttribute("tabindex", "0");
+        tab.active = true;
       }
     });
   }
 
   _onTabClick(event) {
-    const tab = event.target.closest("cfa-tab");
+    const tab = event.composedPath().find((node) => node?.tagName === "CFA-TAB");
     if (tab) {
       this._setActiveTab(tab);
     }
   }
 
+  _onTabKeydown(event) {
+    if ((event.key === "Enter" || event.key === " ") && event.target?.tagName === "CFA-TAB") {
+      event.preventDefault();
+      this._setActiveTab(event.target);
+    }
+  }
+
   _setActiveTab(activeTab) {
     const tabs = this.querySelectorAll("cfa-tab");
     tabs.forEach((tab) => {
       tab.removeAttribute("active");
+      tab.active = false;
       tab.setAttribute("aria-selected", "false");
       tab.setAttribute("tabindex", "-1");
     });
     activeTab.setAttribute("active", "");
+    activeTab.active = true;
     activeTab.setAttribute("aria-selected", "true");
     activeTab.setAttribute("tabindex", "0");
 
@@ -102,7 +134,7 @@ class TabList extends LitElement {
 
   render() {
     return html`
-      <div class="tab-list" role="tablist">
+      <div class="tab-list">
         <slot></slot>
       </div>
     `;

package/src/components/tab-list.stories.js

@@ -16,3 +16,39 @@ const Template = () => html`
 
 export const Default = Template.bind({});
 Default.args = {};
+Default.play = async ({ canvasElement }) => {
+  // Locate the rendered tab-list host in the story canvas.
+  const tabList = canvasElement.querySelector("cfa-tab-list");
+  if (!tabList) {
+    throw new Error("Expected cfa-tab-list to render in story canvas");
+  }
+
+  // Wait one microtask so component lifecycle hooks can finalize ARIA setup.
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
+  const tabs = [...tabList.querySelectorAll("cfa-tab")];
+  if (tabs.length !== 4) {
+    throw new Error(`Expected 4 tabs, found ${tabs.length}`);
+  }
+
+  // Story-level accessibility assertion: container should expose tablist semantics.
+  if (tabList.getAttribute("role") !== "tablist") {
+    throw new Error("Expected cfa-tab-list to expose role=tablist");
+  }
+
+  // Initial state should select the first tab in roving tabindex pattern.
+  if (tabs[0].getAttribute("aria-selected") !== "true") {
+    throw new Error("Expected first tab to be selected initially");
+  }
+
+  // Interaction assertion: clicking a second tab should move active state.
+  tabs[1].click();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
+  if (tabs[1].getAttribute("aria-selected") !== "true") {
+    throw new Error("Expected second tab to become selected after click");
+  }
+  if (tabs[0].getAttribute("aria-selected") !== "false") {
+    throw new Error("Expected first tab to become unselected after click");
+  }
+};

package/src/components/tab-list.test.js

@@ -0,0 +1,134 @@
+import { describe, it, expect, vi } from "vitest";
+
+// Import custom elements once so they are registered in the test runtime.
+import "./tab-list";
+import "./tab";
+
+// Waits for microtasks and rendering work to settle.
+// Lit updates asynchronously, so this helper avoids race conditions.
+async function flushDomUpdates() {
+  await Promise.resolve();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+// Builds a realistic tab-list fixture with IDs matching production usage.
+function createTabListFixture() {
+  document.body.innerHTML = `
+    <cfa-tab-list>
+      <cfa-tab id="tab-overview">Overview</cfa-tab>
+      <cfa-tab id="tab-services">Services</cfa-tab>
+      <cfa-tab id="tab-contact">Contact</cfa-tab>
+    </cfa-tab-list>
+  `;
+
+  return document.querySelector("cfa-tab-list");
+}
+
+describe("cfa-tab-list", () => {
+  it("sets tab semantics and activates the first tab by default", async () => {
+    const tabList = createTabListFixture();
+
+    // Wait for the parent component to run firstUpdated lifecycle logic.
+    await tabList.updateComplete;
+    await flushDomUpdates();
+
+    const tabs = [...tabList.querySelectorAll("cfa-tab")];
+
+    // Parent role should communicate that this is a tablist region.
+    expect(tabList.getAttribute("role")).toBe("tablist");
+
+    // First tab should be keyboard reachable and selected by default.
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[0].getAttribute("tabindex")).toBe("0");
+
+    // Non-active tabs should be unfocused in roving tabindex model.
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("tabindex")).toBe("-1");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("activates clicked tab and dispatches tab-changed event with normalized ID", async () => {
+    const tabList = createTabListFixture();
+    await tabList.updateComplete;
+
+    const tabs = [...tabList.querySelectorAll("cfa-tab")];
+
+    // Capture event payload to assert the public contract for consumers.
+    let eventDetail = null;
+    tabList.addEventListener("tab-changed", (event) => {
+      eventDetail = event.detail;
+    });
+
+    // Simulate user intent by clicking a different tab.
+    tabs[1].click();
+    await flushDomUpdates();
+
+    // Clicked tab should now be selected and keyboard reachable.
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("tabindex")).toBe("0");
+    expect(tabs[1].hasAttribute("active")).toBe(true);
+
+    // Previously active tab should now be inactive.
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].getAttribute("tabindex")).toBe("-1");
+
+    // Component strips "tab-" prefix and emits clean ID for listeners.
+    expect(eventDetail).toEqual({ id: "services" });
+  });
+});
+
+describe("cfa-tab", () => {
+  it("moves focus to the next tab button on ArrowRight", async () => {
+    const tabList = createTabListFixture();
+    await tabList.updateComplete;
+    await flushDomUpdates();
+
+    const tabs = [...tabList.querySelectorAll("cfa-tab")];
+
+    // Host tabs carry roving focus semantics.
+    const secondFocusSpy = vi.spyOn(tabs[1], "focus");
+
+    // ArrowRight should move focus from first tab to second tab.
+    // We dispatch on the host because the component attaches keydown there.
+    tabs[0].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+
+    expect(secondFocusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("moves focus to the previous tab button on ArrowLeft", async () => {
+    const tabList = createTabListFixture();
+    await tabList.updateComplete;
+    await flushDomUpdates();
+
+    const tabs = [...tabList.querySelectorAll("cfa-tab")];
+
+    // ArrowLeft from first tab should wrap focus to the final tab.
+    // This verifies circular keyboard navigation behavior.
+    const lastFocusSpy = vi.spyOn(tabs[2], "focus");
+    tabs[0].dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+
+    expect(lastFocusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("moves focus to first and last tab buttons with Home and End keys", async () => {
+    const tabList = createTabListFixture();
+    await tabList.updateComplete;
+    await flushDomUpdates();
+
+    const tabs = [...tabList.querySelectorAll("cfa-tab")];
+
+    const firstFocusSpy = vi.spyOn(tabs[0], "focus");
+    const lastFocusSpy = vi.spyOn(tabs[2], "focus");
+
+    // Home should jump focus to first tab in the tab sequence.
+    // We dispatch on the host because the component attaches keydown there.
+    tabs[1].dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true }));
+
+    // End should jump focus to the final tab in the tab sequence.
+    tabs[1].dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true }));
+
+    expect(firstFocusSpy).toHaveBeenCalledTimes(1);
+    expect(lastFocusSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/tab.js

@@ -12,31 +12,39 @@ class Tab extends LitElement {
     commonStyles,
     typographyStyles,
     css`
-      button {
+      .tab {
         background: none;
         border: 0;
         box-shadow: inset 0 calc(-1 * var(--hairline)) 0 0 var(--gray-40);
         color: var(--gray-80);
         cursor: pointer;
+        display: block;
         font-family: var(--font-family-sans-serif);
         font-size: var(--font-size-small);
         font-weight: normal;
         padding: var(--spacing-component-2) var(--spacing-component-3)
           calc(var(--spacing-component-2) + var(--medium));
       }
-      button:focus {
+
+      :host(:focus) .tab {
         background-color: var(--focus-color);
         outline: none;
       }
-      button:not(.active):hover {
+
+      .tab:not(.active):hover {
         box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-40);
         color: var(--black);
       }
-      button.active {
+
+      .tab.active {
         box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-60);
         color: var(--black);
         font-weight: bold;
       }
+
+      :host {
+        display: inline-block;
+      }
     `,
   ];
 
@@ -57,18 +65,22 @@ class Tab extends LitElement {
 
     switch (event.key) {
       case "ArrowLeft":
+        event.preventDefault();
         newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
-        tabs[newIndex].shadowRoot.querySelector("button").focus();
+        tabs[newIndex].focus();
         break;
       case "ArrowRight":
+        event.preventDefault();
         newIndex = (currentIndex + 1) % tabs.length;
-        tabs[newIndex].shadowRoot.querySelector("button").focus();
+        tabs[newIndex].focus();
         break;
       case "Home":
-        tabs[0].shadowRoot.querySelector("button").focus();
+        event.preventDefault();
+        tabs[0].focus();
         break;
       case "End":
-        tabs[tabs.length - 1].shadowRoot.querySelector("button").focus();
+        event.preventDefault();
+        tabs[tabs.length - 1].focus();
         break;
       default:
         break;
@@ -77,15 +89,11 @@ class Tab extends LitElement {
 
   render() {
     return html`
-      <button
-        role="tab"
-        aria-selected="${this.active ? "true" : "false"}"
-        aria-controls="${this.panelId}"
-        class="${this.active ? "active" : ""}"
-        tabindex="${this.active ? "0" : "-1"}"
+      <span
+        class="tab ${this.active ? "active" : ""}"
       >
         <slot></slot>
-      </button>
+      </span>
     `;
   }
 }

package/src/components/transcript.js

@@ -31,8 +31,8 @@ class Transcript extends LitElement {
 
   render() {
     return html`
-      <div class="label eyebrow-with-line">Transcript</div>
-      <div class="text small">
+      <div id="transcript-label" class="label eyebrow-with-line">Transcript</div>
+      <div class="text small" tabindex="0" role="region" aria-labelledby="transcript-label">
         <slot />
       </div>
     `;

package/src/components/transcript.test.js

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { axe } from "vitest-axe";
+
+// Register component under test.
+import "./transcript";
+
+// Builds a compact transcript fixture with realistic content.
+async function createTranscriptFixture() {
+  document.body.innerHTML = `
+    <cfa-transcript>
+      <p><b>[00:00:01]</b> Example transcript content.</p>
+      <p><b>[00:00:12]</b> Additional transcript line.</p>
+    </cfa-transcript>
+  `;
+
+  const transcript = document.querySelector("cfa-transcript");
+  await transcript.updateComplete;
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
+  return transcript;
+}
+
+// Runs axe with a jsdom-safe configuration.
+async function runAxe(container) {
+  return axe(container, {
+    rules: {
+      "color-contrast": { enabled: false },
+    },
+  });
+}
+
+describe("cfa-transcript", () => {
+  it("renders transcript label and slotted content container", async () => {
+    const transcript = await createTranscriptFixture();
+
+    const label = transcript.shadowRoot.querySelector(".label");
+    const text = transcript.shadowRoot.querySelector(".text");
+
+    // Component should present a visible transcript heading.
+    expect(label.textContent.trim()).toBe("Transcript");
+
+    // Scrollable text region should render to host slotted content.
+    expect(text).toBeTruthy();
+    expect(transcript.querySelectorAll("p").length).toBe(2);
+  });
+
+  it("has no unexpected accessibility violations", async () => {
+    const transcript = await createTranscriptFixture();
+    const results = await runAxe(transcript);
+
+    expect(results.violations).toHaveLength(0);
+  });
+});