iter(g338): toast 读屏可达与抢占播报
This commit is contained in:
@@ -9,7 +9,7 @@ const PAUSE_FLOOR = 400; // 恢复时的最短剩余毫秒:悬停前已近归
|
||||
/*** 确保堆叠容器存在:fixed 挂在 body 末尾,后续消息依次向上堆叠 ***/
|
||||
function ensureHost(): HTMLElement {
|
||||
if (host) return host;
|
||||
host = h('div', { class: 'ua-toast-host' });
|
||||
host = h('div', { class: 'ua-toast-host', 'aria-live': 'polite', 'aria-atomic': 'false' }); // live 容器兜底播报:条目自身 role 再定抢占级别
|
||||
document.body.appendChild(host);
|
||||
return host;
|
||||
}
|
||||
@@ -30,7 +30,7 @@ export function showToast(props: ToastProps): HTMLElement {
|
||||
let startedAt = 0; // 本段计时起点,用于折算剩余
|
||||
const item = h(
|
||||
'div',
|
||||
{ class: `ua-toast ua-toast-${props.variant ?? 'info'}${props.closable ? ' is-closable' : ''}${props.actionLabel ? ' is-action' : ''}`, role: 'status', id: `ua-toast-${++seq}` },
|
||||
{ class: `ua-toast ua-toast-${props.variant ?? 'info'}${props.closable ? ' is-closable' : ''}${props.actionLabel ? ' is-action' : ''}`, role: props.variant === 'danger' ? 'alert' : 'status', id: `ua-toast-${++seq}` }, // error 抢占播报,其余礼貌播报
|
||||
h('span', { class: 'ua-toast-msg' }, props.message),
|
||||
props.actionLabel
|
||||
? h('button', { type: 'button', class: 'ua-toast-action', onClick: () => { dismiss(item); props.onAction?.(); } }, props.actionLabel) // 操作按钮(如撤销):点完立即收起再回调
|
||||
|
||||
Reference in New Issue
Block a user