New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Improve "add block" text in NUX onboarding #7511

Merged
merged 3 commits into from Jun 25, 2018

Conversation

Projects
None yet
6 participants
@tofumatt
Member

tofumatt commented Jun 23, 2018

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

screen shot 2018-06-22 at 10 32 14 am

After

screenshot 2018-06-23 17 32 25

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.

@tofumatt tofumatt requested a review from WordPress/gutenberg-core Jun 23, 2018

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 23, 2018

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 馃檪

screen shot 2018-06-23 at 18 44 50

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

This comment has been minimized.

Member

tofumatt commented Jun 23, 2018

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

This comment has been minimized.

Contributor

afercia commented Jun 23, 2018

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

This comment has been minimized.

Contributor

jasmussen commented Jun 25, 2018

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 karmatosed self-requested a review Jun 25, 2018

@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

This comment has been minimized.

Member

tofumatt commented Jun 25, 2018

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

This comment has been minimized.

michelleweber commented Jun 25, 2018

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

This comment has been minimized.

Member

tofumatt commented Jun 25, 2018

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鈥搒creen 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 鈥+鈥 (鈥淎dd 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

This comment has been minimized.

michelleweber commented Jun 25, 2018

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

@tofumatt tofumatt requested review from WordPress/gutenberg-core and karmatosed Jun 25, 2018

@tofumatt

This comment has been minimized.

Member

tofumatt commented Jun 25, 2018

Editorial-approved copy added鈥搒hould 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

This comment has been minimized.

Member

tofumatt commented Jun 25, 2018

@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 馃槈

@tofumatt tofumatt merged commit b454f1d into master Jun 25, 2018

2 checks passed

codecov/project 46.76% (-0.04%) compared to b16a8b2
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@tofumatt tofumatt added this to the 3.2 milestone Jun 25, 2018

@youknowriad youknowriad deleted the fix/7506-add-block-text-in-nux-is-not-visible branch Jun 26, 2018

oxyc added a commit to generoi/gutenberg that referenced this pull request Jun 26, 2018

Merge branch 'master' of https://github.com/WordPress/gutenberg
* 'master' of https://github.com/WordPress/gutenberg: (69 commits)
  fix: Show permalink editor in editor (WordPress#7494)
  Fix text wrapping in Firefox. (WordPress#7472)
  Try another approach to fixing the sibling inserter in Firefox (WordPress#7530)
  fix: Improve "add block" text in NUX onboarding (WordPress#7511)
  Implement core style of including revisions data on Post response (WordPress#7495)
  Testing: Add e2e test for PluginPostStatusInfo (WordPress#7284)
  Add end 2 end test for sidebar behaviours on mobile and desktop. (WordPress#6877)
  Only save metaboxes when it's not an autosave (WordPress#7502)
  Fix broken links in documentation (WordPress#7532)
  Remove post type 'viewable' compatibility shim (WordPress#7496)
  Fix typo. (WordPress#7528)
  Blocks: Remove wrapping div from paragraph block (WordPress#7477)
  fix: change import for InnerBlocks (WordPress#7484)
  Polish library just a teeeeensy bit (WordPress#7522)
  feat: Add snapshot update script (WordPress#7514)
  Display server error message when one exists (WordPress#7434)
  Fix issues with gallery in IE11. (WordPress#7465)
  Polish region focus style (WordPress#7459)
  Fix IE11 formatting toolbar visibility (WordPress#7413)
  Update plugin version to 3.1. (WordPress#7402)
  ...
@karmatosed

This comment has been minimized.

Member

karmatosed commented Jun 26, 2018

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

@karmatosed

This comment has been minimized.

Member

karmatosed commented Jun 27, 2018

Noting PR for the copy guidelines here: #7588

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment