Improve accessibility of video block select poster image. (WordPress#…

…14752)

## Description
Related in WordPress#14416 we have a similar issue but for the featured image that issue is being addressed on WordPress#14593.

Here the solution is not as perfect, as we don't have the alt text of the poster image only the URL was saved in the attributes.

## How has this been tested?
I used the voice over utility and I checked that a descriptive message is announced after the select/replace poster image button gains focus.

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

@@ -24,7 +24,14 @@ import {
 } from '@wordpress/block-editor';
 import { mediaUpload } from '@wordpress/editor';
 import { Component, Fragment, createRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import {
+	__,
+	sprintf,
+} from '@wordpress/i18n';
+import {
+	compose,
+	withInstanceId,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -126,12 +133,19 @@ class VideoEdit extends Component {
 			controls,
 			loop,
 			muted,
+			playsInline,
 			poster,
 			preload,
 			src,
-			playsInline,
 		} = this.props.attributes;
-		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
+		const {
+			className,
+			instanceId,
+			isSelected,
+			noticeOperations,
+			noticeUI,
+			setAttributes,
+		} = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
 			this.setState( { editing: true } );
@@ -165,6 +179,7 @@ class VideoEdit extends Component {
 				/>
 			);
 		}
+		const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
 
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
@@ -232,11 +247,21 @@ class VideoEdit extends Component {
 											isDefault
 											onClick={ open }
 											ref={ this.posterImageButton }
+											aria-describedby={ videoPosterDescription }
 										>
 											{ ! this.props.attributes.poster ? __( 'Select Poster Image' ) : __( 'Replace image' ) }
 										</Button>
 									) }
 								/>
+								<p
+									id={ videoPosterDescription }
+									hidden
+								>
+									{ this.props.attributes.poster ?
+										sprintf( __( 'The current poster image url is %s' ), this.props.attributes.poster ) :
+										__( 'There is no poster image currently selected' )
+									}
+								</p>
 								{ !! this.props.attributes.poster &&
 									<Button onClick={ this.onRemovePoster } isLink isDestructive>
 										{ __( 'Remove Poster Image' ) }
@@ -275,4 +300,7 @@ class VideoEdit extends Component {
 	}
 }
 
-export default withNotices( VideoEdit );
+export default compose( [
+	withNotices,
+	withInstanceId,
+] )( VideoEdit );