DataViews: Ensure consistent display of primary ellipsis in list layout #69846

yogeshbhutkar · 2025-04-07T13:46:22Z

What?

This PR ensures the primary ellipsis in DataViews list items is always visible, regardless of interaction states such as hover, focus, or selection — or even when idle.

Why?

This improves accessibility, as noted here and addresses the linked issue.

How?

Corresponding CSS rules were updated and refactored for simplicity.

Testing Instructions

Navigate to Appearance -> Editor -> Pages.
Make sure that the data is displayed in List Layout.
Click the Actions button and open the menu.
Confirm that the primary ellipsis is always visible.

Testing Instructions for Keyboard

Same

Screencast

packages/dataviews/src/dataviews-layouts/list/style.scss

github-actions · 2025-04-07T14:09:15Z

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: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>

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

yogeshbhutkar · 2025-04-08T04:43:16Z

~~It looks like this PR is breaking the focus management in the data views list, as doing a display: none would remove the grid cell element. I'll be exploring some more ways to fix this!~~

Edit: Fixed!

yogeshbhutkar · 2025-04-08T06:27:22Z

Hi @t-hamano,

Following up on our discussion here, I’ve opened this PR to address the issue. Can you please have a look at this PR when you get a moment? Thanks!

t-hamano

Thanks for the PR!

I'm seeing some visual changes, so can you align these changes? However, if it is an intended change and it makes sense, I think the change is acceptable.

trunk

This PR

Visual diff

yogeshbhutkar · 2025-04-08T09:16:47Z

Thanks for the review, @t-hamano!

I've tried to minimize the visual diff as much as possible in the latest commit.

Trunk

This PR

Visual Diff

Minimizing the diff further may not be feasible due to existing issues in trunk:

Buttons overflow the hstack wrapper's width.

The grid-cell width is smaller than the buttons.

These issues are addressed in this PR.

HStack	Gridcell

packages/dataviews/src/dataviews-layouts/list/style.scss

yogeshbhutkar · 2025-04-09T05:07:16Z

While working on this issue, I discovered a bug on Trunk. When navigating the data views list with the UP/DOWN arrow keys from the action buttons, starting from the Primary Action Button works as expected. However, starting from the Actions dropdown trigger in the Pages screen only allows traversal through the first two items. This doesn’t happen on the Templates screen.

Since this is unrelated to the current PR, I’d like to explore it separately and open a new PR to address it.

t-hamano

Thanks for the update! I noticed that this PR also fixed the vertical misalignment:

Before	After

If my understanding is correct, we should be able to delete some styles:

diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
index 0c4799539c..6c696b6ca4 100644
--- a/packages/dataviews/src/dataviews-layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -34,10 +34,6 @@ div.dataviews-view-list {
                                flex: 0;
                                overflow: hidden;
                                width: 0;
-
-                               .components-button {
-                                       opacity: 0;
-                               }
                        }
                }
 
@@ -46,10 +42,6 @@ div.dataviews-view-list {
                                flex-basis: min-content;
                                width: auto;
                                overflow: unset;
-
-                               .components-button {
-                                       opacity: 1;
-                               }
                        }
                }

However, starting from the Actions dropdown trigger in the Pages screen only allows traversal through the first two items.

I can't reproduce this problem 🤔

packages/dataviews/src/dataviews-layouts/list/style.scss

t-hamano

LGTM!

I found another a11y issue. It would be better to show the primary button by default if the screen doesn't support the hover media query, such as the Table layout:

gutenberg/packages/dataviews/src/dataviews-layouts/table/style.scss

Lines 82 to 88 in f23eaaa

    
           @media (hover: none) { 
        
           	// Show checkboxes and quick-actions on devices that do not support hover. 
        
           	.components-checkbox-control__input.components-checkbox-control__input, 
        
           	.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) { 
        
           		opacity: 1; 
        
           	} 
        
           }

However, this could be addressed as a follow-up 👍

