From 5d4b2e5ce54a9d35965edf5d151fee51933057f5 Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Tue, 14 Jul 2026 21:41:14 +0800
Subject: [PATCH] focus color update

---
 src/assets/style/styles.css      | 5 ++---
 src/themes/overrides/Checkbox.js | 2 +-
 src/themes/overrides/Radio.js    | 2 +-
 src/themes/themeConst.js         | 6 +++---
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/assets/style/styles.css b/src/assets/style/styles.css
index 17f9cc6..9039950 100644
--- a/src/assets/style/styles.css
+++ b/src/assets/style/styles.css
@@ -95,9 +95,8 @@ a:active {
 /* ===== MUI DataGrid keyboard focus (WCAG 2.4.7 / 2.4.11) ===== */
 .MuiDataGrid-columnHeader:focus-visible,
 .MuiDataGrid-cell:focus-visible {
-  outline: 3px solid #0c489e;
-  outline-offset: -2px;
-  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
+  outline: none;
+  box-shadow: inset 0 0 0 3px #0c489e;
 }
 
 /* Contained buttons only */
diff --git a/src/themes/overrides/Checkbox.js b/src/themes/overrides/Checkbox.js
index 17517c0..9583820 100644
--- a/src/themes/overrides/Checkbox.js
+++ b/src/themes/overrides/Checkbox.js
@@ -24,7 +24,7 @@ export default function Checkbox(theme) {
             color: CONTAINED_PRIMARY_BLUE
           },
           '&.Mui-focusVisible': {
-            boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)'
+            boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`
           },
           svg: {
             width: checkboxSize,
diff --git a/src/themes/overrides/Radio.js b/src/themes/overrides/Radio.js
index dbffc87..e0dc3b4 100644
--- a/src/themes/overrides/Radio.js
+++ b/src/themes/overrides/Radio.js
@@ -21,7 +21,7 @@ export default function Radio() {
             color: CONTAINED_PRIMARY_BLUE
           },
           '&.Mui-focusVisible': {
-            boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)'
+            boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`
           }
         }
       }
diff --git a/src/themes/themeConst.js b/src/themes/themeConst.js
index 392d4e3..703ad58 100644
--- a/src/themes/themeConst.js
+++ b/src/themes/themeConst.js
@@ -310,7 +310,7 @@ export const PNSPS_THEME = createTheme({
 
                 /* Focus-visible */
                 '&.Mui-focusVisible': {
-                    boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)',
+                    boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`,
                 },
                 },
             },
@@ -336,7 +336,7 @@ export const PNSPS_THEME = createTheme({
                 },
 
                 '&.Mui-focusVisible': {
-                    boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)',
+                    boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`,
                 },
                 },
             },
@@ -505,7 +505,7 @@ export const PNSPS_THEME = createTheme({
 
                 // ✅ Keyboard TAB focus (visible & accessible)
                 '&.Mui-focusVisible': {
-                    outline: '3px solid rgba(21, 101, 192, 0.55)',
+                    outline: `3px solid ${CONTAINED_PRIMARY_BLUE}`,
                     outlineOffset: '3px',
                     borderRadius: '6px',
                 },