Native Image component includes outdated accessibility hint

[dcalhoun]

Description

When using a screen reader to navigate images in the native editor, an erroneous "Double tap and hold to edit" hint is read aloud. This discrepancy likely originates from #40651.

Step-by-step reproduction instructions

1. Add an Image or Media & Text block.
2. Add media to the block.
3. Enable Voice Over.
4. Move focus to the image.

Expected behaviour

An accurate hint is read aloud, e.g. "Double tap to view larger."

Actual behaviour

An inaccurate hint is read aloud: "Double tap and hold to edit."

Screenshots or screen recording (optional)

RPReplay_Final1666189917.MP4

WordPress information

• WordPress version: 6.1
• Gutenberg version: 14.3.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Geologist

Device information

• Device: iPhone SE
• Operating system: iOS 16
• WordPress app version: 1.84.0

[dcalhoun]

I explored fixing this briefly, but paused as it was not completely clear if the label should be removed or updated. The a11y hint/state/action also appears to spread across the Image component and Image/Media & Text edit components. Both the Image and Media & Text edit components support various actions depending upon the state of the media, so we should likely have a dynamic accessibility hint.

gutenberg/packages/block-library/src/image/edit.native.js

Lines 331 to 346 in 88a1f7a

	onImagePressed() {
	const { attributes, image } = this.props;
	if ( this.state.uploadStatus === UPLOAD_STATE_UPLOADING ) {
	requestImageUploadCancelDialog( attributes.id );
	} else if (
	attributes.id &&
	getProtocol( attributes.url ) === 'file:'
	) {
	requestImageFailedRetryDialog( attributes.id );
	} else if ( ! this.state.isCaptionSelected ) {
	requestImageFullscreenPreview(
	attributes.url,
	image && image.source_url
	);
	}

gutenberg/packages/block-library/src/media-text/media-container.native.js

Lines 88 to 107 in 88a1f7a

	onMediaPressed() {
	const { isUploadInProgress } = this.state;
	const {
	mediaId,
	mediaUrl,
	mediaType,
	isMediaSelected,
	onMediaSelected,
	} = this.props;
	if ( isUploadInProgress ) {
	requestImageUploadCancelDialog( mediaId );
	} else if ( mediaId && getProtocol( mediaUrl ) === 'file:' ) {
	requestImageFailedRetryDialog( mediaId );
	} else if ( mediaType === MEDIA_TYPE_IMAGE && isMediaSelected ) {
	requestImageFullscreenPreview( mediaUrl );
	} else if ( mediaType === MEDIA_TYPE_IMAGE ) {
	onMediaSelected();
	}
	}

[fluiddot]

I explored fixing this briefly, but paused as it was not completely clear if the label should be removed or updated. The a11y hint/state/action also appears to spread across the Image component and Image/Media & Text edit components. Both the Image and Media & Text edit components support various actions depending upon the state of the media, so we should likely have a dynamic accessibility hint.

Good point @dcalhoun , it's true that the Image component depending on its state should provide different actions. Hence, I also lean towards implementing a dynamic accessibility hint depending on that. However, I'm wondering if we could do this in two steps:

1. Update the hint to Double tap to view larger. to avoid confusion with the hold to edit message.
2. Introduce dynamic accessibility hints that consider the media states.

WDYT?

[dcalhoun]

@fluiddot yes, I agree it likely makes sense to fix the erroneous a11y first, then follow up with more robust, dynamic a11y labels.