From 259b739160d436c1ab55f42d82c1d3b154278dfb Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 24 Feb 2026 14:24:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(a11y)=20fix=20focus=20ring?=
 =?UTF-8?q?=20on=20tab=20container=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Suppress inherited global focus ring on Tabs, TabList, and TabPanel containers.
---
 CHANGELOG.md                                             | 2 ++
 .../settings/components/SettingsDialogExtended.tsx       | 1 +
 src/frontend/src/primitives/Tabs.tsx                     | 9 +++++++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 201bb6a7..ace88363 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,8 @@ and this project adheres to
 - 🚚(frontend) rename "wellknown" directory to "well-known" #1009
 - 🌐(frontend) localize SR modifier labels #1010
 - ⬆️(backend) update python dependencies #1011
+- ♿️(a11y) fix focus ring on tab container components
+
 
 ## [1.8.0] - 2026-02-20
 
diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 919d065e..ed4a782b 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -41,6 +41,7 @@ const tabListContainerStyle = css({
   flexDirection: 'column',
   borderRight: '1px solid lightGray', // fixme poor color management
   paddingY: '1rem',
+  paddingLeft: '0.2rem',
   paddingRight: '1.5rem',
 })
 
diff --git a/src/frontend/src/primitives/Tabs.tsx b/src/frontend/src/primitives/Tabs.tsx
index 1a43b126..ca0a4c14 100644
--- a/src/frontend/src/primitives/Tabs.tsx
+++ b/src/frontend/src/primitives/Tabs.tsx
@@ -24,6 +24,9 @@ const StyledTabs = styled(RACTabs, {
       flexDirection: 'row',
       '--vertical': '3px',
     },
+    '&[data-focus-visible]': {
+      outline: 'none!',
+    },
   },
 })
 
@@ -102,6 +105,9 @@ const StyledTabList = styled(RACTabList, {
     '&[data-orientation=vertical]': {
       flexDirection: 'column',
     },
+    '&[data-focus-visible]': {
+      outline: 'none!',
+    },
   },
   variants: {
     border: {
@@ -147,9 +153,8 @@ const StyledTabPanel = styled(RACTabPanel, {
   base: {
     marginTop: '4px',
     borderRadius: '4px',
-    outline: 'none',
     '&[data-focus-visible]': {
-      outline: '2px solid red',
+      outline: 'none!',
     },
   },
   variants: {