Add editor heading for screenreaders #3937

jasmussen · 2017-12-12T09:26:14Z

This is round 2 of #3801.

It mitigates/fixes #503 and fixes #2024.

What remains to be done in this branch is:

Make sure the text is translatable, right now it's hardcoded to "Edit Post"
Make sure the text is contextual (so it shows Edit Page, Edit CPT etc)
Consider whether we show "Add New Post" on a fresh post, and change that to "Edit Post" when returning

This is round 2 of #3801. It mitigates/fixes #503 and fixes #2024. What remains to be done in this branch is: - Make sure the text is translatable, right now it's hardcoded to "Edit Post" - Make sure the text is contextual (so it shows Edit Page, Edit CPT etc)

jasmussen · 2017-12-12T09:33:26Z

@afercia in gutenberg.php, there's the following:

/**
 * Project.
 *
 * The main entry point for the Gutenberg editor. Renders the editor on the
 * wp-admin page for the plugin.
 *
 * @todo Remove the temporary fix for the NVDA screen reader and use meaningful
 *       content instead. See pull at and issues #467 and #503.
 *
 * @since 0.1.0
 */
function the_gutenberg_project() {
	?>
	<div class="nvda-temp-fix screen-reader-text">&nbsp;</div>
	<div class="gutenberg">
		<h1 class="screen-reader-text">Edit Post</h1>
		<div id="editor" class="gutenberg__editor"></div>
		<div id="metaboxes" style="display: none;">
			<?php the_gutenberg_metaboxes(); ?>
		</div>
	</div>
	<?php
}

Given that there's now a h1 inside the gutenberg div, should the nvda temp div be removed?

This just uses the stock WordPress objects.

jasmussen · 2017-12-12T09:53:45Z

@gziolo in e682f1e I adopted/adapted some code to output a translated and contextual label for the heading. It seems to work well, insofar as it outputs "Edit Post" and "Edit Page" when it needs to. I haven't tested with custom post types, but I'm assuming since it taps into the same function, that it should work.

Can you help me with this? I need a sanity check my PHP, it's never been my forte. I'd also love some help testing with custom post types.

Finally, the $post_type_object->labels has entries for both Edit Post as well as Add New Post, but the logic to define when to output one vs. the other escapes me. Any advice here? Thanks a bunch.

gziolo · 2017-12-12T11:27:29Z

gutenberg.php

