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