Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
afercia opened this issue Jul 18, 2022 · 2 comments
Closed

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

afercia opened this issue Jul 18, 2022 · 2 comments
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 Progress Tracking issues with work in progress

Comments

@afercia
Copy link
Contributor

afercia commented Jul 18, 2022

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

@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Site /packages/edit-site labels Jul 18, 2022
@afercia afercia self-assigned this Jul 19, 2022
@afercia
Copy link
Contributor Author

afercia commented Jul 19, 2022

Additionally: the blue dot to indicate a template has been customized shows some info only on hover. There's no other indication available that informs keyboard users or assistive technology users a template has been customized.

Screenshot 2022-07-19 at 14 35 05

@afercia
Copy link
Contributor Author

afercia commented Nov 29, 2023

I'm going to close this issue for the reasons mentioned in the related PR here: #42555 (comment)
Basically, this now needs a broader discussion as the ellipsis button is now used 'in isolation' in several places.

@afercia afercia closed this as completed Nov 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Site /packages/edit-site [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant