♿️(a11y) fix focus ring on tab container components

Suppress inherited global focus ring on Tabs, TabList, and TabPanel containers.

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
 

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',
 })
 

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: {