From abe9633e8939421ff92273bfb2cd4b8c8c8dc263 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 27 May 2026 20:42:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Duplicate?=
 =?UTF-8?q?=20Resume=20modal=20accessibility=20and=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added standard accessibility attributes and UX interactions to the Duplicate Resume modal to make it usable by screen readers and power users.

- Added role="dialog", aria-modal="true", and aria-labelledby
- Added Escape key listener to close the modal
- Added backdrop click handling to close the modal

Co-authored-by: aafre <8656674+aafre@users.noreply.github.com>
---
 .jules/palette.md                             |  3 +++
 .../src/components/DuplicateResumeModal.tsx   | 25 ++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..8bf0327b
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-27 - Duplicate Resume Modal Accessibility
+**Learning:** Custom modals like `DuplicateResumeModal` require explicit ARIA attributes (`role="dialog"`, `aria-modal="true"`, `aria-labelledby`) and keyboard interactions (Escape key to close, backdrop click to close) to be fully accessible and provide a smooth user experience.
+**Action:** When implementing custom modals, always include these standard accessibility and interaction patterns rather than just visual styling.
diff --git a/resume-builder-ui/src/components/DuplicateResumeModal.tsx b/resume-builder-ui/src/components/DuplicateResumeModal.tsx
index eacdfd6c..108e4901 100644
--- a/resume-builder-ui/src/components/DuplicateResumeModal.tsx
+++ b/resume-builder-ui/src/components/DuplicateResumeModal.tsx
@@ -24,6 +24,16 @@ export function DuplicateResumeModal({
     }
   }, [resume]);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onCancel();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onCancel]);
+
   if (!isOpen || !resume) return null;
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -34,8 +44,17 @@ export function DuplicateResumeModal({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={onCancel}
+    >
+      <div
+        className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="duplicate-modal-title"
+      >
         <div className="p-6">
           <div className="flex items-center gap-3 mb-4">
             <div className="flex-shrink-0">
@@ -54,7 +73,7 @@ export function DuplicateResumeModal({
               </svg>
             </div>
             <div>
-              <h2 className="text-xl font-bold text-gray-900">Duplicate Resume</h2>
+              <h2 id="duplicate-modal-title" className="text-xl font-bold text-gray-900">Duplicate Resume</h2>
               <p className="text-sm text-gray-500 mt-1">Create a copy with a new name</p>
             </div>
           </div>