Skip to content

DataViews: Align grid focus indicators with design system outlines - #85364

Open
himanshupathak95 wants to merge 3 commits into
WordPress:trunkfrom
himanshupathak95:fix/80138-dataviews-grid-focus-ring
Open

DataViews: Align grid focus indicators with design system outlines#85364
himanshupathak95 wants to merge 3 commits into
WordPress:trunkfrom
himanshupathak95:fix/80138-dataviews-grid-focus-ring

Conversation

@himanshupathak95

@himanshupathak95 himanshupathak95 commented Oct 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Part of #80138. Use the design system outline for keyboard focus on DataViews grid cards.

Why?

The whole-card focus ring still uses an inset shadow, with a separate transparent outline for high contrast. The ring is already visible, so this is a design-system consistency enhancement rather than a missing-focus bug.

The fallback was deliberately added in #72997 because Windows High Contrast hides shadows. A shared outline now covers both modes without keeping two separate focus styles.

How?

Replace the whole-card focus shadow and transparent fallback with outset-ring__focus(). Use a negative outline offset to keep the ring inside the card, matching the previous shadow's position. Keep the existing rounded corners and pointer behavior.

The outline follows the shared focus width: 2 CSS pixels at normal density and 1.5 CSS pixels on Retina screens. In high contrast, its color comes from the browser. The change is limited to the standard grid's whole-card ring.

#85358 handles list items separately. #80095 changes selected-card styling in this same file.

Testing Instructions

  1. Open Appearance > Editor > Pages on a site using a block theme, with at least two pages.
  2. Open Layout and choose Grid.
  3. Follow the keyboard steps below and check that all four edges of the card outline are visible inside the card. Its size and contents should stay in place.
  4. Repeat with Chrome's Rendering panel set to forced-colors active, using light and dark preferred color schemes.
  5. Repeat at normal and Retina screen densities and at a narrow viewport.

Testing Instructions for Keyboard

  1. Tab to View options, then paste Select all into the first card.
  2. Press Right Arrow and Left Arrow. The whole-card ring should follow focus.
  3. Press Tab to enter the card's preview button, then Tab to its checkbox. The whole-card ring should disappear while the child control receives focus.
  4. Press Space to select the item, then use Cancel in the bulk action toolbar to clear the selection.
  5. Move focus out of the card and check that its ring disappears.

Screenshots or screencast

Before

Screenshot 2026-10-22 at 10 16 31

After

Screenshot 2026-10-22 at 10 19 44 Screenshot 2026-10-22 at 10 20 15

Use of AI Tools

Implemented with assistance of Codex (Astra 6)

@coderabbitai review

@github-actions github-actions Bot added the [Package] DataViews /packages/dataviews label Oct 22, 2026
@himanshupathak95 himanshupathak95 changed the title Fix/80138 dataviews grid focus ring DataViews: Align grid focus indicators with design system outlines Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •
edited
Loading

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: himanshupathak95 <abcd95@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.

@himanshupathak95 himanshupathak95 added the [Type] Enhancement A suggestion for improvement. label Oct 22, 2026
@himanshupathak95
himanshupathak95 marked this pull request as ready for review October 22, 2026 05:01
@coderabbitai

coderabbitai Bot commented Oct 22, 2026 •
edited
Loading

Copy link
Copy Markdown

Review in Change Stack →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration
📥 Commits

Reviewing files that changed from the base of the PR and between ba4c461 and bfe0dd5.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository: WordPress/gutenberg/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: ee27ab7f-c8eb-44fa-b852-e57f8b173dca
📥 Commits

Reviewing files that changed from the base of the PR and between 4978036 and ba4c461.

📒 Files selected for processing: 2
  • packages/dataviews/CHANGELOG.md
  • packages/dataviews/src/components/dataviews-layouts/grid/style.scss

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Summary

Summary by CodeRabbit

  • Style
    • Updated the keyboard focus indicator on grid cards to use the design system’s outline, contained within the card.

Grid cards now use the design system outline for keyboard focus. The stylesheet offsets the outline inward by the focus border width. The changelog records the enhancement.

Changes: Grid card focus outline

Layer / File(s) Summary
Apply the design system focus outline
packages/dataviews/src/components/dataviews-layouts/grid/style.scss, packages/dataviews/CHANGELOG.md		 The stylesheet imports the base-style mixins and applies outset-ring__focus() with an inward outline offset to focus-visible cards. The changelog records the enhancement.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Feature

Suggested reviewers: ntsekouras

Merge Risk: ⚪ Minimal · up to ba4c4

The grid focus-outline change follows existing design-system usage, with no concrete merge-blocking regression identified.

Pre-merge checks: Passed 5
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: aligning DataViews grid focus indicators with design system outlines.
Description check Passed The description directly explains the focus-indicator change, its rationale, implementation, scope, and testing instructions.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches: 💡 1
🧪 Generate unit tests (beta)
  • Create a new PR
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@himanshupathak95
himanshupathak95 force-pushed the fix/80138-dataviews-grid-focus-ring branch from ba4c461 to bfe0dd5 Compare October 22, 2026 10:47

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

Reviewers

@oandregal oandregal Awaiting requested review from oandregal oandregal is a code owner
@gigitux gigitux Awaiting requested review from gigitux gigitux is a code owner
@ntsekouras ntsekouras Awaiting requested review from ntsekouras ntsekouras is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Package] DataViews /packages/dataviews [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@himanshupathak95