temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g87): 轮播补焦点暂停与轮播语义

Browse Source
This commit is contained in:
HIsheR
2026-10-26 13:06:12 +08:00
parent 9ff2c7b651
commit cf4ec96946
3 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/src/carousel.ts
+9 -6
View File
@@ -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;
}