fix: Improve "add block" text in NUX onboarding

[tofumatt]

Fixes #7506

Description

Updated the text to reference the "+" button instead of a non-existent "Add Block" button; also took the time to fix the British quotes and clarify the language. 🇺🇸!!!

How has this been tested?

Ran locally and updated jest snapshots.

Screenshots

Before

After

Types of changes

Text changes.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[afercia]

Hm, regarding the new text:
Click the “+” button (highlighted)

the point is screen reader users have no clue what a "+" button is in the Gutenberg UI, as the plus is only visual while the accessible name (given in this case by the aria-label) says "Add block". Also, they can't see what is highlighted or not 🙂

The button is announced as "Add block" and should be referenced as such. This was also mentioned in the first discussion around the NUX, see #3670 (comment)

The tip text should avoid any visual/positional reference; instead, it should try to describe in a simple language what a control is, where it is placed and what it does.

An option could be clarifying in the new wording that the button's name is "Add block" and visually appears as a plus icon. In the most simple way, something like Click the "Add block" button with the plus icon ... perhaps?

Aside: this is one more downside of icon-only controls: when they need to be "explained" to users, that needs to happen referencing both their appearance and their action name.

[tofumatt]

Click the "Add block" button with the plus icon

That's very confusing so I don't think is good.

The button is announced as "Add block" and should be referenced as such. This was also mentioned in the first discussion around the NUX, see #3670 (comment)

I thought about that, and what I'd really like is for there to be off-screen text that said "Add block". I'm lost on how to do that with our gettext function. I'll have a look, there must be prior art.

But showing that text to sighted users is decidedly inaccessible, because it forces them to hunt for a UI element ("Add block") that doesn't exist. 😄

[afercia]

But showing that text to sighted users is decidedly inaccessible,

A bit controversial, maybe 🙂the tooltip is displayed on hover and focus, users will learn the name of the "plus" button is "Add block". Ideally, the NUX tips should display the referenced UI controls in their hovered/focused state (alas, not possible for the Preview button I guess).

Regardless, I'd say that hiding important information assuming that is useful only for screen reader users is just that, an assumption. Clear, visible, text benefits everyone. For example, not all screen reader users are 100% blind...

[jasmussen]

A similar challeng has popped up with the modal component in development, where focus is automatically set on the Close button. In #6261 (comment) I suggested setting focus on the modal itself, so the first tabbing would go to the tab button.

What wizardry is being employed here, and could we do the same for the modal?

[karmatosed]

I am not sure we should say 'highlighted' cc @michelleweber for copy changes here before we merge those. We totally can work on things but I feel adjusting here needs at least an editorial review first from the person that worked on the copy.

[tofumatt]

Right on; updated the text a bit to remove the highlighted bit, but I want to make it clear the "+" button should be searched for so I settled on what's posted.

[michelleweber]

There's no reason not to split the difference, is there? E.g.,

"Click the "+" button to add a new block. There are blocks available for all kind of content -- insert text, headings, images, lists, and lots more."

[tofumatt]

There's no reason not to split the difference, is there? E.g.,

"Click the "+" button to add a new block. There are blocks available for all kind of content -- insert text, headings, images, lists, and lots more."

As @afercia pointed out: there is–screen reader users will not see "+" button so we should reference the "Add block" text as well. How about:

Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a
new block. There are blocks available for all kind of content: you can insert text,
headings, images, lists, and lots more!

[michelleweber]

Right! Thank you. I think your version is right on.

[tofumatt]

Editorial-approved copy added–should be good to go!

[noisysocks]

Code LGTM!

Changes approved by editorial and code approved by core team member so I'll count this as addressed! :-)

[tofumatt]

@karmatosed Dismissed your review because editorial and a developer approved it and your concern was with editorial. Let me know if I'm wrong and shouldn't have done that, but if dismissing it was okay then enjoy one less PR to review 😉

[karmatosed]

@tofumatt all good just wanted to get the copy review insight here, didn't need me :) Thanks.

[karmatosed]

Noting PR for the copy guidelines here: #7588