Improve accessibility of the templates list Actions column #42555
Conversation
afercia
added
[Focus] Accessibility (a11y)
|
Size Change: +39 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
I think there's a general usability consideration here, additional the a11y issues. Ellipsis icon buttons that open an option / action menu is a fairly well established convention in the Editor. It appears in the document toolbar, block toolbar, list view, global styles, design tools, etc. It might be good to explore a solution that fits all uses these cases and maintains holistic consistency / predictability. One option could be to have these buttons respect the 'Show button text labels' option in the Editor, so that they switch to text when appropriate? I appreciate that doesn't necessarily help low-vision users, but perhaps there are other approaches to look at? I noticed in the PR that the horizontal stroke between rows has disappeared, which doesn't seem to be intentional? cc @javierarce since I know you've been looking at control designs for #39082. |
|
@jameskoster thanks for your feedback. I'm not sure this is a case where the 'Show button text labels' option would fit. The 'icon-only' buttons issue has been discussed at length and I do realize is a bit controversial. As general accessibility (and I's say also usability) principle, visible text is preferable because it works for all users. 'icon-only' buttons should only be used when there's not enough space for text. TL:DR
I think the ellipsis icon buttons are sometimes used in a slightly inconsistent way in the Editor. To me, the 'ellipsis' means 'More stuff', that is: a menu with (less often used) controls in addition to a set of other controls. The concept of 'more' makes perfectly sense in the context of a toolbar, where there's a set of controls displayed by default and then there's a 'More' button that groups other controls in a menu. This applies for example to the document toolbar, the block toolbar and the like. Instead, to me, the ellipsis doesn't make much sense when used 'in isolation', as there are no other controls where the ellipsis button is supposed to add 'more' things to. This applies, for example, to the list view, global styles, and the template details popover, where the ellipsis just opens a menu with options / actions. In that context, the button has a more generic meaning on 'Options / Actions' and maybe it should use a different icon. In fact, in other places of the UI, options / actions menus use other icons (the cog icon, for example). I'd think a more important usability issue, as mentioned in #42505, is that the dropdown menu is used even when it contains only one item:
In this case, a dropdown menu doesn't seem appropriate in the first place, because it forces users to unnecessarily click twice. That's not a great experience for users. When there's only one action, there should be just a button for that action, not a dropdown. This consideration is unrelated to this PR though and I'll create a separate issue, but it does have an impact on the ellipsis button. Lastly, I think the pattern 'text + chevron icon' is not new in the Editor and it's probably more usable than the ellipsis button. |
|
I agree that using an ellipsis is difficult to justify in this case, and a dropdown with just one item is frustrating. If we just have two actions (and not for every case) could we consider a text-based approach? It's less scalable, but it could work for the time being.
In this case, we wouldn't need to indicate 'No actions available', because the distinction would be clear. Another thing we could do in addition to this change is to group the templates into editable and not editable ones. It would probably require explaining the distinction, but here's a quick example of what I mean:
|
|
We're not far away from suggesting the Post Actions UI from wp-admin at this point :D
One potential issue with just listing the links however, is accommodating the 'Clear customizations' button which is fairly long and includes a description:
It could be worth exploring how all the combinations of links fit in, and how everything stacks up on small screens. I think there could be something to the idea of separating the different template types (unedited, customized, user-generated), but wonder if that's something to do via filtering rather an a permanent layout configuration 🤔 |
|
I appreciate this goes way beyond the scope of this issue, but perhaps a card-style layout with previews could work better than the current table?
It's easy to imagine the number of columns expanding / contracting according to screen size. |
|
@jameskoster That is interesting! It could perhaps show a thumbnail of what the template looks like! Card views really gives a much better overview of each template. An approach that can be further explored! |
|
Thanks all for your feedback. While a table would be semantically more appropriate to represent the templates data, I'd agree it's worth exploring a new design. The data table isn't used in a 100% correct way in the first place because each data type (name, description, added by, status) should go in a separate column. In its first implementation in #36379, it was a Aside: worth reminding this isn't the only place in the Editor where a dropdown menu with only one item is used. I'll create a new 'discussion' issue mentioning this PR |
|
Re: the dropdown issue, see discussion at #42666 |
|
Adding in this associated issue: |
|
Looking back into this, these action buttons are still barely visible. |
aristath
added
Needs Design Feedback
afercia
force-pushed
the
fix/templates-browser-actions-column
branch
from
a8f06ca to
ef316e9
Compare
|
Flaky tests detected in 2c2e739. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4743637274
|
There was a problem hiding this comment.
The code looks good and makes sense.
The new interface reduces cognitive load for me so personally I'd consider this one ready to be merged and a great improvement.
This looks OK to me to be merged so I'll go ahead and approve it but we'll also need some feedback from @WordPress/gutenberg-design before merging it or taking any further action 👍
|
I don't have a strong opinion either way, so happy to defer to other designers. I suspect we'll need to revisit the design for actions when we add bulk editing. Some minor points: The stroke beneath each row in the table has vanished. It would be nice to reinstate that. Padding on the button looks a bit awkward to me:
The space on the right appears much larger than the left. Not sure if that's something to 'fix' here, or on the component itself. Is the |
|
Agreed, the "Actions" button is not a pattern we use anywhere else, whereas the ellipsis menu is. I recognize the intent of this issue and don't disagree that we need improvement, but I don't think this is the right way to go about it. |
afercia
force-pushed
the
fix/templates-browser-actions-column
branch
from
09a024e to
2c2e739
Compare
I agree, the "Actions" menu is not something we use anywhere. But perhaps we should? If not "Actions", then something else. What we currently have is beautiful for people with perfect vision who can see 3 tiny dots on the screen, but for everyone else it's less than ideal (myself included and I'm just a bit myopic like 30+% of the world). @jasmussen Any ideas on alternative approaches for this? Suggestions on what we can use to improve the current UI? |
|
Hi there! A WooCommerce designer here. I understand the concerns about the accessibility of the ellipsis button. No solution is perfect, but the way I see it, sticking to the ellipsis can be beneficial in the long term. The templates screen will likely set the foundations for other tables across wp-admin, WooCommerce, and other plugins—many of which are similar to or more complex than WordPress. Extensions like WooCommerce need space to show the information the merchants need to make business decisions. We have multiple data-heavy tables, like products, orders, transactions, and subscriptions. The ellipsis menu takes up little space and lets us display more information without forcing the user to scroll horizontally (or hide columns). It also lets us reduce complexity by hiding less common actions when they are not needed (for example, you can perform ~25 actions on each WooCommerce product). This information is crucial, so the extra space we get by not using a regular button greatly helps. Here's how the products list in WooCommerce could look if the Templates list grew into becoming its own component shared across the platform (note that it's a WIP mockup; products come from MUJI).
I've explored using the Perhaps we could mitigate some accessibility issues by making the whole item row interactive? Clicking it would take you to the editor, so you would only need to use the ellipsis to perform a specific, less-common action. |
I'd kindly disagree. It really depends on the way an ellipsis button is used and in what context. ConceptuallyEllipsis buttons are commonly used in many software. It's a common pattern to logically indicate 'More' options, settings, whatever. The key point here is the concept of 'More', which inherently assumes there is something before the 'more'. In fact, in all the major software I can think of, ellipsis 'more' button are used toghether with other UI controls and usually at the end of a series of controls. That's what 'more' means: a series of controls, buttons and the like, and then a 'more' with the less commonly used controls. based on the above, by its own nature an ellipsis button should only be used within a series of other controls. Instead, in the editor is now used everywhere. Often in isolation, as in: there's only the ellipsis button and no other controls before. This usage goes against the concept of 'more'. I'd argue that when used in isolation an ellipsis button is no longer a 'more', instead it's something else. As such, it brings in a different logical concept and it should not be represented by an ellipsis icon. VisuallyWhen used in isolation, literally in the middle of a white space with no other controls or shapes around it, the editor ellipsis icon is barely visible for users with vision impairments. I do have vision impairments and I can't see this button. It's just three thin dots in the middle of a white space, I can't perceive these three thin dots and as such I really strugle to use this button. It's important to understand the context matters a lot. Consider the 4 different cases illustrated in the screenshot below: 
For users with vision impairments, these 4 cases are very different. The ability to perceive the ellipsis icon also depends on the context as in: surrounding controls or borders or other shapes that help with visually perceiving the button. Based on my (admittedly anectodical) experience:
Ellispis ProliferationI'd also like to highlight that the ellipsis button is now broadly used across the editor, too broadly in my opinion. There are scenarios when multiple ellipsis buttons are visible at the some moment in the user interface. Consider the screenshot below: 
Up to 5 (maybe more) ellipsis buttons can be visible at the same time. I'm not sure this contributes in any wway to a good user experience. It's just confusing. Semantiics / PredictabilityAn icon button should visually represent what it does. The underlying action / tool should always be the same, so that users understand on the fly what the button is meant for. The concept of 'more' would fit with this need. However, in the editor the ellipsis button is actually used for the most varied purposes. As said earlier, it's no longer a 'more'. it's something else and I'd argue the inconsistent usage is any good for users. A few examples of the actions / features the ellipsis button is used for based on its labeling:
|
|
I'm going to close this PR for two reasons:
|
Fixes #42505
What?
Changes the Actions button in the templates list to use text instead of only an icon. Also makes the column header visible to as there's no reason to hide it.
Why?
The ellipsis icon of the Actions button is barely visible for low vision users. In other places, for example in the block toolbar, the ellipsis icon is more visible because of the context and the borders. Instead, in the templates list is very light.
From an accessibility perspective, the golden rule for 'icon-only' buttons should be: use them only when there's really no space to use visible text. In this case, there's enough space to use tedxt and there's no reason to use only an icon.
How?
Testing Instructions
Screenshots or screencast
Before:
After: