From 9be864e614777dd6e7cc7be4e54eb4de51d7fbc9 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 07:42:21 +0200 Subject: [PATCH] a11y: focus-visible on .modal-close + .queue-retry-btn MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two more interactive buttons that had hover + active states but no keyboard focus indicator: - .modal-close (the X-close button used by all 5 modals — update, clip-cutter, events viewer, chat viewer, template guide). Red-toned ring matching the hover colour family. - .queue-retry-btn (per-item retry button on failed queue items). Purple ring matching the hover state's accent-purple feedback. Continues the focus-visible pass started in 4.6.81/82/103. Closes the remaining shell-and-modal buttons that keyboard users could tab to without seeing where they were. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/styles.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/styles.css b/src/styles.css index 01cee75..85b7d94 100644 --- a/src/styles.css +++ b/src/styles.css @@ -968,6 +968,12 @@ select option { transform: scale(0.92); } +.queue-retry-btn:focus-visible { + outline: none; + box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65); + border-color: rgba(145, 70, 255, 0.55); +} + .queue-main { flex: 1; min-width: 0; @@ -3349,6 +3355,12 @@ body.theme-light .modal { border-color: rgba(255, 70, 70, 0.55); } +.modal-close:focus-visible { + outline: none; + border-color: rgba(255, 70, 70, 0.6); + box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.6); +} + .modal-close:active { transform: scale(0.92); }