…ut (WordPress#69846) * fix: don't apply hover effect on primary ellipsis * fix: don't use `display: none` to avoid focus loss * fix: add gap to make it consistent with the previous layout * fix: minimize diff with respect to previous layout * fix: move gridcell selector outside * chore: remove unused styles Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org>

yogeshbhutkar changed the title ~~DataViews: Ensure Consistent Display of Primary Ellipsis in List Layout~~ DataViews: Ensure consistent display of primary ellipsis in list layout Apr 7, 2025

yogeshbhutkar force-pushed the fix-69570/data-views branch from 22d0500 to 38c18ec Compare April 7, 2025 13:57

yogeshbhutkar commented Apr 7, 2025

View reviewed changes

packages/dataviews/src/dataviews-layouts/list/style.scss Outdated Show resolved Hide resolved

yogeshbhutkar marked this pull request as ready for review April 7, 2025 14:09

Mamaduka added [Type] Bug An existing feature does not function as intended [Package] DataViews /packages/dataviews labels Apr 7, 2025

yogeshbhutkar force-pushed the fix-69570/data-views branch from 5a8f807 to 1d52063 Compare April 8, 2025 05:29

t-hamano reviewed Apr 8, 2025

View reviewed changes

packages/dataviews/src/dataviews-layouts/list/style.scss Outdated Show resolved Hide resolved

yogeshbhutkar added 5 commits April 9, 2025 10:17

fix: don't apply hover effect on primary ellipsis

fe9103b

fix: don't use display: none to avoid focus loss

4065a56

fix: add gap to make it consistent with the previous layout

441210a

fix: minimize diff with respect to previous layout

d88f751

fix: move gridcell selector outside

0c377d5

yogeshbhutkar force-pushed the fix-69570/data-views branch from fd14c65 to 0c377d5 Compare April 9, 2025 04:48

t-hamano reviewed Apr 9, 2025

View reviewed changes

packages/dataviews/src/dataviews-layouts/list/style.scss Outdated Show resolved Hide resolved

chore: remove unused styles

76741f6

yogeshbhutkar requested a review from t-hamano April 9, 2025 09:22

t-hamano approved these changes Apr 9, 2025

View reviewed changes

t-hamano merged commit 87b3af7 into WordPress:trunk Apr 9, 2025
61 checks passed

github-actions bot added this to the Gutenberg 20.7 milestone Apr 9, 2025

yogeshbhutkar deleted the fix-69570/data-views branch April 10, 2025 08:49

yogeshbhutkar mentioned this pull request Apr 10, 2025

DataViews: Always show primary action for list layout if hover isn't supported #69876

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

DataViews: Ensure consistent display of primary ellipsis in list layout #69846

DataViews: Ensure consistent display of primary ellipsis in list layout #69846

Uh oh!

yogeshbhutkar commented Apr 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2025

Uh oh!

yogeshbhutkar commented Apr 8, 2025 •

edited

Loading

Uh oh!

yogeshbhutkar commented Apr 8, 2025

Uh oh!

t-hamano left a comment

Uh oh!

yogeshbhutkar commented Apr 8, 2025

Uh oh!

Uh oh!

yogeshbhutkar commented Apr 9, 2025

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

Uh oh!

	@media (hover: none) {
	// Show checkboxes and quick-actions on devices that do not support hover.
	.components-checkbox-control__input.components-checkbox-control__input,
	.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
	opacity: 1;
	}
	}

DataViews: Ensure consistent display of primary ellipsis in list layout #69846

DataViews: Ensure consistent display of primary ellipsis in list layout #69846

Uh oh!

Conversation

yogeshbhutkar commented Apr 7, 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

Screencast

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2025

Uh oh!

yogeshbhutkar commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yogeshbhutkar commented Apr 8, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

trunk

This PR

Visual diff

Uh oh!

yogeshbhutkar commented Apr 8, 2025

Trunk

This PR

Visual Diff

Uh oh!

Uh oh!

yogeshbhutkar commented Apr 9, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

yogeshbhutkar commented Apr 7, 2025 •

edited

Loading

yogeshbhutkar commented Apr 8, 2025 •

edited

Loading