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.
ci / build-backend (push) Successful in 1m34s
ci / build-frontend (push) Successful in 1m0s
ci / tests (push) Successful in 1m58s
ci / sonar (push) Successful in 4m13s

This commit is contained in:
Leonid Pershin
2026-07-26 22:35:36 +03:00
parent b0740503bb
commit 0f0657e523
14 changed files with 75 additions and 26 deletions
+16 -3
View File
@@ -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>
)
}