Try: Make gallery keyboardable (#11205)

* Try: Make gallery keyboardable

The intent of this PR is to fix #3836, but for now this is just the barebones initial work.

I would like your thoughts on the best approach to take before I optimize too far in one direction. As such, this PR does the bare minimum to get tabbing working for the gallery, and then we can go from there. For example, this PR simply adds a `tabIndex="0"` and an `onKeyDown` handler to the image, to make it accessible. It might be a better solution to wrap the image itself in a button, but this might regress editor styles. Perhaps this approach is necessary as an intermediate step towards better solutions?

Your thoughts are most welcome.

* Apply suggestion

packages/block-library/src/gallery/editor.scss

@@ -12,6 +12,7 @@ ul.wp-block-gallery li {
 		outline: none;
 	}
 
+	img:focus,
 	.is-selected {
 		outline: 4px solid theme(primary);
 	}

packages/block-library/src/gallery/gallery-image.js

@@ -101,8 +101,8 @@ class GalleryImage extends Component {
 
 		// Disable reason: Image itself is not meant to be
 		// interactive, but should direct image selection and unfocus caption fields
-		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } /> : <Spinner />;
+		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } tabIndex="0" onKeyDown={ this.onImageClick } /> : <Spinner />;
 
 		const className = classnames( {
 			'is-selected': isSelected,