fix: Improve empty block text #11560

tofumatt · 2018-11-07T02:55:49Z

Consolidate the "Write your story" and "Add text or type" placeholders, while also adding context to the placeholder with an aria-label.

Screenshots

Fix #9076 Fix #5591

chrisvanpatten · 2018-11-07T02:59:38Z

packages/block-library/src/paragraph/edit.js

@@ -245,7 +245,8 @@ class ParagraphBlock extends Component {
 					onMerge={ mergeBlocks }
 					onReplace={ this.onReplace }
 					onRemove={ () => onReplace( [] ) }
-					placeholder={ placeholder || __( 'Add text or type / to add content' ) }
+					aria-label={ __( 'Type text or use the forward slash key to insert a block' ) }
+					placeholder={ placeholder || __( 'Type text or press “/” to select a block' ) }


It's a super minor nit pick but why can't these labels be identical, with the aria label imply replacing "/" with "forward slash key" so it's clearer how screen readers should read it?

E.g.

Type text or press the forward slash key to insert a block

and

Type text or press the "/" key to insert a block

It's not clear why the text itself would need to be different in these cases, aside from the visible placeholder showing the slash visually instead of as text.

Works for me actually, good point 👍

youknowriad · 2018-11-07T10:21:56Z

packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

+	<WithSelect(WithDispatch(InserterWithShortcuts)) />
+	<WithSelect(IfCondition(Inserter))
+		position="top right"
+	/>


Anything that might have triggered all these tabs? I guess jest generates spaces by default right?

I just typed u after running test-unit:watch to update the snapshots, so I blame Jest. Should I have run something else?

No, if it's generated by jest this way than maybe the old snapshot was not correct.

youknowriad · 2018-11-07T10:22:50Z

packages/editor/src/components/post-text-editor/index.js

@@ -80,7 +80,7 @@ export class PostTextEditor extends Component {
 					onBlur={ this.stopEditing }
 					className="editor-post-text-editor"
 					id={ `post-content-${ instanceId }` }
-					placeholder={ decodedPlaceholder || __( 'Write your story' ) }
+					placeholder={ decodedPlaceholder || __( 'Type text or press “/” to insert a block' ) }


You can't press "/" or insert a block. This is the text editor, you can just type HTML :)

Oh, oops, right. I think it too had the “Write your story” prompt and I just got confused. I’ll update it, my bad! 😅

This will actually still show because we pass the same placeholder to the code editor. We probably shouldn't do that, but it's a different issue...

It's made visible with this PR though, I'd be in favor of dropping the bodyPlaceholder support here.

youknowriad · 2018-11-07T17:28:09Z

This is looking good to me, but I prefer to bring people that I know care more than me about "Copy". cc @jasmussen @mtias

jasmussen · 2018-11-07T18:57:16Z

👍 👍 consolidation, 👍 👍 PR.

However I prefer the suggestion from the old PR, which was: Start writing or type / to choose a block.

tofumatt · 2018-11-07T19:04:15Z

However I prefer the suggestion from the old PR, which was: Start writing or type / to choose a block.

Actually, I agree. Changed!

chrisvanpatten · 2018-11-07T20:33:21Z

packages/block-library/src/paragraph/edit.js

@@ -246,7 +246,7 @@ class ParagraphBlock extends Component {
 					onReplace={ this.onReplace }
 					onRemove={ () => onReplace( [] ) }
 					aria-label={ __( 'Empty block; type text or press the forward slash key to insert a block' ) }


should "type text" be replaced with "start writing"?

For a screen reader I actually think "type text" is better than "start writing".

youknowriad · 2018-11-08T08:20:01Z

packages/editor/src/components/post-text-editor/index.js

@@ -71,7 +71,7 @@ export class PostTextEditor extends Component {
 		return (
 			<Fragment>
 				<label htmlFor={ `post-content-${ instanceId }` } className="screen-reader-text">
-					{ decodedPlaceholder || __( 'Write your story' ) }
+					{ decodedPlaceholder || __( 'Type text' ) }


Let's remove the decodedPlaceholder from this component and ship.

Sounds good; if that means this is otherwise good to go mind explicitly reviewing it now? 😄

youknowriad

LGTM 👍

youknowriad · 2018-11-08T16:06:05Z

(Looks like there's some failing tests though)

tofumatt · 2018-11-08T16:09:01Z

Shoot, must have run the wrong snapshot update script. Fixed.

afercia · 2018-11-08T18:25:58Z

@tofumatt this way, it will announce "Empty block" even if the block is not empty... can this be reviewed please? Also, changes in this area should take into consideration #1659. Thank you.

tofumatt · 2018-11-08T20:14:36Z

Argh, right, sorry. Okay, I'll file a follow-up PR for this tonight. Thanks so much for that @afercia, my bad. 😓

Fix issue introduced in #11560

jasmussen · 2018-11-09T07:53:54Z

Thanks for working on this, and apologies for missing this. But right now the text says

Start writing or press / to insert a block

The suggestion was:

Start writing or type / to choose a block

I defer to any other considerations, but I honestly prefer the initially suggested phrasing. Notaby "press /" feels weird to me, because on a european keyboard this is not a separate key — I have to press Shift + 7 to insert a /. Therefore "type" feels more natural.

Additionally, I'm not a fan of the term "insert" for blocks, even though it's accurate. I far prefer "add", or as was suggested "choose a block". The latter implies your caret is already in a block, and you can change the type of it, which is sort of accurate as anything you add replaces the appender block you were in.

* fix: Only show aria-label when content is empty Fix issue introduced in #11560 * Improve aria labels so they reflect state of block/empty block

fix: Improve empty block text

1a747fc

Fix #9076 Fix #5591

tofumatt added this to the 4.3 milestone Nov 7, 2018

tofumatt requested a review from a team November 7, 2018 02:55

chrisvanpatten reviewed Nov 7, 2018

View reviewed changes

tofumatt added 3 commits November 7, 2018 03:10

Tweak labels

33a7a9a

Make it consistent

3d1e777

Make it MORE consistent

4f11648

youknowriad mentioned this pull request Nov 7, 2018

Change the write story placeholder #9314

Closed

youknowriad reviewed Nov 7, 2018

View reviewed changes

Fix block inserter shortcut text

41e5a28

jasmussen requested review from alexislloyd and karmatosed November 7, 2018 18:58

Use suggested text

8103e71

chrisvanpatten reviewed Nov 7, 2018

View reviewed changes

youknowriad reviewed Nov 8, 2018

View reviewed changes

Do not use placeholder in code editor

a2c2cac

tofumatt requested a review from youknowriad November 8, 2018 12:31

youknowriad approved these changes Nov 8, 2018

View reviewed changes

fix tests

2bf0f30

tofumatt merged commit ddf8c07 into master Nov 8, 2018

tofumatt deleted the fix/5591-improve-new-block-text branch November 8, 2018 16:28

mtias added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Type] Copy Issues or PRs that need copy editing assistance labels Nov 8, 2018

tofumatt added a commit that referenced this pull request Nov 9, 2018

fix: Only show aria-label when content is empty

508fa76

Fix issue introduced in #11560

tofumatt mentioned this pull request Nov 9, 2018

fix: Change aria-label depending on content of paragraph block #11653

Merged

timwright12 mentioned this pull request Nov 12, 2018

Give editable fields better labels #1659

Closed

designsimply mentioned this pull request Dec 3, 2018

Corrections to "Start writing or type / to choose a block" #12557

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Improve empty block text #11560

fix: Improve empty block text #11560

tofumatt commented Nov 7, 2018 •

edited

Loading

chrisvanpatten Nov 7, 2018 •

edited

Loading

tofumatt Nov 7, 2018

youknowriad Nov 7, 2018

tofumatt Nov 7, 2018

youknowriad Nov 7, 2018

youknowriad Nov 7, 2018

tofumatt Nov 7, 2018

tofumatt Nov 7, 2018

youknowriad Nov 7, 2018

youknowriad commented Nov 7, 2018

jasmussen commented Nov 7, 2018

tofumatt commented Nov 7, 2018

chrisvanpatten Nov 7, 2018

tofumatt Nov 7, 2018

youknowriad Nov 8, 2018

tofumatt Nov 8, 2018

youknowriad left a comment

youknowriad commented Nov 8, 2018

tofumatt commented Nov 8, 2018 •

edited

Loading

afercia commented Nov 8, 2018 •

edited

Loading

tofumatt commented Nov 8, 2018

jasmussen commented Nov 9, 2018 •

edited

Loading

fix: Improve empty block text #11560

fix: Improve empty block text #11560

Conversation

tofumatt commented Nov 7, 2018 • edited Loading

Screenshots

chrisvanpatten Nov 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Nov 7, 2018

jasmussen commented Nov 7, 2018

tofumatt commented Nov 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad commented Nov 8, 2018

tofumatt commented Nov 8, 2018 • edited Loading

afercia commented Nov 8, 2018 • edited Loading

tofumatt commented Nov 8, 2018

jasmussen commented Nov 9, 2018 • edited Loading

tofumatt commented Nov 7, 2018 •

edited

Loading

chrisvanpatten Nov 7, 2018 •

edited

Loading

tofumatt commented Nov 8, 2018 •

edited

Loading

afercia commented Nov 8, 2018 •

edited

Loading

jasmussen commented Nov 9, 2018 •

edited

Loading