@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/list/List.a11y.test.ts

@@ -1,69 +0,0 @@
-// List a11y：列表。
-// 非 selectable：原生 ul/li 列表语义（role=list / listitem 隐式）。
-// selectable：容器 role=listbox（multiple 加 aria-multiselectable），行 role=option + aria-selected，
-// 行 tabindex roving（仅一行为 Tab 停靠点）。
-// 用数据驱动夹具（ListA11yFixture）渲染真实行。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import ListFixture from './ListA11yFixture.svelte';
-
-describe('List a11y', () => {
-  it('默认渲染：原生 ul/li 列表语义，无 axe violations', async () => {
-    const { container } = renderWithLocale(ListFixture, {
-      props: { bordered: true, header: 'Users' },
-    });
-    const ul = container.querySelector('ul.cd-list__items');
-    expect(ul).not.toBeNull();
-    // 非 selectable：不设显式 role（保留原生 list 语义）。
-    expect(ul?.getAttribute('role')).toBeNull();
-    expect(container.querySelectorAll('li.cd-list__item').length).toBe(3);
-    await expectNoAxeViolations(container);
-  });
-
-  // 结构断言（不含 axe）：selectable 的 listbox/option/aria-selected/roving 语义确实就位。
-  // axe 0-violation 断言因下述两个真实组件缺口被拆到 it.skip，故此处只验证 ARIA 结构。
-  it('selectable=single：role=listbox + option + aria-selected + roving 结构', async () => {
-    const { container } = renderWithLocale(ListFixture, {
-      props: { selectable: 'single', defaultSelectedKeys: ['u2'] },
-    });
-    const listbox = container.querySelector('[role="listbox"]');
-    expect(listbox).not.toBeNull();
-    expect(listbox?.getAttribute('aria-multiselectable')).toBeNull();
-
-    const options = container.querySelectorAll('[role="option"]');
-    expect(options.length).toBe(3);
-    const selected = container.querySelectorAll('[role="option"][aria-selected="true"]');
-    expect(selected.length).toBe(1);
-    expect(selected[0]?.textContent).toContain('Alan Turing');
-
-    // roving tabindex：仅一行为 Tab 停靠点。
-    const zero = [...options].filter((o) => o.getAttribute('tabindex') === '0');
-    expect(zero.length).toBe(1);
-  });
-
-  it('selectable=multiple：listbox aria-multiselectable=true 结构', async () => {
-    const { container } = renderWithLocale(ListFixture, {
-      props: { selectable: 'multiple', defaultSelectedKeys: ['u1', 'u3'] },
-    });
-    const listbox = container.querySelector('[role="listbox"]');
-    expect(listbox?.getAttribute('aria-multiselectable')).toBe('true');
-    const selected = container.querySelectorAll('[role="option"][aria-selected="true"]');
-    expect(selected.length).toBe(2);
-  });
-
-  // 修复后：listbox 经 aria-label（List.selectableLabel）有可访问名；option 内勾选框改纯视觉
-  // （aria-hidden + 无 input），选中态由行 aria-selected 表达，无 nested-interactive。
-  it('selectable=single：axe 0 violations（listbox 可访问名 + 纯视觉勾选框）', async () => {
-    const { container } = renderWithLocale(ListFixture, {
-      props: { selectable: 'single', defaultSelectedKeys: ['u2'] },
-    });
-    await expectNoAxeViolations(container);
-  });
-
-  it('selectable=multiple：axe 0 violations（listbox 可访问名 + 纯视觉勾选框）', async () => {
-    const { container } = renderWithLocale(ListFixture, {
-      props: { selectable: 'multiple', defaultSelectedKeys: ['u1', 'u3'] },
-    });
-    await expectNoAxeViolations(container);
-  });
-});

package/src/list/List.bench.ts

@@ -1,26 +0,0 @@
-// List 渲染基准（最小骨架，趋势参考，不接 CI 门禁）。
-// 在 jsdom 下真实 mount List（数据驱动 dataSource + renderItem），测挂载耗时。
-// 仅供观察回归趋势；硬门禁是 size-limit 体积预算（perf:size / perf:check）。
-import { bench, describe } from 'vitest';
-import { render, cleanup } from '@testing-library/svelte';
-import ListBenchFixture from './ListBenchFixture.svelte';
-
-describe('List render', () => {
-  bench(
-    'mount 100 items',
-    () => {
-      render(ListBenchFixture, { props: { count: 100 } });
-      cleanup();
-    },
-    { time: 300 },
-  );
-
-  bench(
-    'mount 500 items',
-    () => {
-      render(ListBenchFixture, { props: { count: 500 } });
-      cleanup();
-    },
-    { time: 500 },
-  );
-});

package/src/list/List.kbd.test.ts

@@ -1,71 +0,0 @@
-// List 键盘 e2e（browser project / 真实 chromium）。
-// selectable="single" → role=listbox / 行 role=option，roving 单停靠点（真实焦点）。
-// 测真实焦点移动 + Space 选中——jsdom 测不了（命令式 focus() 不可靠）：
-//   1. roving 单停靠点：Tab 进入只停在一行（其余 tabindex=-1，默认首行）。
-//   2. ↑↓ 真实移动焦点到相邻行（无 wrap：clamp，源码 Math.min/max）。
-//   3. Home/End 跳首/末行。
-//   4. Space 选中当前焦点行（aria-selected=true）。
-//
-// 真实焦点断言用 page locator 的 .toHaveFocus()。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import ListKbdFixture from './ListKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('List 键盘 e2e（selectable listbox roving，真实焦点）', () => {
-  it('Tab 单停靠点 + ↑↓ 移动焦点（clamp）+ Home/End + Space 选中', async () => {
-    const { baseElement } = renderKbdFixture(ListKbdFixture);
-
-    const listbox = baseElement.querySelector('[role="listbox"]') as HTMLElement;
-    expect(listbox).toBeTruthy();
-    const rows = Array.from(baseElement.querySelectorAll<HTMLElement>('[role="option"]'));
-    expect(rows.length).toBe(3);
-    const [alpha, bravo, charlie] = rows as [HTMLElement, HTMLElement, HTMLElement];
-
-    // 1. roving 单停靠点：默认首行为 tabindex=0，其余 -1。
-    expect(rows.filter((el) => el.tabIndex === 0).length).toBe(1);
-    expect(alpha.tabIndex).toBe(0);
-
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(alpha)).toHaveFocus();
-
-    // 2. ↓ 移动焦点到下一行（真实焦点 + 停靠点同步）。
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(bravo)).toHaveFocus();
-    expect(bravo.tabIndex).toBe(0);
-    expect(alpha.tabIndex).toBe(-1);
-
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(charlie)).toHaveFocus();
-
-    // 无 wrap：末行再 ↓ 停在末行（clamp）。
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(charlie)).toHaveFocus();
-
-    // ↑ 回退；首行再 ↑ 停在首行（clamp）。
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(bravo)).toHaveFocus();
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(alpha)).toHaveFocus();
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(alpha)).toHaveFocus();
-
-    // 3. Home/End 跳首/末。
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(charlie)).toHaveFocus();
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(alpha)).toHaveFocus();
-
-    // 4. Space 选中当前焦点行（aria-selected=true）。single 模式互斥。
-    expect(alpha.getAttribute('aria-selected')).toBe('false');
-    await userEvent.keyboard(' ');
-    await expect.element(loc(alpha)).toHaveAttribute('aria-selected', 'true');
-  });
-});