From 7a102066174017dad0681e141617ae523f278410 Mon Sep 17 00:00:00 2001
From: koko210Serve <koko.yordanov@proton.me>
Date: Sat, 28 Feb 2026 23:31:28 +0200
Subject: [PATCH] feat: modal UX - close on Escape key and backdrop click, add
 ARIA attributes

- Escape key closes any open memory modal
- Clicking the dark backdrop behind a modal closes it
- Add role=dialog, aria-modal, aria-label for accessibility
---
 bot/static/index.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/bot/static/index.html b/bot/static/index.html
index 0748199..7faf356 100644
--- a/bot/static/index.html
+++ b/bot/static/index.html
@@ -5842,6 +5842,37 @@ function closeCreateMemoryModal() {
   document.getElementById('create-memory-modal').style.display = 'none';
 }
 
+// Modal keyboard and backdrop close handlers
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') {
+    const editModal = document.getElementById('edit-memory-modal');
+    const createModal = document.getElementById('create-memory-modal');
+    if (editModal && editModal.style.display !== 'none') closeEditMemoryModal();
+    if (createModal && createModal.style.display !== 'none') closeCreateMemoryModal();
+  }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  const editModal = document.getElementById('edit-memory-modal');
+  const createModal = document.getElementById('create-memory-modal');
+  if (editModal) {
+    editModal.setAttribute('role', 'dialog');
+    editModal.setAttribute('aria-modal', 'true');
+    editModal.setAttribute('aria-label', 'Edit Memory');
+    editModal.addEventListener('click', function(e) {
+      if (e.target === this) closeEditMemoryModal();
+    });
+  }
+  if (createModal) {
+    createModal.setAttribute('role', 'dialog');
+    createModal.setAttribute('aria-modal', 'true');
+    createModal.setAttribute('aria-label', 'Create Memory');
+    createModal.addEventListener('click', function(e) {
+      if (e.target === this) closeCreateMemoryModal();
+    });
+  }
+});
+
 async function saveNewMemory() {
   const collection = document.getElementById('create-memory-collection').value;
   const content = document.getElementById('create-memory-content').value.trim();