Description
As a low vision user, I struggle to see the ellipsis in the 'Actions' column of the Templates browser.
At first, I didn't notice there were some buttons in this column. Even now that I know there are buttons, the ellipsis icon is so tiny that I struggle to see it and click reliably on it.
Besides the very light icon, there are other factors that make these buttons hard to see for low vision users:
- The third column header text is visually hidden. Actually, there's an 'Actions' text rendered within a
VisuallyHidden component. I guess that's because the buttons in the column cells are displayed conditionally so that sometimes the cells are empty.
- The buttons are displayed conditionally. Under some conditions, there are no buttons at all so that it's hard to discover the third column might actually have some content.
- The ellipsis button opens a dropdown menu, even when the menu contains just one item. In this case, users are forced to click twice to actually take the only available action. Seems to me this isn't ideal. When there's only one action, there's no need for a dropdown menu in the first place. Placing the only available action control directly within the table cell would probably be a better option.
Proposal:
- Always display the column header 'Actions'.
- When the action cell is empty, display some text to clarify there are no actions e.g. 'None'.
- Reconsider the usage of the dropdown menu and use buttons within the cell instead.
- Alternatively, keep the icon button but use an icon with a more visible shape.
Step-by-step reproduction instructions
- Go to the Site editor.
- Create a Taxonomy template.
- Create a Custom template.
- Make sure you have a default template with some saved customizations.
- Click on 'Toggle navigation' to open the Navigation left sidebar.
- Click on 'Templates to open the templates browser.
- Observe the content of the table third column.
- Observe the third column header text is visually hidden.
- Observe your customized templates have an ellipsis icon button in the third column.
- Explore the content of the ellipsis dropdown menu.
Screenshots, screen recording, code snippet
The ellipsis icon button are barely visible for low vision users:

Dropdown menu with only one available action:

One more case where the dropdown menu contains only one action:

Dropdown menu with two actions:

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
Description
As a low vision user, I struggle to see the ellipsis in the 'Actions' column of the Templates browser.
At first, I didn't notice there were some buttons in this column. Even now that I know there are buttons, the ellipsis icon is so tiny that I struggle to see it and click reliably on it.
Besides the very light icon, there are other factors that make these buttons hard to see for low vision users:
VisuallyHiddencomponent. I guess that's because the buttons in the column cells are displayed conditionally so that sometimes the cells are empty.Proposal:
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
The ellipsis icon button are barely visible for low vision users:
Dropdown menu with only one available action:
One more case where the dropdown menu contains only one action:
Dropdown menu with two actions:
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