@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/carousel/Carousel.a11y.test.ts

@@ -1,53 +0,0 @@
-// Carousel a11y：走马灯（APG carousel）。
-// 根 role=region + aria-roledescription=carousel + aria-label；
-// 视口 role=group aria-roledescription=slides；每张 role=group aria-roledescription=slide + aria-label；
-// autoplay 提供可见播放/暂停按钮（WCAG 2.2.2，aria-pressed）；箭头/指示器按钮带 aria-label。
-// 用真实 slides Snippet[] 夹具（CarouselA11yFixture）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import CarouselFixture from './CarouselA11yFixture.svelte';
-
-describe('Carousel a11y', () => {
-  it('默认渲染：root role=region + 视口/slide group 语义，无 axe violations', async () => {
-    const { container } = renderWithLocale(CarouselFixture, {});
-
-    const region = container.querySelector('[role="region"]');
-    expect(region).not.toBeNull();
-    expect(region?.getAttribute('aria-roledescription')).toBe('carousel');
-    // 无显式 ariaLabel 时来自 i18n（验证 LocaleProvider 管线）。
-    expect(region?.getAttribute('aria-label')).toBeTruthy();
-
-    const viewport = container.querySelector('.cd-carousel__viewport');
-    expect(viewport?.getAttribute('role')).toBe('group');
-    expect(viewport?.getAttribute('aria-roledescription')).toBe('slides');
-
-    const slides = container.querySelectorAll('.cd-carousel__slide');
-    expect(slides.length).toBe(3);
-    expect(slides[0]?.getAttribute('aria-roledescription')).toBe('slide');
-    expect(slides[0]?.getAttribute('aria-label')).toBeTruthy();
-
-    // 非当前窗口的 slide 移出可达性树（aria-hidden + inert）。
-    expect(slides[1]?.getAttribute('aria-hidden')).toBe('true');
-
-    // 箭头按钮带 aria-label（来自 i18n）。
-    const prev = container.querySelector('.cd-carousel__arrow--prev');
-    expect(prev?.getAttribute('aria-label')).toBeTruthy();
-
-    await expectNoAxeViolations(container);
-  });
-
-  it('autoplay：可见播放/暂停按钮 aria-pressed（WCAG 2.2.2），无 axe violations', async () => {
-    const { container } = renderWithLocale(CarouselFixture, {
-      props: { autoplay: true, ariaLabel: 'Featured products' },
-    });
-    const region = container.querySelector('[role="region"]');
-    expect(region?.getAttribute('aria-label')).toBe('Featured products');
-
-    const playBtn = container.querySelector('.cd-carousel__play');
-    expect(playBtn).not.toBeNull();
-    expect(playBtn?.getAttribute('aria-pressed')).toBeTruthy();
-    expect(playBtn?.getAttribute('aria-label')).toBeTruthy();
-
-    await expectNoAxeViolations(container);
-  });
-});

package/src/carousel/Carousel.kbd.test.ts

@@ -1,67 +0,0 @@
-// Carousel 键盘 e2e（browser project / 真实 chromium），viewport 方向键切换 slide。
-// viewport（role=group, aria-roledescription=slides）count>perView 时 tabindex=0 可真实聚焦，
-// ←/→ 切换 active slide、Home/End 跳首末（loop=false 故有界）。非 active slide 设 inert。
-//   1. viewport 真实聚焦后 → 前进、← 后退（active slide data-slide 变化）。
-//   2. End 跳末张、Home 跳首张。
-//   3. 非 active slide 标记 inert（焦点/交互隔离）。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import CarouselKbdFixture from './CarouselKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-// 当前 active slide：slide 模式 perView=1 下唯一非 inert 的 slide，取其 data-slide。
-function activeSlide(viewport: HTMLElement): string | null {
-  const slides = Array.from(
-    viewport.querySelectorAll<HTMLElement>('[aria-roledescription="slide"]'),
-  );
-  const active = slides.find((s) => !s.hasAttribute('inert'));
-  return active?.querySelector('[data-slide]')?.getAttribute('data-slide') ?? null;
-}
-
-describe('Carousel 键盘 e2e（viewport 方向键切 slide）', () => {
-  it('viewport 聚焦 + ←/→ 切换 + Home/End 首末 + 非 active 项 inert', async () => {
-    const { baseElement } = renderKbdFixture(CarouselKbdFixture);
-
-    const viewport = baseElement.querySelector(
-      '[aria-roledescription="slides"]',
-    ) as HTMLElement;
-    expect(viewport).not.toBeNull();
-    expect(viewport.tabIndex).toBe(0);
-
-    // 初始 active slide 为第 0 张。
-    expect(activeSlide(viewport)).toBe('0');
-
-    // 3. 非 active slide（1、2）应 inert。
-    const slides = Array.from(
-      viewport.querySelectorAll<HTMLElement>('[aria-roledescription="slide"]'),
-    );
-    expect(slides.length).toBe(3);
-    expect(slides.filter((s) => s.hasAttribute('inert')).length).toBe(2);
-
-    // viewport 真实聚焦。
-    viewport.focus();
-    await expect.element(loc(viewport)).toHaveFocus();
-
-    // 1. → 前进到第 1 张；再 → 到第 2 张。
-    await userEvent.keyboard('{ArrowRight}');
-    expect(activeSlide(viewport)).toBe('1');
-    await userEvent.keyboard('{ArrowRight}');
-    expect(activeSlide(viewport)).toBe('2');
-    // ← 后退回第 1 张。
-    await userEvent.keyboard('{ArrowLeft}');
-    expect(activeSlide(viewport)).toBe('1');
-
-    // 2. Home 跳首张、End 跳末张。
-    await userEvent.keyboard('{Home}');
-    expect(activeSlide(viewport)).toBe('0');
-    await userEvent.keyboard('{End}');
-    expect(activeSlide(viewport)).toBe('2');
-
-    // 焦点始终在 viewport 上（方向键不偷焦点）。
-    await expect.element(loc(viewport)).toHaveFocus();
-  });
-});