Add transparent outline to input control BackdropUI focus style. (#50772)

* Add transparent outline to input control BackdropUI focus style.

* Add changelog entry.

Author: afercia

packages/components/CHANGELOG.md

@@ -12,6 +12,9 @@
 -   `DropdownMenu`: Convert to TypeScript ([#50187](https://github.com/WordPress/gutenberg/pull/50187)).
 -   Added experimental v2 of `DropdownMenu` ([#49473](https://github.com/WordPress/gutenberg/pull/49473)).
 
+### Bug Fix
+
+-   `InputControl`: Fix focus style to support Windows High Contrast mode ([#50772](https://github.com/WordPress/gutenberg/pull/50772)).
 
 ## 24.0.0 (2023-05-10)
 
@@ -22,7 +25,7 @@
 ### Bug Fix
 
 -   `NavigableContainer`: do not trap focus in `TabbableContainer` ([#49846](https://github.com/WordPress/gutenberg/pull/49846)).
--   Update `<Button>` component to have a transparent background for its tertiary disabled state, to match its enabled state.  ([#50496](https://github.com/WordPress/gutenberg/pull/50496)).
+-   Update `<Button>` component to have a transparent background for its tertiary disabled state, to match its enabled state. ([#50496](https://github.com/WordPress/gutenberg/pull/50496)).
 
 ### Internal
 

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