DropdownMenuV2: remove flashing styles when moving focus with keyboard (

#64873) * DropdownMenuV2: remove flashing styles when moving focus with keyboard * CHANGELOG * Add comment about ariakit issue --- Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: diegohaz <[email protected]>
WordPress · Aug 28, 2024 · 8325439 · 8325439
1 parent bee0539
commit 8325439
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -51,6 +51,7 @@
 
 ### Internal
 
+-   `DropdownMenu` v2: fix flashing menu item styles when using keyboard ([#64873](https://github.com/WordPress/gutenberg/pull/64873)).
 -   `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)).
 -   `Composite` V2: fix Storybook docgen ([#64682](https://github.com/WordPress/gutenberg/pull/64682)).
 

diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -171,16 +171,23 @@ const baseItem = css`
 		cursor: not-allowed;
 	}
 
-	/* Hover */
-	&[data-active-item]:not( [data-focus-visible] ):not(
+	/* Active item (including hover)
+	 * Note: we should be able to remove :focus-visible once
+	 * https://github.com/ariakit/ariakit/issues/4083 is fixed and released
+	 */
+	&[data-active-item]:not( [data-focus-visible] ):not( :focus-visible ):not(
 			[aria-disabled='true']
 		) {
 		background-color: ${ COLORS.theme.accent };
 		color: ${ COLORS.white };
 	}
 
-	/* Keyboard focus (focus-visible) */
-	&[data-focus-visible] {
+	/* Keyboard focus (focus-visible)
+	 * Note: we should be able to remove :focus-visible once
+	 * https://github.com/ariakit/ariakit/issues/4083 is fixed and released
+	 */
+	&[data-focus-visible],
+	&:focus-visible {
 		box-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };
 
 		/* Only visible in Windows High Contrast mode */