Repository navigation
DataViews: Wrap row content in gridcell for valid ARIA grid semantics - #79085
hi0001234d wants to merge 1 commit into
Conversation
|
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.
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. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Thanks for the PR. I left a comment on the issue to discuss whether we need any changes or not. |
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 begridcell,rowheader, orcolumnheader.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
gridcellwrappers, assistive technologies cannot convey the row's cell structure, and the markup fails thearia-required-childrenARIA 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>inpackages/dataviews/src/components/dataviews-layouts/list/index.tsx:otherFields.map(...)No DOM structure or styling was modified purely an ARIA attribute addition.
Testing Instructions
admin.php?page=site-editor-v2&p=%2Ftypes%2Fpage).<div role="row">node's interactive descendants (title link, action button) are now contained inside<div role="gridcell">wrappers.Testing Instructions for Keyboard
Tabto navigate into the list, then arrow keys to move between rows.Screenshots or screencast
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.