From 412911a839d8b38fc00bdaf817383fca9f808749 Mon Sep 17 00:00:00 2001
From: Daksha1611 <mehtadaksha1611@gmail.com>
Date: Fri, 14 Aug 2026 21:39:10 +0530
Subject: [PATCH] fix(a11y): make meeting-minutes modal keyboard-operable

The dialog was toggled via the `open` attribute instead of showModal()/close(),
so Escape didn't close it and the close icon was a non-focusable <div onClick>.
Keyboard-only users had no way to close the modal once opened.

- Drive the dialog with showModal()/close() so native Escape-to-close and
  focus-trapping work, and sync state back via the dialog's onClose event.
- Replace the close-icon <div onClick> with a real <button> so it's reachable
  and operable via keyboard.

Verified with a headless Chrome session driving real keyboard/focus events:
Escape and Enter-on-close-button both close the modal, and the dialog now
opens via showModal() (matches :modal).

Fixes #686

Signed-off-by: Daksha1611 <mehtadaksha1611@gmail.com>
---
 .../CommunityMeetingsCardGrid/index.tsx       | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/CommunityMeetingsCardGrid/index.tsx b/src/components/layout/CommunityMeetingsCardGrid/index.tsx
index 31615cf0c2..96eab3a16b 100644
--- a/src/components/layout/CommunityMeetingsCardGrid/index.tsx
+++ b/src/components/layout/CommunityMeetingsCardGrid/index.tsx
@@ -72,18 +72,34 @@ function CommunityMeetingsCardGrid({ cards }) {
   const [modalHeader, setModalHeader] = useState<ReactNode | undefined>(undefined);
   const [meetinNotesMD, setMeetinNotesMD] = useState<ReactNode | undefined>(undefined);
   const meetingMinutesRef = [useRef(), useRef()];
-  const modalRef = useRef();
+  const modalRef = useRef<HTMLDialogElement>(null);
 
   toggleModalOpen(modalRef, () => setIsModalOpen(false));
 
+  useEffect(() => {
+    const dialogEl = modalRef.current;
+    if (!dialogEl) {
+      return;
+    }
+    if (isModalOpen && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!isModalOpen && dialogEl.open) {
+      dialogEl.close();
+    }
+  }, [isModalOpen]);
+
   const prepareModalHeader = (text: string, date: string) => {
     const modalHeader: ReactNode = (
       <div className="modal-header dark:bg-gray-500 dark:shadow-none">
         <h3 className="modal-header-title dark:text-gray-900">{text}</h3>
         <h3 className="modal-header-date dark:text-gray-900">{date}</h3>
-        <div className="cursor-pointer" onClick={() => setIsModalOpen(false)}>
+        <button
+          type="button"
+          className="cursor-pointer border-0 bg-transparent p-0"
+          onClick={() => setIsModalOpen(false)}
+          aria-label="Close meeting minutes">
           <CloseIcon />
-        </div>
+        </button>
       </div>
     );
     setModalHeader(modalHeader);
@@ -222,8 +238,8 @@ function CommunityMeetingsCardGrid({ cards }) {
             />
             <dialog
               className="bg-stone-200 w-90-screen h-80-screen fixed top-20 z-50 max-h-screen w-fit border-4 border-purple-100"
-              open={isModalOpen}
-              ref={modalRef}>
+              ref={modalRef}
+              onClose={() => setIsModalOpen(false)}>
               <div className="modal-content flex flex-col">
                 {modalHeader}
                 <div className="md-wrapper overflow-y-auto scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 dark:bg-gray-700  dark:text-gray-50 dark:shadow-none">