nns/food-market
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(a11y): Modal — role=dialog + aria-modal + aria-label на крестике

Browse source 
Найдено через UI-deep тестирование: Modal не имел ARIA-роли, screen
reader не определял его как диалог. Также добавил aria-label='Закрыть'
на X-кнопку.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
nns 2026-05-30 12:18:16 +05:00
parent 64af42167b
commit 1418c79b04
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/food-market.web/src/components/Modal.tsx
View file

@ -21,14 +21,20 @@ export function Modal({ open, onClose, title, children, footer, width = 'max-w-l
if (!open) return null if (!open) return null
return ( return (
<div className="fixed inset-0 z-50 flex items-stretch sm:items-start justify-center sm:p-4 overflow-y-auto bg-slate-900/50 backdrop-blur-sm" onClick={onClose}> <div
className="fixed inset-0 z-50 flex items-stretch sm:items-start justify-center sm:p-4 overflow-y-auto bg-slate-900/50 backdrop-blur-sm"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<div <div
className={`w-full ${width} min-h-full sm:min-h-0 sm:mt-16 bg-white dark:bg-slate-900 sm:rounded-xl shadow-xl flex flex-col`} className={`w-full ${width} min-h-full sm:min-h-0 sm:mt-16 bg-white dark:bg-slate-900 sm:rounded-xl shadow-xl flex flex-col`}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-200 dark:border-slate-800"> <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-200 dark:border-slate-800">
<h2 className="font-semibold text-slate-900 dark:text-slate-100">{title}</h2> <h2 id="modal-title" className="font-semibold text-slate-900 dark:text-slate-100">{title}</h2>
<button onClick={onClose} className="text-slate-400 hover:text-slate-600"> <button onClick={onClose} className="text-slate-400 hover:text-slate-600" aria-label="Закрыть">
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</button> </button>
</div> </div>