[SainathPoojary]

What?

Part of #80138.

Use the design system outline for keyboard focus on DataViews list items.

Why?

List items still use a legacy box-shadow focus ring with a separate high contrast fallback.

How?

Replace the shadow and transparent outline with outset-ring__focus(). Use a negative outline offset to keep the ring inside the item.

In high contrast mode, the inset focus ring is now separate from the row separators.

Testing Instructions

1. Open Storybook → Design System → DataViews → Layout List.
2. Press Tab until a list item is focused.
3. Check that one complete focus outline appears around the item.
4. Use the Up and Down Arrow keys to move between items.
5. Repeat with forced colors enabled in DevTools. The focus outline and row separators should remain visible.

Screenshots or screencast

Before:

After:

Use of AI Tools

Implemented with assistance of Github Copilot

[github-actions]

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

[SainathPoojary]

In high contrast mode, the focus outline now sits inside the row, leaving a small gap between it and the row separators. Previously, the fallback outline extended outward and visually joined those separators. Both the focus outline and separators remain visible with this change. Is this something that needs to be fixed, or is it expected behavior?

Before:

After:

[SainathPoojary]

Additionally The thin grey strip outside the focus outline is the row’s hover/focus background. It also appears on trunk before this patch. If the background and outline should align at the outer edge, we can address that in a follow-up PR.

[ciampo]

@mirka here's another instance of negative offset

[ciampo]

I think this is find for the scope of this PR, we should decide how to tackle this pattern and apply changes in one go in a separate PR.

[ciampo]

LGTM 🚀

[ciampo]

I think this is find for the scope of this PR, we should decide how to tackle this pattern and apply changes in one go in a separate PR.

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch.

PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk.

# Checkout the wp/7.2 branch instead of trunk.
git checkout wp/7.2

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 41310e797392f85bd7a728fa5939a0280bce0b1e

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.2 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch.

PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk.

# Checkout the wp/7.2 branch instead of trunk.
git checkout wp/7.2

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 41310e797392f85bd7a728fa5939a0280bce0b1e

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.2 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[ciampo]

@SainathPoojary do you mind creating a manual PR to backport this change to 7.2? I'll be happy to review that PR (also cc @t-hamano )

[SainathPoojary]

@ciampo Done! The backport PR is ready for review: #85435 🙌

cc @t-hamano

[t-hamano]

This PR was backported to wp/7.2 in #85435.