diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 1d4936d67e02b..9deae12a3ca02 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -18,9 +18,9 @@ class GalleryImage extends Component { constructor() { super( ...arguments ); - this.onImageClick = this.onImageClick.bind( this ); + this.onSelectImage = this.onSelectImage.bind( this ); this.onSelectCaption = this.onSelectCaption.bind( this ); - this.onKeyDown = this.onKeyDown.bind( this ); + this.onRemoveImage = this.onRemoveImage.bind( this ); this.bindContainer = this.bindContainer.bind( this ); this.state = { @@ -44,7 +44,7 @@ class GalleryImage extends Component { } } - onImageClick() { + onSelectImage() { if ( ! this.props.isSelected ) { this.props.onSelect(); } @@ -56,7 +56,7 @@ class GalleryImage extends Component { } } - onKeyDown( event ) { + onRemoveImage( event ) { if ( this.container === document.activeElement && this.props.isSelected && [ BACKSPACE, DELETE ].indexOf( event.keyCode ) !== -1 @@ -108,11 +108,12 @@ class GalleryImage extends Component { src={ url } alt={ alt } data-id={ id } - onClick={ this.onImageClick } - onFocus={ this.onImageClick } - onKeyDown={ this.onImageClick } + onClick={ this.onSelectImage } + onFocus={ this.onSelectImage } + onKeyDown={ this.onRemoveImage } tabIndex="0" aria-label={ ariaLabel } + ref={ this.bindContainer } /> { isBlobURL( url ) && } @@ -124,10 +125,8 @@ class GalleryImage extends Component { 'is-transient': isBlobURL( url ), } ); - // Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup - /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( -
+
{ isSelected &&
); - /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } }