From 6d1d8f405ff38cb086a1d3d67502850e1bb24ae3 Mon Sep 17 00:00:00 2001
From: OpenClaw Subagent <subagent@openclaw.com>
Date: Thu, 19 Mar 2026 14:06:08 +0100
Subject: [PATCH] fix: add aria-modal and aria-label='Close' to modal dialogs
 (TDD)

---
 public/src/index.html                     |  8 ++++----
 src/__tests__/modal-accessibility.test.ts | 24 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 src/__tests__/modal-accessibility.test.ts

diff --git a/public/src/index.html b/public/src/index.html
index 629c9d3..5d21696 100644
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -595,9 +595,9 @@ html, body {
 </footer>
 
 <!-- Recovery Modal -->
-<div class="modal-overlay" id="recoverModal" role="dialog" aria-label="Recover API key">
+<div class="modal-overlay" id="recoverModal" role="dialog" aria-modal="true" aria-label="Recover API key">
   <div class="modal">
-    <button class="close" id="btn-close-recover">&times;</button>
+    <button class="close" id="btn-close-recover" aria-label="Close">&times;</button>
 
     <div id="recoverInitial" class="active">
       <h2>Recover your API key</h2>
@@ -639,9 +639,9 @@ html, body {
 
 
 <!-- Email Change Modal -->
-<div class="modal-overlay" id="emailChangeModal" role="dialog" aria-label="Change email">
+<div class="modal-overlay" id="emailChangeModal" role="dialog" aria-modal="true" aria-label="Change email">
   <div class="modal">
-    <button class="close" id="btn-close-email-change">&times;</button>
+    <button class="close" id="btn-close-email-change" aria-label="Close">&times;</button>
 
     <div id="emailChangeInitial" class="active">
       <h2>Change your email</h2>
diff --git a/src/__tests__/modal-accessibility.test.ts b/src/__tests__/modal-accessibility.test.ts
new file mode 100644
index 0000000..f7b7601
--- /dev/null
+++ b/src/__tests__/modal-accessibility.test.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import fs from "fs";
+import path from "path";
+
+const indexHtml = fs.readFileSync(path.join(__dirname, "../../public/src/index.html"), "utf-8");
+
+describe("Modal accessibility attributes", () => {
+  it("close buttons must have aria-label='Close'", () => {
+    // All close buttons in modals should have aria-label="Close"
+    const closeButtons = indexHtml.match(/<button[^>]*class="close"[^>]*>/g) || [];
+    expect(closeButtons.length).toBeGreaterThan(0);
+    for (const btn of closeButtons) {
+      expect(btn).toContain('aria-label="Close"');
+    }
+  });
+
+  it("modal overlays with role='dialog' must have aria-modal='true'", () => {
+    const dialogs = indexHtml.match(/<div[^>]*role="dialog"[^>]*>/g) || [];
+    expect(dialogs.length).toBeGreaterThan(0);
+    for (const dialog of dialogs) {
+      expect(dialog).toContain('aria-modal="true"');
+    }
+  });
+});