@@ -27,9 +27,12 @@
 * @since 0.1.0
 */
 function the_gutenberg_project() {
+	global $post_type, $post_type_object;
+	$post_type_object = get_post_type_object( $post_type );


I don't have much WP experience but it seems like $post_type_object might be null. I don't know if that will be caught in another place so we might provide fallback:

$screen_reader_text = ! empty( $post_type_object->labels->edit_item ) ? $post_type_object->labels->edit_item : __( 'Default text' );

It would make sense to double check with someone else. /cc @pento

We can assume that $post_type_object is set by the time the_gutenberg_project() is called.

For WordPress 4.9+:

For new posts, $post_type is sanity checked at the start of post-new.php, then $post_type_object is set. Later, the replace_editor filter is run, which calls gutenberg_init(), which may call the_gutenberg_project().

For existing posts, $post_type_object is set at the start of post.php, which bails before the replace_editor filter is run if $post_type_object is empty.

For <WordPress 4.9, gutenberg_intercept_edit_post() and gutenberg_intercept_post_new() simulate the same behaviour.

So, we don't need to include the $post_type_object = get_post_type_object( $post_type ); line, we can just access the $post_type_object global immediately.

gziolo · 2017-12-12T12:08:32Z

I tested it with the page and post types. It works as advertised. Let's confirm PHP bits before we merge it.

afercia · 2017-12-12T14:19:34Z

Given that there's now a h1 inside the gutenberg div, should the nvda temp div be removed?

Yes! We can get rid of that ugly hack 🙂

pento

One minor change, everything else looks good.

pento · 2017-12-22T02:35:13Z

gutenberg.php

@@ -27,9 +27,12 @@
 * @since 0.1.0
 */
 function the_gutenberg_project() {
+	global $post_type, $post_type_object;
+	$post_type_object = get_post_type_object( $post_type );


We can assume that $post_type_object is set by the time the_gutenberg_project() is called.

For WordPress 4.9+:

For new posts, $post_type is sanity checked at the start of post-new.php, then $post_type_object is set. Later, the replace_editor filter is run, which calls gutenberg_init(), which may call the_gutenberg_project().

For existing posts, $post_type_object is set at the start of post.php, which bails before the replace_editor filter is run if $post_type_object is empty.

For <WordPress 4.9, gutenberg_intercept_edit_post() and gutenberg_intercept_post_new() simulate the same behaviour.

So, we don't need to include the $post_type_object = get_post_type_object( $post_type ); line, we can just access the $post_type_object global immediately.

jasmussen · 2017-12-22T08:58:37Z

Thanks a bunch for the review! I pushed the change.

If the change was correctly interpreted, and this is good to merge, feel free to do so. I'm heading out for some holiday today! ❤️

gziolo · 2017-12-22T09:04:33Z

gutenberg.php

@@ -25,7 +25,6 @@
 */
 function the_gutenberg_project() {
 	global $post_type, $post_type_object;


@jasmussen you don't need $post_type in here. Otherwise is all good to go :)

gziolo · 2017-12-22T09:05:52Z

I will give it a spin and merge today :)

pento

👍🏻 after the change @gziolo mentioned.

mtias · 2018-01-11T11:14:40Z

editor/components/post-title/index.js

@@ -110,7 +110,7 @@ class PostTitle extends Component {
 				tabIndex={ -1 /* Necessary for Firefox to include relatedTarget in blur event */ }
 			>
 				{ isSelected && <PostPermalink /> }
-				<h1>
+				<div>


@jasmussen was this div needed?

It was needed in order to let this "pseudo" block inherit styles that look exactly like our other blocks, without writing completely different CSS.

I did try to apply the on-select border to the textarea itself, or pseudo selectors, but it added a ton of complexity to the CSS, and I don't think I was able to get the responsive behavior to be the same. I decided it wasn't worth a complete rewrite to save this div, and I'm still unconvinced it can be done.

jasmussen added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Status] In Progress Tracking issues with work in progress labels Dec 12, 2017

jasmussen self-assigned this Dec 12, 2017

Make post title contextual and translatable

e682f1e

This just uses the stock WordPress objects.

gziolo reviewed Dec 12, 2017

View reviewed changes

gziolo approved these changes Dec 12, 2017

View reviewed changes

Remove NVDA hack.

98e560a

jasmussen requested review from aduth, youknowriad and pento December 20, 2017 08:53

pento requested changes Dec 22, 2017

View reviewed changes

Remove unnecessary line.

b614f03

gziolo reviewed Dec 22, 2017

View reviewed changes

pento approved these changes Dec 22, 2017

View reviewed changes

Remove unused variable from the_gutenberg_project function

0c4457c

gziolo merged commit f023754 into master Dec 22, 2017

gziolo deleted the try/edit-heading-round-2 branch December 22, 2017 12:05

mtias reviewed Jan 11, 2018

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add editor heading for screenreaders #3937

Add editor heading for screenreaders #3937

jasmussen commented Dec 12, 2017 •

edited

Loading

jasmussen commented Dec 12, 2017

jasmussen commented Dec 12, 2017

gziolo Dec 12, 2017

pento Dec 22, 2017

gziolo commented Dec 12, 2017

afercia commented Dec 12, 2017

pento left a comment

pento Dec 22, 2017

jasmussen commented Dec 22, 2017

gziolo Dec 22, 2017

gziolo commented Dec 22, 2017

pento left a comment

mtias Jan 11, 2018

jasmussen Jan 11, 2018

Add editor heading for screenreaders #3937

Add editor heading for screenreaders #3937

Conversation

jasmussen commented Dec 12, 2017 • edited Loading

jasmussen commented Dec 12, 2017

jasmussen commented Dec 12, 2017

gziolo Dec 12, 2017

Choose a reason for hiding this comment

pento Dec 22, 2017

Choose a reason for hiding this comment

gziolo commented Dec 12, 2017

afercia commented Dec 12, 2017

pento left a comment

Choose a reason for hiding this comment

pento Dec 22, 2017

Choose a reason for hiding this comment

jasmussen commented Dec 22, 2017

gziolo Dec 22, 2017

Choose a reason for hiding this comment

gziolo commented Dec 22, 2017

pento left a comment

Choose a reason for hiding this comment

mtias Jan 11, 2018

Choose a reason for hiding this comment

jasmussen Jan 11, 2018

Choose a reason for hiding this comment

jasmussen commented Dec 12, 2017 •

edited

Loading