openclawd/docfast
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: add aria-modal and aria-label='Close' to modal dialogs (TDD)

Browse source
This commit is contained in:
OpenClaw Subagent 2026-03-19 14:06:08 +01:00
parent b58695bdb8
commit 6d1d8f405f
2 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/src/index.html
View file

@ -595,9 +595,9 @@ html, body {
</footer> </footer>
<!-- Recovery Modal --> <!-- 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"> <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"> <div id="recoverInitial" class="active">
<h2>Recover your API key</h2> <h2>Recover your API key</h2>
@ -639,9 +639,9 @@ html, body {
<!-- Email Change Modal --> <!-- 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"> <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"> <div id="emailChangeInitial" class="active">
<h2>Change your email</h2> <h2>Change your email</h2>

24
src/__tests__/modal-accessibility.test.ts Normal file
View file

@ -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"');
}
});
});