Skip to content

Commit d22ef52

Browse files
ciampomirkafcoveramjameskosterjasmussen
authored and
gutenbergplugin
committed
UI: Use solid brand highlights for popup items (#84087)
* Storybook: Compare composite focus indicators * Design system: Use neutral highlights and focus rings for popup items * Design system: Fix changelog section ordering * UI: Share popup highlight tracking and handle same-item pointer hover * UI: Keep virtual popup focus rings with the input focus * Combobox: Align popup search fields with items * Combobox: Inset option highlights without changing the search field * UI: Share input and list highlight handlers * Autocomplete: Restore focus ring at grid boundaries * UI: Extract popup option alignment for separate review * UI: Separate keyboard option rings from pointer hover * UI: Simplify active option rings to input focus * UI: Use solid brand highlights for popup items * UI: Preserve popup colors for headings and disabled links * Menu: Keep open submenu parents neutral when highlighted * UI: Restore submenu hover and join adjacent highlights * UI: Keep popup highlights on the active item --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: fcoveram <fcoveram@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
1 parent 5f7f912 commit d22ef52

3 files changed

Lines changed: 35 additions & 39 deletions

File tree

‎packages/ui/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Enhancements
66

7+
- `Menu`, `Select`, `Combobox`, `Autocomplete`, and searchable select controls: Use solid brand highlights for hovered and keyboard-highlighted popup items and their supporting content ([#84087](https://github.com/WordPress/gutenberg/pull/84087)).
78
- `SelectControl`: Warn in development when an item has an empty string `value`, which shows the placeholder instead of the item's label when selected ([#85172](https://github.com/WordPress/gutenberg/pull/85172)).
89

910
## 0.25.0 (2026-10-20)

‎packages/ui/src/menu/style.module.css‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -175,35 +175,40 @@
175175
grid-template-columns: subgrid;
176176
}
177177

178-
&[data-popup-open]:not([data-disabled]) {
178+
&[data-popup-open]:not([data-highlighted], [data-disabled], [aria-disabled="true"]) {
179179
background-color: var(--wpds-color-background-interactive-neutral-weak-active);
180180

181181
@media ( forced-colors: active ) {
182182
--_gcd-div-outline: var(--wpds-border-width-xs) solid GrayText;
183-
--_gcd-a-outline: var(--wpds-border-width-xs) solid GrayText;
184183
}
185184
}
186185

187-
&[data-highlighted]:not([aria-disabled="true"]) {
188-
background-color: var(--wpds-color-background-interactive-brand-weak-active);
189-
color: var(--wpds-color-foreground-interactive-neutral);
186+
/* Link items expose aria-disabled without a data-disabled state. */
187+
&[data-highlighted]:not([data-disabled], [aria-disabled="true"]) {
188+
--_gcd-a-color: var(--wpds-color-foreground-interactive-brand-strong-active);
189+
190+
background-color: var(--wpds-color-background-interactive-brand-strong-active);
191+
color: var(--wpds-color-foreground-interactive-brand-strong-active);
190192
outline: none;
191193

192-
/*
193-
* Set the outline through the global CSS defense bridge, since
194-
* wp-admin's unlayered `div { outline: 0 }` beats layered styles.
195-
*/
196194
@media ( forced-colors: active ) {
197-
--_gcd-div-outline: var(--wpds-border-width-focus) solid Highlight;
198-
--_gcd-a-outline: var(--wpds-border-width-focus) solid Highlight;
195+
--_gcd-a-color: HighlightText;
196+
197+
forced-color-adjust: none;
198+
background-color: Highlight;
199+
color: HighlightText;
199200
}
200201
}
201202

202-
&[aria-disabled="true"] {
203-
background-color: var(--wpds-color-background-interactive-brand-weak-disabled);
203+
&:is([data-disabled], [aria-disabled="true"]) {
204+
--_gcd-a-color: var(--wpds-color-foreground-interactive-neutral-disabled);
205+
206+
background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
204207
color: var(--wpds-color-foreground-interactive-neutral-disabled);
205208

206209
@media ( forced-colors: active ) {
210+
--_gcd-a-color: GrayText;
211+
207212
color: GrayText;
208213
}
209214
}
@@ -381,16 +386,8 @@
381386
content: "\2196";
382387
}
383388

384-
.item[data-highlighted]:not([aria-disabled="true"]) .item-description,
385-
.item[data-highlighted]:not([aria-disabled="true"]) .item-suffix,
386-
.item[data-highlighted]:not([aria-disabled="true"]) .item-shortcut,
387-
.item[data-highlighted]:not([aria-disabled="true"]) .item-trailing,
388-
.item[data-highlighted]:not([aria-disabled="true"]) .item-selection-indicator,
389-
.item[aria-disabled="true"] .item-description,
390-
.item[aria-disabled="true"] .item-suffix,
391-
.item[aria-disabled="true"] .item-shortcut,
392-
.item[aria-disabled="true"] .item-trailing,
393-
.item[aria-disabled="true"] .item-selection-indicator {
389+
.item:is([data-highlighted], [data-popup-open], [data-disabled], [aria-disabled="true"]) :is(.item-description, .item-suffix, .item-shortcut, .item-trailing),
390+
.item:is([data-highlighted], [data-disabled], [aria-disabled="true"]) .item-selection-indicator {
394391
--_gcd-heading-color: currentColor;
395392

396393
color: inherit;

‎packages/ui/src/utils/css/item-popup.module.css‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -172,26 +172,20 @@
172172
}
173173
}
174174

175-
&[data-highlighted]:not([aria-disabled="true"]) {
176-
background-color: var(--wpds-color-background-interactive-brand-weak-active);
177-
color: var(--wpds-color-foreground-interactive-neutral);
175+
&[data-highlighted]:not([data-disabled]) {
176+
background-color: var(--wpds-color-background-interactive-brand-strong-active);
177+
color: var(--wpds-color-foreground-interactive-brand-strong-active);
178178
outline: none; /* Disable user agent focus ring */
179179

180-
/*
181-
* Set the outline through the global CSS defense bridge, since
182-
* wp-admin's unlayered `div { outline: 0 }` beats layered styles.
183-
*/
184180
@media ( forced-colors: active ) {
185-
--_gcd-div-outline: var(--wpds-border-width-focus) solid Highlight;
181+
forced-color-adjust: none;
182+
background-color: Highlight;
183+
color: HighlightText;
186184
}
187185
}
188186

189-
&[aria-disabled="true"] {
190-
/* Background is brand-toned (see `[data-highlighted]` above); the
191-
foreground text stays neutral in every state. The disabled
192-
background currently resolves to transparent, but referencing the
193-
token keeps it in sync if its value ever changes. */
194-
background-color: var(--wpds-color-background-interactive-brand-weak-disabled);
187+
&[data-disabled] {
188+
background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
195189
color: var(--wpds-color-foreground-interactive-neutral-disabled);
196190

197191
@media ( forced-colors: active ) {
@@ -225,15 +219,19 @@
225219
}
226220

227221
.item-label {
222+
--_gcd-heading-color: currentColor;
223+
228224
min-width: 0;
229225
}
230226

231227
.item-description {
232228
color: var(--wpds-color-foreground-content-neutral-weak);
233229
}
234230

235-
.item[data-highlighted]:not([aria-disabled="true"]) .item-description,
236-
.item[aria-disabled="true"] .item-description {
231+
.item[data-highlighted]:not([data-disabled]) .item-description,
232+
.item[data-disabled] .item-description {
233+
--_gcd-heading-color: currentColor;
234+
237235
color: inherit;
238236
}
239237

0 commit comments

Comments
 (0)