Skip to content

DataViews: Use the design system focus ring for Activity titles - #85382

Open
SainathPoojary wants to merge 2 commits into
WordPress:trunkfrom
SainathPoojary:fix/dataviews-activity-title-focus-ring
Open

SainathPoojary wants to merge 2 commits into
WordPress:trunkfrom
SainathPoojary:fix/dataviews-activity-title-focus-ring

Conversation

@SainathPoojary

@SainathPoojary SainathPoojary commented Oct 22, 2026 •

Copy link
Copy Markdown
Member

What?

Use the shared focus ring for clickable titles in the Activity layout.

Part of #80138.

Why?

Keep focus styling consistent with the design system.

How?

Replace the manual outline rules with outset-ring__focus(). Keep the rounded corners.

Testing Instructions

  1. Open DataViews → Layout Activity in Storybook.
  2. Temporarily add onClickItem={ () => {} } to <DataViews> in packages/dataviews/src/dataviews/stories/layout-activity.tsx.
  3. Make sure hasClickableItems is enabled.
  4. Click Search, then press Tab three times to focus the first title.
  5. Check that the title has a clear outline with rounded corners.
  6. Press Tab again. Check that the outline moves to the next title.
  7. Repeat with forced-colors: active in DevTools. Check that the outline remains visible.
  8. Remove the temporary onClickItem line after testing.

Screenshots or screencast

Before:

image image

After:

image image

Use of AI Tools

Implemented with assistance of Github Copilot

@github-actions github-actions Bot added the [Package] DataViews /packages/dataviews label Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 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>

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.

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

@SainathPoojary
SainathPoojary marked this pull request as ready for review October 22, 2026 18:57
@SainathPoojary
SainathPoojary force-pushed the fix/dataviews-activity-title-focus-ring branch from 5fd9108 to f80b29f Compare October 22, 2026 19:06

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] DataViews /packages/dataviews

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant