Tiled Gallery: Ensure container enclosing image is selectable

projects/plugins/jetpack/changelog/fix-tiled-gallery-image-controls

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Tiled Gallery block: ensure movement and close icons are visible when selecting image in editor, by changing focusable element.

projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js

@@ -17,13 +17,12 @@ class GalleryImageEdit extends Component {
 	};
 
 	onImageKeyDown = event => {
-		if (
-			this.img.current &&
-			this.img.current === this.img.current.ownerDocument.activeElement &&
-			this.props.isSelected &&
-			[ BACKSPACE, DELETE ].includes( event.keyCode )
-		) {
-			this.props.onRemove();
+		const { isSelected, onRemove } = this.props;
+
+		// Check for BACKSPACE or DELETE key presses
+		if ( isSelected && [ BACKSPACE, DELETE ].includes( event.keyCode ) ) {
+			event.preventDefault();
+			onRemove();
 		}
 	};
 
@@ -92,39 +91,36 @@ class GalleryImageEdit extends Component {
 		const isTransient = isBlobURL( origUrl );
 
 		const img = (
-			// Disable reason: Image itself is not meant to be interactive, but should
-			// direct image selection and unfocus caption fields.
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 			<Fragment>
 				<img
 					alt={ alt }
-					aria-label={ ariaLabel }
 					data-height={ height }
 					data-id={ id }
 					data-link={ link }
 					data-url={ origUrl }
 					data-width={ width }
-					onClick={ this.onImageClick }
-					onKeyDown={ this.onImageKeyDown }
 					ref={ this.img }
 					src={ isTransient ? undefined : url }
 					srcSet={ isTransient ? undefined : srcSet }
-					tabIndex="0"
 					style={ isTransient ? { backgroundImage: `url(${ origUrl })` } : undefined }
 				/>
 				{ isTransient && <Spinner /> }
 			</Fragment>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 		);
 
-		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
 		return (
-			<figure
+			// The image itself is not meant to be interactive, but the enclosing element should be.
+			<div
 				className={ clsx( 'tiled-gallery__item', {
 					'is-selected': isSelected,
 					'is-transient': isTransient,
 					[ `filter__${ imageFilter }` ]: !! imageFilter,
 				} ) }
+				tabIndex="0"
+				role="button"
+				onClick={ this.onImageClick }
+				onKeyDown={ this.onImageKeyDown }
+				aria-label={ ariaLabel }
 			>
 				{ showMovers && (
 					<div className="tiled-gallery__item__move-menu">
@@ -156,8 +152,8 @@ class GalleryImageEdit extends Component {
 					/>
 				</div>
 				{ /* Keep the <a> HTML structure, but ensure there is no navigation from edit */ }
-				{ href ? <a>{ img }</a> : img }
-			</figure>
+				{ href ? <a aria-hidden="true">{ img }</a> : img }
+			</div>
 		);
 	}
 }