WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.48k stars 4.18k forks source link

Data views: Make the links look like links #59176

Open afercia opened 8 months ago

afercia commented 8 months ago

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.

Screenshot 2024-02-19 at 14 02 16

Step-by-step reproduction instructions

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 commented 8 months ago

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.

Screenshot 2024-02-20 at 10 09 48

afercia commented 8 months ago

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.

Screenshot 2024-02-20 at 14 41 48

afercia commented 8 months ago

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 commented 8 months ago

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.

Screenshot 2024-02-20 at 16 43 09

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.

afercia commented 8 months ago

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.

Screenshot 2024-02-20 at 10 24 01 Screenshot 2024-02-20 at 10 24 03