Global styles navigation button: avoid visible text and accessible name mismatch

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

Other

10.49k stars 4.18k forks source link

Description

In the Site ditor 'site view', the navigation panel > Styles, shows a control to go to the Revisions:

The visible text of this button is, for example:

Last modified 3 days ago

the actual accessible nae provided by the button aria-label is:

aria-label="Revisions"

FOr the same reasons explained in https://github.com/WordPress/gutenberg/issues/66525, this kinf od mismatch must be avoided.

Also, interactive controls aren't the right place to provide information about states or values. They have to provide information about the button action.

Step-by-step reproduction instructions

Make sure you have some global styles revisions. If necessary, go to the Site Editor > Styles, make any change and save.
Go to the main navigation panel in the Site editor 'site view'.
Go to the Styles sub-panel.
Inspect the source of the button at the bottom of the panel.
Observe the visible text is about the last modified date, while the accessible name is 'Revisions'.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

[x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

[x] Yes

Please confirm which theme type you used for testing.

[ ] Block
[ ] Classic
[ ] Hybrid (e.g. classic with theme.json)
[ ] Not sure

Thinking a bit more into this, I think the best way to improve usability, accessibility, and consistency is by separating the two informations: action and state should be communicated separately. That requires a design change.

Functionally, this button is a navigation button, as in: users click on it and the editor switches to the revisions view. This action is best communicated with a visible label. Only adding an aria-label="Revisions"' helps screen reader users but isn't helpful for all other users. I would say this is a good example of how _not_ to usearia-label` as the visible text completely mismatches the actual button name and underlying action.

The state Last modified + humanTimeDiff is a valuable information but buttons aren't the right place to communicate states or values.

In this navigation panel there are other examples of 'navigation buttons' that bring users to specific views of the editor. However, in most of the cases, the open a sub-panel of the 'drill-down' menu. That's the reason why the use a chevron icon. Screenshot to illustrate:

I'm not sure a chevron icon would be appropriate in this case because this button does not open a sub-panel of the drill-down menu. To my understanding, the usage of the chevron icon was specifically meant to indicate the drill-down menu mechanism. I can't think of other buttons that directly switch the editor to a specific view other than the vairous 'Edit' buttons in the navigation menu, which use a completely different pattern.

It is also worth mentioning that the humanTimeDiff string mauy wrap in two lines when it's longer. Ideally this should be prevented. Screenshot to illustrate:

Overall, I'd lean towards making things as simple as possible. Something along the lines of the screenshots below could work. With and without chevron icon:

I'll submit a new PR as an alternative to https://github.com/WordPress/gutenberg/pull/66535

WordPress / gutenberg