Block Bindings: Improve accessibility of bound paragraphs when using a screenreader in Navigation Mode

[artemiomorales]

Description

Actual: Currently, when tabbing to a bound paragraph in Navigation Mode, the NVDA screenreader announces the bound paragraph's original content, not its override content, which may be confusing and giver users incorrect information of what is displayed on the page.

Expected: The screenreader announces the override content, not the original content.

Step-by-step reproduction instructions

1. Register post meta by adding this snippet to your theme's functions.php

add_action( 'init', 'test_block_bindings' );

function test_block_bindings() {
	register_meta(
		'post',
		'text_field',
		array(
			'show_in_rest'      => true,
			'single'            => true,
			'type'              => 'string',
			'default'           => 'default text value',
		)
	);
}

2. Add a paragraph block bound to the custom field using the Code Editor

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_field"}}}}} -->
<p>Bound paragraph</p>
<!-- /wp:paragraph -->

3. Override the paragraph content by typing into the bound paragraph.

4. Using the NVDA screen reader, navigate to the bound paragraph in Navigation Mode, and see that the paragraph's original content, rather than its bound content, is announced.

Screenshots, screen recording, code snippet

(Pardon the background noise — I was unable to use my isolated microphone to capture the sound of the screenreader)

accessibility_editable_bound_fields.mp4

Environment info

• Testing using NVDA screen reader on Windows Firefox
• WP 6.5, Gutenberg 18.7.0-rc.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

This happens with all screen readers. Actually, the 'black box' is a button element. Screen readers announce the button aria-label which contains additional information about the block like:

• The block type/
• The Row / Column posiiton.
• The block content, if any.

Example of this button markup:

<button
    type="button"
    class="components-button block-selection-button_select-button"
    aria-label="Paragraph Block. Row 1. Bound paragraph"
>
        Paragraph
</button>

The actual block content, if any, is appended to the aria-label.

This is an accessibility feature that was added a while ago to give screen reader users more context about what the block content is.

The Bindings API behavior introduces a discrepancy between the content in the block markup (and post_content) and the visible actual content retrieved from the provided source.

This is a problem not only for screen readers but also for any other software or plugins that retrieve the post content and assume it is the 'real' content while. Thinking for example at plugins that run analysis of the post content Cc @enricobattocchi

[artemiomorales]

Since Navigation Mode was removed in #65603, I'm closing this. We can reopen and continue discussion if need be.