Entire "Page Updated. View Page" button should be clickable, not just the text

[highprrrr]

When you Save/Update a post/page/etc, a small button appears in the bottom left corner. This entire button should be clickable, but only the text inside the button is clickable. This is very frustrating because if you miss the text the button disappears.

This is frustrating for me and I have fine vision. I imagine it's even more frustrating for folks who maybe their vision isn't exactly 20/20.

[sabernhardt]

Hi and thanks for the report!

This discussion belongs on GitHub, and the main issue about "snackbar" message usability is
​https://github.com/WordPress/gutenberg/issues/16391

The full button is clickable, but clicking outside the View Page link dismisses the message. The link's small target size is more problematic with the time limit. Messages with links probably do not belong in a snackbar.

Click target areas for "Page updated. View Page":

• Snackbar button (<div role="button">): 217 by 42.2
• "View Page" link: 60 by 18.2

[highprrrr]

Yes I suppose I should have been more clear. The whole button is "clickable" but what I meant was that clicking ANYWHERE in that button should open the page, rather than requiring that the user click specifically on the text.

The GitHub link doesn't mention this, it mostly talks about whether the button is even necessary at all and making it stick around longer than 10 seconds. I'm new to contributing here, are you saying I should add my thoughts to that GitHub issue you linked to?

[sabernhardt]

This might be better in a new issue, but it belongs on the Gutenberg repository.

[joedolson]

This is definitely a Gutenberg issue; if you open a new issue on the Gutenberg repository, @highprrrr, just comment here to let us know and we can close this as reported-upstream. But I'll wait until it's actually reported before closing.

[williampatton]

We discussed this briefly today in the accessibility bug scrub and were not 100% certain about the ask and its reasoning.

What we think the request is about is: making the notification button a link to the edited page (rather than the notification simply containing a link to that edited page).

The snack bar notification in question already has a bound action that is used as a dismissal function. I believe swapping its behaviour would require adding an alternative explicit dismiss button. But that dismissal action is part of the problem here because missing the text when clicking in the notification dismisses the notification.

Is the actual problem that it is hard to find or reach an element that will allow someone to see the page they just edited? Aside from this notice what other options are there to provide a better way for people to reach the edited page after saving? I am wondering if an alternative option may be the better approach to solving this overall.

[highprrrr]

The issue is that 90% of the time I miss the text, which dismisses the button altogether.

I don't understand why the whole button isn't the link.

The button dismisses itself after a few seconds anyways, seems unnecessary to have a manual dismissal.

[joedolson]

I've added a comment to the snackbar tracking issue that refers back to this issue. There's a lot of room for changes to the snackbar component, and this is a reasonable inclusion.

I'll admit that I never pay any attention to the snackbar notifications; for me, they are so subtle that they might as well not exist. I've never used that link to view the new page/post, so it isn't something that has really occurred to me. However, if that's the link you're attempting to use, I agree that it's difficult: moving your mouse across that distance quickly, then landing on the text specifically, and not the button to close the snackbar is tricky.

For future reference, if you wanted to save yourself the trouble, you can use the 'View Post' link that's in the editor header, next to the save buttons. It appears there after publishing.