Dataviews: make the media item clickable as well #70985

alshakero · 2025-07-30T14:51:48Z

What?

This makes the media field part of the primary column behave the same way the title does when clicked. This makes sense because it's part of the primary column anyway.

Why?

More intuitive experience.

How?

By wrapping the media field with the same ItemClickWrapper that wraps the title field.

Testing Instructions

Checkout this branch.
Run npm run storybook:dev.
Visit http://localhost:50240/?path=/docs/dataviews-dataviews--docs
Click the thumbnail. An alert should show.

Testing Instructions for Keyboard

Repeat the above steps.
Instead of clicking, tab-nav until the thumbnail is in focus.
Press "Enter".
The alert should show.

Screenshots or screencast

Before

Screen.Recording.2025-07-30.at.16.53.24.mov

After

Screen.Recording.2025-07-30.at.16.51.27.mov

github-actions · 2025-07-30T14:54:50Z

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: alshakero <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jameskoster <[email protected]>

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

talldan · 2025-07-31T06:01:36Z

packages/dataviews/src/dataviews-layouts/table/column-primary.tsx

+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+				>


This ends up as a button without a label, so there's an a11y problem to solve.

For the title field the title itself is used as the label, so you could probably match that - perhaps using aria-labelledby (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) and an id on the title.

Another option is to make the whole thumbnail and title wrapped in the clickable - but it might not feel right from a user point of view.

TBH, I'm also not convinced the item title is descriptive enough as a label, it doesn't really tell a screenreader user what onClickItem is going to do. Given dataviews is very abstract it could perform any kind of action. So another option is to add a way to pass a label in for an item, but that might be a separate story rather than trying to solve it in this PR. 😄

Another option is to make the whole thumbnail and title wrapped in the clickable - but it might not feel right from a user point of view.

Yeah, this is something I've heard a few times, the fact that the "primary column" is clickable is not very discoverable. This would require some design thinking, perhaps exploring making the media+title+description a card? Though, it'd add some weight that we may not want. Pinging @jameskoster @matt-west in case they have thoughts.

It'd also be nice to group media/title/description in a single unit from a keyboard navigation point of view. Otherwise, there's a stop for the media and there's another stop for the title (but they trigger the same action).

TBH, I'm also not convinced the item title is descriptive enough as a label, it doesn't really tell a screenreader user what onClickItem is going to do. Given dataviews is very abstract it could perform any kind of action.

Perhaps we could do with a generic label such as "Click item" for now.

I'm not sure the description should be clickable. I think for now, adding the label (maybe a "Click Item %s") would be good enough.

It seems easier for now to make the title and thumbnail separate clickable elements, assuming we can find a good label for the thumbnail. We might consider a hover effect too; maybe the thumbnail border darkens slightly...

OK I went with Click item: <title> I added a colon to avoid all the grammatical issues in non-English languages, considering the item is an object and whatnot.

oandregal · 2025-07-31T09:03:22Z

packages/dataviews/src/dataviews-layouts/table/column-primary.tsx

+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+				>
+					<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">


Is there a reason we need this extra div? Can we pass the className to the ItemClickWrapper instead?

…able

alshakero · 2025-07-31T16:39:30Z

Thank you, everyone, for the reviews. I addressed all the feedback and rebased.

youknowriad

This is looking good to me. You might want to mention the change in the DataViews changelog.

youknowriad · 2025-08-01T08:40:41Z

packages/dataviews/src/dataviews-layouts/table/column-primary.tsx

+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media"
+					title={


Should this be title or aria-label?

oandregal · 2025-08-01T11:13:05Z

packages/dataviews/CHANGELOG.md

@@ -16,6 +16,10 @@
 - Support Ctrl + Click / Cmd + Click for multiselecting rows in the Table layout ([#70891](https://github.com/WordPress/gutenberg/pull/70891)).
 - Add support for the `Edit` control on the date field type ([#70836](https://github.com/WordPress/gutenberg/pull/70836)).

+### Enhancements
+
+- Make the media item clickable along the title.


Suggested change

- Make the media item clickable along the title.

- Make the media item clickable along the title. [#70985](https://github.com/WordPress/gutenberg/pull/70985)

My bad, the pattern is so obvious.

Dataviews: make the media item clickable as well

b51180a

alshakero marked this pull request as ready for review July 30, 2025 14:54

alshakero requested a review from oandregal as a code owner July 30, 2025 14:54

alshakero added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Jul 30, 2025

talldan reviewed Jul 31, 2025

View reviewed changes

oandregal reviewed Jul 31, 2025

View reviewed changes

alshakero added 3 commits July 31, 2025 18:14

Merge remote-tracking branch 'origin/trunk' into fix/media-item-click…

880df01

…able

Pass row title as button title

898cc89

Fix button title

701131e

youknowriad approved these changes Aug 1, 2025

View reviewed changes

youknowriad reviewed Aug 1, 2025

View reviewed changes

Update the changelog and switch to aria-label

283a440

oandregal reviewed Aug 1, 2025

View reviewed changes

alshakero added 2 commits August 1, 2025 13:14

Add PR link to the changelog

9cdbd76

Remove unnecessary type change

7ef2c65

alshakero enabled auto-merge (squash) August 1, 2025 13:36

alshakero merged commit 868b4b8 into trunk Aug 1, 2025
59 checks passed

alshakero deleted the fix/media-item-clickable branch August 1, 2025 13:49

github-actions bot added this to the Gutenberg 21.4 milestone Aug 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dataviews: make the media item clickable as well #70985

Dataviews: make the media item clickable as well #70985

alshakero commented Jul 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

talldan Jul 31, 2025

Uh oh!

oandregal Jul 31, 2025

Uh oh!

youknowriad Jul 31, 2025

Uh oh!

jameskoster Jul 31, 2025

Uh oh!

alshakero Jul 31, 2025

Uh oh!

oandregal Jul 31, 2025

Uh oh!

alshakero commented Jul 31, 2025

Uh oh!

youknowriad left a comment

Uh oh!

youknowriad Aug 1, 2025

Uh oh!

oandregal Aug 1, 2025

Uh oh!

alshakero Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

	- Make the media item clickable along the title.
	- Make the media item clickable along the title. [#70985](https://github.com/WordPress/gutenberg/pull/70985)

Dataviews: make the media item clickable as well #70985

Dataviews: make the media item clickable as well #70985

Conversation

alshakero commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

Uh oh!

github-actions bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alshakero commented Jul 31, 2025

Uh oh!

youknowriad left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

alshakero commented Jul 30, 2025 •

edited

Loading

github-actions bot commented Jul 30, 2025 •

edited

Loading