diff --git a/.ua/backlog.json b/.ua/backlog.json index 284b453..004a90c 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1052,6 +1052,14 @@ "acceptance": "overlay 新增 bindOutside(root, isOpen, close):仅展开期间挂全局 click、收起即摘,内部点击直接返回;8 个弹层全部改用它并删掉各自的重复实现;popover 删掉空 keydown,点弹层内部不再误关;npm run check 全绿", "notes": "自补:稳健性 + 去重;展开动作本身也是 click,靠 root.contains 卫语句避免刚开就被关", "status": "done" + }, + { + "id": "g87", + "title": "轮播补焦点暂停与轮播语义", + "motivation": "自动播放只在 pointerenter 暂停——键盘用户没有 hover,Tab 进轮播后幻灯片照样自己换页,正在读的内容被抽走(WCAG 2.2.2);区域与幻灯片也只有笼统的 aria-label,读屏不知道这是轮播的第几张", + "acceptance": "焦点进入(focusin)与移出(focusout)同样暂停自动播放,两者都不在才前进;区域补 aria-roledescription=轮播,每张补 aria-roledescription=幻灯片 且标签为「第 x 张,共 n 张」;演示描述同步;npm run check 全绿", + "notes": "自补:无障碍;hover 与 focus 分开计数,避免一个 pointerleave 就误解除暂停", + "status": "open" } ] } diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 55c44c0..9484343 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -667,7 +667,7 @@ const content = h( section( 'sec-carousel', '轮播', - 'carousel:items 横排位移,指示点 / 箭头 / ←→ 键切换,autoplay 毫秒自动前进且悬停暂停;index 传信号即可外部受控。', + 'carousel:items 横排位移,指示点 / 箭头 / ←→ 键切换,autoplay 毫秒自动前进,悬停或焦点进入即暂停;index 传信号即可外部受控。', h( 'div', { class: 'row' }, diff --git a/packages/skin/ui/src/carousel.ts b/packages/skin/ui/src/carousel.ts index 29f1698..9f521a5 100644 --- a/packages/skin/ui/src/carousel.ts +++ b/packages/skin/ui/src/carousel.ts @@ -19,7 +19,7 @@ export function carousel(props: CarouselProps): HTMLElement { }; props.items.forEach((item, i) => { - track.append(h('div', { class: 'ua-carousel-slide', role: 'group', 'aria-label': `第 ${i + 1} 张` }, item)); + track.append(h('div', { class: 'ua-carousel-slide', role: 'group', 'aria-roledescription': '幻灯片', 'aria-label': `第 ${i + 1} 张,共 ${total} 张` }, item)); const dot = h('button', { type: 'button', class: 'ua-carousel-dot', 'aria-label': `跳到第 ${i + 1} 张`, onClick: () => go(i) }) as HTMLButtonElement; dots.push(dot); dotsBar.append(dot); @@ -31,7 +31,7 @@ export function carousel(props: CarouselProps): HTMLElement { const root = h( 'div', - { class: 'ua-carousel', tabindex: '0', role: 'region', 'aria-label': props.label ?? '轮播' }, + { class: 'ua-carousel', tabindex: '0', role: 'region', 'aria-roledescription': '轮播', 'aria-label': props.label ?? '轮播' }, track, arrow(-1, '上一张'), arrow(1, '下一张'), @@ -56,10 +56,13 @@ export function carousel(props: CarouselProps): HTMLElement { }); if (props.autoplay && total > 1) { - let paused = false; // 悬停期间暂停自动播放 - root.addEventListener('pointerenter', () => { paused = true; }); - root.addEventListener('pointerleave', () => { paused = false; }); - window.setInterval(() => { if (!paused) go(index() + 1); }, props.autoplay); + let hover = false; // 悬停中 + let focused = false; // 焦点在轮播内(键盘用户没有 hover,必须单独计) + root.addEventListener('pointerenter', () => { hover = true; }); + root.addEventListener('pointerleave', () => { hover = false; }); + root.addEventListener('focusin', () => { focused = true; }); + root.addEventListener('focusout', () => { focused = false; }); + window.setInterval(() => { if (!hover && !focused) go(index() + 1); }, props.autoplay); // 两者都不在才前进 } return root; }