Site Editor: consistent name for the Edit buttons

[afercia]

Description

Follow up to https://github.com/WordPress/gutenberg/pull/47343

Actually, in the Site Editor there are two buttons to switch the editor from 'Browse mode' to 'Edit mode':

• The button at the top of the navigation. Its accessible name is 'Edit' (the button text).
• The preview iframe, which has a role="button" attribute and an aria-label 'Editor canvas'.

These buttons do the same thing and should have the same name. The name should clearly communicate the action. 'Editor canvas' isn't ideal. For consistency and clarity, it should be changed to 'Edit'.

Step-by-step reproduction instructions

• Go to the Site Editor.
• Inspect the source with your browser dev tools.
• Hint: use Chrome dev tools and switch to the 'Accessibility' tab.
• Observe the accessible name of the first button is 'Edit'.
• Observe the accessible name of the iframe with role="button" is 'Editor canvas'.

Screenshots, screen recording, code snippet

The two buttons as announced by VoiceOver:

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

[carolinan]

You also mentioned that the button text changes depending on screen size?

[abhi3315]

You also mentioned that the button text changes depending on screen size?

As mentioned in https://github.com/WordPress/gutenberg/pull/47343#issuecomment-1401518736 by @afercia

I'm not sure what's the reasoning for this. 'Edit' and 'View' are two pretty different logical concepts. Either the button action should always be 'Edit' or always be 'View Editor'.

Actually, this View Editor button is actually showing the editor only. I think the labelling View Editor is serving its purpose. After clicking View Editor, Editor is shown.

[afercia]

Ah, so on mobile it's a two-steps flow. I missed that.

1. First, click on a template in the navigation. Visually, nothing appears to happen.
2. Then, click 'View editor'. The template preview is shown.
3. Then, click 'Edit'. The template can now be edited.

To be fair, I think that's a bit confusing. When in the mobile view, I'm not sure what's the purpose of showing the preview in the first place. On desktop, the preview is visible while I navigate through the templates. Instead, on mobile the preview is initially hidden. As a user, when I click 'View editor' I would expect to be in the Editor in edit mode. Why do I need an intermediate step for the preview?

Couple more notes:

1 The WP logo 'button' does different things depending on the UI state. Visually, it's always the same 'button' but its functionality changes. That's arguably a good UI. While this happens also on desktop, it's even more confusing on mobile.

2 When clicking 'Manage all templates' or 'Manage all template parts':

On desktop, the 'Edit' button disappears. That makes totally sense, as there's nothing to 'Edit' in the templates list:

Instead, on mobile the 'View editor' button is still there:

That's arguably correct as clicking on 'View editor' doesn't bring me to the Editor in edit mode. Instead, it brings me to the templates list:

In the templates list I would expect to see the 'Add New' button at the top right. Instead, I see the 'Edit' button. Clicking this button doesn't edit anything. Instead, it makes the top bar change and finally shoe the 'Add New' button:

Overall, it appears there's still a lot of room for improvement in this flow.

[abhi3315]

@afercia I do agree. We have to think of a clear flow in the mobile screens and break down it into smaller tasks

[benridane]

• Gutenberg Version: 17.8.0-rc.1 I checked with the latest version of Gutenberg and it seems that the button names are obsolete. The button names have been replaced with ICON and the problem seems to be resolved.

[afercia]

Thank you @benridane yes that's correct.

To recap the current state of this issue:

Many things have changed in the meantime:

• The buttons to switch the editor from 'view' mode to 'edit' mode are now icon buttons.
• Icon buttons are inherently less accessible than buttons with visible text.
• These buttons are labeled 'Edit' and their accessible name is visually exposed via a tooltip:

• The clickable preview is actually the <iframe> element of the editor. Its native role is overridden via an ARIA role attribute so that it is perceived as a button labeled 'Editor canvas'. Overriding a native role this way is a little hacky and arguable. It is labeled 'Editor canvas', which isn't consistent with other buttons that have the same functionality.

https://github.com/WordPress/gutenberg/blob/599f3365232316242a2f92d8fdb5a05e0b0accaa/packages/edit-site/src/components/block-editor/editor-canvas.js#L55-L58