Skip to content

Improve the accessibility of the Templates browser 'Actions' column #42505

@afercia

Description

@afercia

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:

Screenshot 2022-07-18 at 15 06 18

Dropdown menu with only one available action:

Screenshot 2022-07-15 at 10 55 54

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

Screenshot 2022-07-15 at 12 30 33

Dropdown menu with two actions:

Screenshot 2022-07-15 at 10 56 00

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

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Edit Site/packages/edit-site[Status] In ProgressTracking issues with work in progress

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions