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

Template editor: duplicate buttons to open the Command Centre and incorrect labeling #51729

Open
afercia opened this issue Jun 21, 2023 · 0 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Post /packages/edit-post [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jun 21, 2023

Description

When editing a template from the Post Editor, the editor switches to the 'Template Editor'. In this editor mode, the top bar shows two buttons that do the same thing. They both open the Command centre.

Screenshot 2023-06-20 at 09 45 52

I'm not sure what the reasoning behind providing two buttons that do the same thing is. Seems to me that's less than ideal.

Additionally, there's no visual or semantic labelling to tell users what these two buttons actually do. Their labeling doesn't match the actual buttons action. They're labeled, respectively:

  • "Editing template: {template name here}"
  • "⌘K"

For the first button:
This is one more case where an interactive control name is used to communicate the current UI state or mode, or selected value. See for example the lengthy discussion about the "Visibility" and "Publish" labels. I'd like to point out again that this is just a bad practice. Any interactive control (a button in this case) should clearly communicate what it does and should be labeled as such. Instead, using the accessible name for extraneous purposes is a no go.

For the second button:
I'm not sure I can understand how Command K can be considered a meaningful label for the button action. That's the related keyboard shortcut, not the actual button action.

Worth also noting that in the Site Editor, there's only one button to open the Command centre:

Screenshot 2023-06-20 at 10 01 51

This button has its own problems as well, they're reported at #51460. Anyways, these two separate components should maybe be abstracted a bit and unified in a single component.

Back to the double button and incorrect labeling: we're now a few days from WordPress 6.3 Beta 1. I'm not sure shipping these buttons in their current state is any ideal for the new release, as this appears to be a largely unpolished UI.

Step-by-step reproduction instructions

  • Go to the Post editor.
  • In the Settings sidebar, click the template name.
  • A popover opens: click 'Edit template'.
  • The editor switches to the Template Editor mode.
  • Observe in the toop bar there are two buttons that do the same thing: they open the Command centre.
  • Observ ethe labeling of both buttons doesn't tell anything about what they do.

Screenshots, screen recording, code snippet

No response

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 [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Post /packages/edit-post [a11y] Labelling labels Jun 21, 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 Post /packages/edit-post [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

2 participants