Define navigable regions in Dataviews layouts.

[vipul0425]

What?

Closes #70950

Why?

When the site editor is open in pages or templates view, there are only two or three regions on the screen: "Navigation" (the left sidebar with a black background), "Pages" or "Templates" (the dataview) and, if in List layout, "Editor content". Whereas within the data view, there are header, main content and footer areas that can be made navigable regions.

How?

Define the header, actionable items, main content and footer as navigable regions.

Testing Instructions

1. Open the site editor and navigate to Templates;
2. Use Ctrl + backtick to navigate between regions and verify there are 4 of them.

Screenshots or screencast

Screen.Recording.2025-07-29.at.10.57.49.AM.mov

[github-actions]

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: Needs Accessibility Feedback, [Feature] DataViews.

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]

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: vipul0425 <vipulgupta003@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

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

[talldan]

The natural next question is whether there should be a way to specify custom labels for implementers of data views.

The default label of 'Data view' doesn't seem right to me as I don't think any parts of the UI are ever called that. It's what we call it in our code, but not in the interface, so a user might not know what it means.

[vipul0425]

Yes, should we introduce a new regionLabels prop that lets users pass in custom labels for different regions? Something like:

regionLabels?: {
  actions?: string;
  content?: string;
  footer?: string;
}

We could provide some sensible defaults like "View Controls", "Main Content", and "View Footer", but happy to adjust if you’d prefer a different approach for handling dynamic region labeling. 🙇

[oandregal]

We could provide some sensible defaults like "View Controls", "Main Content", and "View Footer", but happy to adjust if you’d prefer a different approach for handling dynamic region labeling. 🙇

Using general labels would be best for now.

[t-hamano]

Thanks for the PR!

I think this PR should get accessibility feedback as it has a significant accessibility impact.

I have three concerns:

• In the first place, should the regions be subdivided to this extent?
• More appropriate regions could be used, such as search, contentinfo, etc.
• I don't think tabindex=-1 is necessary. It doesn't need to be focusable by just the tab key.

[joedolson]

tabindex="-1" makes an element focusable programmatically; it doesn't place it into the tab sequence. So that's not going to cause problems.

I think it's reasonable to add some additional regions here; but they should be inside the main region, not outside of it. These pieces are part of the main content of the page.

Using the search role to wrap the search box and filters is fine. I'd consider wrapping the entire header region (not including the Pages title and 'Add Page' button) in a `role="region" with a label like 'Pages Top Bar' to mirror the post editor.

The footer area should be labeled based on its functionality.. which I think will make it very difficult to label. It contains pagination and bulk editing tools.

Landmarks shouldn't change based on which view you're in; even though there isn't any bulk editing in the list view, the footer bar's label should be the same. But I think that the bulk editing tools are going to be very hard to find with this layout. I'm not sure how to label that peculiar combination of options.

[vipul0425]

Thanks @joedolson 🙇

As per my understanding, you're referencing the top bar (which includes search, filters, and layout toggle) inside a role="region" with aria-label="Pages Top Bar" to mirror the post editor.

Since this bar resides in the DataViews component and is reused across multiple screens, I couldn’t find any existing prop to pass a dynamic title. Would it make sense to introduce a new prop to support that? Please correct me if I’ve missed anything.

Also, do we need to rename the upper section (where the page title and "Add Page" button reside), or is the current {page_title} header sufficient from an accessibility perspective?

cc: @t-hamano