Skip to content

Commit 9280722

Browse files
SainathPoojarySainathPoojaryt-hamano
authored
DataViews: Use the design system focus ring for list items. (#85358) (#85435)
* DataViews: Use the design system focus ring for list items. * DataViews: Add Changelog Entry --- Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
1 parent 33f8624 commit 9280722

2 files changed

Lines changed: 9 additions & 3 deletions

File tree

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66

77
- Remove `single` from the values of the `context` of an action, which no screen supported ([#85186](https://github.com/WordPress/gutenberg/pull/85186)).
88

9+
### Enhancements
10+
11+
- Simplify filter selection indicators and remove their hover colors ([#85191](https://github.com/WordPress/gutenberg/pull/85191)).
12+
- Use the design system outline for keyboard focus on list items ([#85358](https://github.com/WordPress/gutenberg/pull/85358)).
13+
914
## 21.0.0 (2026-10-20)
1015

1116
### Breaking Changes

‎packages/dataviews/src/components/dataviews-layouts/list/style.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "@wordpress/base-styles/mixins" as *;
12
@use "../../../dataviews/style" as *;
23

34
// Square media (thumbnail) size per density. The compact density uses the
@@ -124,10 +125,10 @@ div.dataviews-view-list {
124125
position: absolute;
125126
content: "";
126127
inset: var(--wp-admin-border-width-focus);
127-
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus);
128128
border-radius: var(--wpds-border-radius-sm);
129-
// Windows High Contrast mode will show this outline, but not the box-shadow.
130-
outline: 2px solid transparent;
129+
@include outset-ring__focus();
130+
// Keep the focus ring inside the item.
131+
outline-offset: calc(-1 * var(--wpds-border-width-focus));
131132
}
132133
}
133134
}

0 commit comments

Comments
 (0)