From 55c613d67c4a6e71d8cf16a39305ba31a29db3a7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 19 Jul 2026 14:18:47 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Keyboard=20Access?=
 =?UTF-8?q?ibility=20Focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement accessible and high-visibility :focus-visible outlines for
all keyboard-navigable interactive elements using existing theme accent
color. Add critical learnings to .jules/palette.md.

Co-authored-by: beingniloy <235952944+beingniloy@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 src/index.css     | 13 +++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..2448bd4
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-07-17 - [Bilingual UI Keyboard Focus Indicators]
+**Learning:** In highly customized desktop/web hybrid editors like Bangladesh Code, custom UI layouts (like the Lucide-icon-based Activity Bar and custom header navigation) rely heavily on raw buttons, anchor tags, and role-based wrappers. If standard outlines are globally reset to `none` (often done to satisfy custom design requirements), keyboard-only users become completely blind to the currently active element when pressing Tab, severely degrading accessibility.
+**Action:** Always provide a high-contrast `:focus-visible` outline utilizing existing theme-aware CSS variables (like `--accent-color` or `--gov-green`) with a slight offset. This ensures that only keyboard navigation triggers the outline, preserving the custom mouse-driven aesthetics while guaranteeing flawless compliance with WCAG 2.1 AAA keyboard accessibility.
diff --git a/src/index.css b/src/index.css
index f16198a..5225fc5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -192,6 +192,19 @@ input:focus, textarea:focus, select:focus {
   border-color: var(--accent-color);
 }
 
+/* High-visibility focus indicators for keyboard navigation */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+[role="button"]:focus-visible,
+[role="tab"]:focus-visible,
+[tabindex="0"]:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
 /* ── VS Code-style resize handles ─────────────────────────────── */
 
 /* Vertical resize handle (left sidebar & right sidebar) */

From 72b42dafecb07fda3e922466579b3033cc9f954d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 19 Jul 2026 14:21:43 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Keyboard=20Access?=
 =?UTF-8?q?ibility=20Focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement accessible and high-visibility :focus-visible outlines for
all keyboard-navigable interactive elements using existing theme accent
color. Add critical learnings to .jules/palette.md.

Co-authored-by: beingniloy <235952944+beingniloy@users.noreply.github.com>