Skip to content

Commit

Permalink
Improve accessibility of video block select poster image. (#14752)
Browse files Browse the repository at this point in the history
## Description
Related in #14416 we have a similar issue but for the featured image that issue is being addressed on #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.
  • Loading branch information
jorgefilipecosta authored Apr 11, 2019
1 parent 4822a87 commit 9454453
Showing 1 changed file with 32 additions and 4 deletions.
36 changes: 32 additions & 4 deletions packages/block-library/src/video/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 } );
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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' ) }
Expand Down Expand Up @@ -275,4 +300,7 @@ class VideoEdit extends Component {
}
}

export default withNotices( VideoEdit );
export default compose( [
withNotices,
withInstanceId,
] )( VideoEdit );

0 comments on commit 9454453

Please sign in to comment.