From bd4585b42362e72313ed09ca631f1d369a5251b1 Mon Sep 17 00:00:00 2001
From: KGFCH2 <babinbid05@gmail.com>
Date: Tue, 2 Jun 2026 14:03:16 +0530
Subject: [PATCH] accessibility: add dialog semantics and labels to task modal
 dialogs

---
 client/src/pages/app/TasksPage.jsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/app/TasksPage.jsx b/client/src/pages/app/TasksPage.jsx
index ae24bf2..5daaead 100644
--- a/client/src/pages/app/TasksPage.jsx
+++ b/client/src/pages/app/TasksPage.jsx
@@ -104,12 +104,18 @@ const CreateTaskModal = ({ events, onClose, onCreated }) => {
 			onClick={(e) => e.target === e.currentTarget && onClose()}>
 			<motion.div
 				className="modal"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="create-task-title"
 				style={{ maxWidth: 560 }}
 				initial={{ opacity: 0, scale: 0.95 }}
 				animate={{ opacity: 1, scale: 1 }}>
 				<div className="modal-header">
-					<h2 className="modal-title">Create Task</h2>
-					<button className="btn btn-ghost btn-sm" onClick={onClose}>
+					<h2 id="create-task-title" className="modal-title">Create Task</h2>
+					<button
+						className="btn btn-ghost btn-sm"
+						onClick={onClose}
+						aria-label="Close create task dialog">
 						<RiCloseLine />
 					</button>
 				</div>
@@ -310,11 +316,14 @@ const SubmitTaskModal = ({ task, onClose, onSubmitted }) => {
 			onClick={(e) => e.target === e.currentTarget && onClose()}>
 			<motion.div
 				className="modal"
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby="submit-task-title"
 				initial={{ opacity: 0, scale: 0.95 }}
 				animate={{ opacity: 1, scale: 1 }}>
 				<div className="modal-header">
 					<div>
-						<h2 className="modal-title">Submit Task</h2>
+						<h2 id="submit-task-title" className="modal-title">Submit Task</h2>
 						<p
 							style={{
 								fontSize: "0.82rem",
@@ -324,7 +333,10 @@ const SubmitTaskModal = ({ task, onClose, onSubmitted }) => {
 							{task.title}
 						</p>
 					</div>
-					<button className="btn btn-ghost btn-sm" onClick={onClose}>
+					<button
+						className="btn btn-ghost btn-sm"
+						onClick={onClose}
+						aria-label="Close submit task dialog">
 						<RiCloseLine />
 					</button>
 				</div>