Refactor Program.cs to use async Run method for improved performance. Update index.html to specify language attribute for accessibility. Enhance BumperTemplateEditor and ScheduleGrid components by replacing divs with buttons for better keyboard accessibility. Improve TemplatePreview sorting logic and optimize episode regex handling. Add close button to ToastItem for better user interaction. Update localization files to include 'close' translations. Refactor CardTitle to ensure screen reader compatibility by explicitly rendering children.
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
import { X } from 'lucide-react'
|
||||
import { useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { cn } from '@/shared/lib/cn'
|
||||
import { useToastContext } from './toast-store'
|
||||
|
||||
@@ -25,22 +27,33 @@ function ToastItem({
|
||||
variant: 'default' | 'success' | 'error'
|
||||
onDismiss: (id: number) => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => onDismiss(id), 4000)
|
||||
return () => clearTimeout(timeout)
|
||||
}, [id, onDismiss])
|
||||
|
||||
// Живой регион остаётся обычным контейнером, а закрытие висит на настоящей кнопке: обработчик
|
||||
// клика на самом сообщении недоступен с клавиатуры, и скринридер о нём никак не сообщает.
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'crt-panel pointer-events-auto rounded-md px-4 py-3 text-sm shadow-lg',
|
||||
'crt-panel pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm shadow-lg',
|
||||
variant === 'success' && 'border-primary/60',
|
||||
variant === 'error' && 'border-red-700/60 text-red-400',
|
||||
)}
|
||||
onClick={() => onDismiss(id)}
|
||||
role="status"
|
||||
>
|
||||
{message}
|
||||
<span className="flex-1">{message}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDismiss(id)}
|
||||
aria-label={t('common.close')}
|
||||
className="shrink-0 opacity-60 hover:opacity-100"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user