mirror of
https://github.com/screentinker/screentinker.git
synced 2026-05-15 07:32:23 -06:00
0bd34544e5
- Toast now announces via role="status"/aria-live="polite" by default, and role="alert"/aria-live="assertive" for errors. Screen readers previously got nothing when notifications appeared. - Move playlist-item flex-wrap:wrap from inline style into the @media (max-width: 768px) block so desktop rows don't wrap controls when the viewport is intermediate-narrow. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
23 lines
1.1 KiB
JavaScript
23 lines
1.1 KiB
JavaScript
export function showToast(message, type = 'info', duration = 4000) {
|
|
const container = document.getElementById('toastContainer');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
|
|
toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
|
|
toast.innerHTML = `
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
${type === 'success' ? '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' :
|
|
type === 'error' ? '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>' :
|
|
'<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>'}
|
|
</svg>
|
|
<span>${message}</span>
|
|
`;
|
|
container.appendChild(toast);
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
toast.style.transform = 'translateX(100%)';
|
|
toast.style.transition = 'all 0.3s ease';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, duration);
|
|
}
|