diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index 1be98530d1fa48..3548be6f7260c5 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -270,9 +270,14 @@ const backdropFocusedStyles = ( { let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border; let boxShadow; + let outline; + let outlineOffset; if ( isFocused ) { boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`; + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline = `2px solid transparent`; + outlineOffset = `-2px`; } if ( disabled ) { @@ -284,6 +289,8 @@ const backdropFocusedStyles = ( { borderColor, borderStyle: 'solid', borderWidth: 1, + outline, + outlineOffset, } ); };