Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
fix: Improve "add block" text in NUX onboarding #7511
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.
Types of changes
Hm, regarding the new text:
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)
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
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.
That's very confusing so I don't think is good.
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.
A bit controversial, maybe
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...
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?
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: