Data views: Make the links look like links

[afercia]

Description

See related https://github.com/WordPress/gutenberg/issues/59175

In the data views, the title of each item is actually a link to the item details. For example in the case of the Pages list the page title is a link to the page editing view.

However, the title text is a gray text. It looks like normal, non-interactive, text. There is no visual indication that it's a link. Moreover, when hovering a row, the title text looks like the checkbox label. As a user, I would expect that clicking that text selects the checkbox.

An inclusive user interface needs to be predictable and self-explanatory. Links must look like links.

Step-by-step reproduction instructions

• Go to Site editor > Pages > Manage all pages.
• Observe the page titles look like normal gray text.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

As a user, I would expect that clicking that text selects the checkbox.

This is even more true in the 'Grid' view, where the item title really looks like the checkbox label. See screenshot below. As a user, I would expect that clicking that text selects the checkbox. Instead, I'm unexpectedly brought to the editing view.

[afercia]

Similarlym in the Patterns grid view, the text on the right of the checkboxes looks like the checkbox label. Instead, it's a button. Clicking the button brings to the editing view. Buttons should look like buttons. I wonder why these are buttons and not links in the first place though.

[afercia]

Question: why the title is a link in the Pages cards and instead it's a button in the Patterns cards?

Pages:

https://github.com/WordPress/gutenberg/blob/e1cd1302696054b37c32a2878ad8577b4250145b/packages/edit-site/src/components/page-pages/index.js#L295-L302

Patterns: it's a button element with 'link' variant but it usss useLink under the hood and it behaves like a link, integrated with the routing mehcanism. Am I missing something?

https://github.com/WordPress/gutenberg/blob/e1cd1302696054b37c32a2878ad8577b4250145b/packages/edit-site/src/components/page-patterns/index.js#L199-L204

We need to make the UI consistent not only visually, but also semantically and in terms of expected interaction. Any technical reason for this difference? Cc @oandregal

[afercia]

Regarding the Grid cards, I think the current design is confusing and less than ideal both visually, semantically, and as expected interaction. Thinking it needs to be refined, made more consistent, and predictable.

• Although visually similar, Page and Patterns (haven't checked Templates yer) cards use a different markup for example links vs. buttons. Not sure why.
• The control to Edit and the control to Select an item need to be clearly distinguished. WIth the current design, it's not clear at all what is select and what is edit.
• The expectation established in the last 30 years or so for gray text on the right of a checkbox is that text to be the label of the checkbox. Instead, it's sometimes a link and sometimes a button, both bring to the edit view.

I'd like to propose to make things work as expected based on their visual appearance. More importantly, Selection and editing controls should be clearly separated.

• Selection: The text to the right of the checkboxes should be a <label> element associated with the checkbox. This would match users expectations.
• The card preview should be a link, not a button. It should be clearly labeled that it brings to the editing view. Ideally, on hover and focus a 'Edit' visual fedback should visually make clear the link brings to the editing view.

[afercia]

These descriptions and tooltips on the author and status need to be removed. As discussed in another issue, ariakit makes an incorrect usage of tooltips by making any element a description is attached to a focusable element. This makes some div elements focusable, whith is far from ideal. Tooltips should not be used for descriptions on non-interactive elements.