diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx index 6e3d15077e41..d29bb020dbaf 100644 --- a/code/core/src/components/components/ActionBar/ActionBar.tsx +++ b/code/core/src/components/components/ActionBar/ActionBar.tsx @@ -45,6 +45,10 @@ export const ActionButton = styled.button<{ disabled: boolean }>( '&:focus': { boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`, outline: '0 none', + + '@media (forced-colors: active)': { + outline: '1px solid highlight', + }, }, }), ({ disabled }) => diff --git a/code/core/src/components/components/form/input/input.tsx b/code/core/src/components/components/form/input/input.tsx index b32381ff107d..7542f77daade 100644 --- a/code/core/src/components/components/form/input/input.tsx +++ b/code/core/src/components/components/form/input/input.tsx @@ -60,7 +60,11 @@ const styles = (({ theme }: { theme: StorybookTheme }) => ({ '&:focus': { boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, outline: 'none', + '@media (forced-colors: active)': { + outline: '1px solid highlight', + }, }, + '&[disabled]': { cursor: 'not-allowed', opacity: 0.5, diff --git a/code/lib/blocks/src/controls/Boolean.tsx b/code/lib/blocks/src/controls/Boolean.tsx index 15bad5efd21d..001f8dee36d3 100644 --- a/code/lib/blocks/src/controls/Boolean.tsx +++ b/code/lib/blocks/src/controls/Boolean.tsx @@ -45,6 +45,11 @@ const Label = styled.label(({ theme }) => ({ outline: 'none', boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`, }, + '@media (forced-colors: active)': { + '&:focus': { + outline: '1px solid highlight', + }, + }, }, span: { @@ -87,6 +92,10 @@ const Label = styled.label(({ theme }) => ({ : `${theme.appBorderColor} 0 0 0 1px`, color: theme.color.defaultText, padding: '7px 15px', + + '@media (forced-colors: active)': { + textDecoration: 'underline', + }, }, }));