From 1418c79b0426cbe32105fea69749663f8af4b301 Mon Sep 17 00:00:00 2001
From: nns <nns@edocs.kz>
Date: Sat, 30 May 2026 12:18:16 +0500
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20Modal=20=E2=80=94=20role=3Ddialog?=
 =?UTF-8?q?=20+=20aria-modal=20+=20aria-label=20=D0=BD=D0=B0=20=D0=BA?=
 =?UTF-8?q?=D1=80=D0=B5=D1=81=D1=82=D0=B8=D0=BA=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/food-market.web/src/components/Modal.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/food-market.web/src/components/Modal.tsx b/src/food-market.web/src/components/Modal.tsx
index 2c71f60..50dc671 100644
--- a/src/food-market.web/src/components/Modal.tsx
+++ b/src/food-market.web/src/components/Modal.tsx
@@ -21,14 +21,20 @@ export function Modal({ open, onClose, title, children, footer, width = 'max-w-l
   if (!open) return null
 
   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
         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()}
       >
         <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>
-          <button onClick={onClose} className="text-slate-400 hover:text-slate-600">
+          <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" aria-label="Закрыть">
             <X className="w-5 h-5" />
           </button>
         </div>