Skip to content

DataViews: Wrap row content in gridcell for valid ARIA grid semantics - #79085

Closed
hi0001234d wants to merge 1 commit into
WordPress:trunkfrom
hi0001234d:fix/dataviews-row-gridcell
Closed

hi0001234d wants to merge 1 commit into
WordPress:trunkfrom
hi0001234d:fix/dataviews-row-gridcell

Conversation

@hi0001234d

Copy link
Copy Markdown
Contributor

What?

Closes #78982

This PR fixes a structural ARIA violation in the DataViews list layout. Each row (role="row") contained interactive elements (title link, inline action buttons) as direct accessibility-tree children, which violates the ARIA grid pattern requirement that row children must be gridcell, rowheader, or columnheader.

The fix wraps the title field, description, and per-field cells in <div role="gridcell">, consistent with the existing treatment of the selectable item button and the actions menu.

Why?

Without proper gridcell wrappers, assistive technologies cannot convey the row's cell structure, and the markup fails the aria-required-children ARIA check (WCAG 1.3.1, Info and Relationships).

This affects multiple Site Editor surfaces using the shared DataViews list layout (Pages, Templates, Template Parts, Patterns).

How?

Added role="gridcell" to three existing wrappers inside <Composite.Row> in packages/dataviews/src/components/dataviews-layouts/list/index.tsx:

  1. Title field div (which contains the title link)
  2. Description field div
  3. Each per-field div inside otherFields.map(...)

No DOM structure or styling was modified purely an ARIA attribute addition.

Testing Instructions

  1. Open Site Editor → Pages (admin.php?page=site-editor-v2&p=%2Ftypes%2Fpage).
  2. Switch to List layout.
  3. Inspect any row in DevTools.
  4. Confirm the <div role="row"> node's interactive descendants (title link, action button) are now contained inside <div role="gridcell"> wrappers.

Testing Instructions for Keyboard

  1. Open Site Editor → Pages in List layout.
  2. Use Tab to navigate into the list, then arrow keys to move between rows.
  3. Confirm keyboard navigation works as before focus moves correctly between rows and interactive elements (title links, action menus) remain reachable.

Screenshots or screencast

Before After
image image

Use of AI Tools

Yes investigation and drafting assisted by AI. Final implementation, testing (lint, unit tests, TypeScript check, manual axe verification), and code review were performed personally.

@github-actions

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

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

github-actions Bot commented Jun 10, 2026 •

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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: hi0001234d <emptyopssphere@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>

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

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Jun 10, 2026
@ntsekouras

Copy link
Copy Markdown
Contributor

Thanks for the PR. I left a comment on the issue to discuss whether we need any changes or not.

@hi0001234d hi0001234d closed this Jun 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] DataViews /packages/dataviews [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DataViews list layout: row children include interactive elements outside gridcell wrappers

3 participants