Fix gallery tab order (#15540)

* Structural changes

- Reorder: img goes first than the inline menu items
- Always render the inline menu items. We want to keep
  a consistent tabbable experience. We'll style them down
  when not in focus.

* Make button visible

* Mark GalleryImage as selected on button focused

* Fix color button on focus

* Prevent the button from showing up if the GalleryImage is not selected

* Make button and caption part of the tab path

We can't use the isSelected property to conditionally render them,
otherwise, they won't be tabbed through when tabbing backward.

* We can actually disable the button depending on isSelected status

The GalleryImage gets selected by focusing on the caption (tabbing backward)
and the <img> element (tabbing forwards). At that time,
the button is enabled and will get the focus.

* Do not show caption when GalleryImage is not selected

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

@@ -59,6 +59,19 @@ ul.wp-block-gallery {
 		}
 	}
 
+	.is-selected .block-library-gallery-item__inline-menu {
+		background-color: theme(primary);
+
+		.components-button {
+			color: $white;
+		}
+
+		.components-button:focus {
+			color: inherit;
+		}
+
+	}
+
 	.block-editor-rich-text figcaption {
 		a {
 			color: $white;
@@ -71,25 +84,16 @@ ul.wp-block-gallery {
 	position: absolute;
 	top: -2px;
 	right: -2px;
-	background-color: theme(primary);
 	display: inline-flex;
 	z-index: z-index(".block-library-gallery-item__inline-menu");
 
 	.components-button {
-		color: $white;
-		&:hover,
-		&:focus {
-			color: $white;
-		}
+		color: transparent;
 	}
 }
 
 .blocks-gallery-item__remove {
 	padding: 0;
-
-	&.components-button:focus {
-		color: inherit;
-	}
 }
 
 .blocks-gallery-item .components-spinner {

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

@@ -127,28 +127,26 @@ class GalleryImage extends Component {
 
 		return (
 			<figure className={ className }>
-				{ isSelected &&
-					<div className="block-library-gallery-item__inline-menu">
-						<IconButton
-							icon="no-alt"
-							onClick={ onRemove }
-							className="blocks-gallery-item__remove"
-							label={ __( 'Remove Image' ) }
-						/>
-					</div>
-				}
 				{ href ? <a href={ href }>{ img }</a> : img }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) ? (
-					<RichText
-						tagName="figcaption"
-						placeholder={ __( 'Write caption…' ) }
-						value={ caption }
-						isSelected={ this.state.captionSelected }
-						onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-						unstableOnFocus={ this.onSelectCaption }
-						inlineToolbar
+				<div className="block-library-gallery-item__inline-menu">
+					<IconButton
+						icon="no-alt"
+						onClick={ onRemove }
+						onFocus={ this.onSelectImage }
+						className="blocks-gallery-item__remove"
+						label={ __( 'Remove Image' ) }
+						disabled={ ! isSelected }
 					/>
-				) : null }
+				</div>
+				<RichText
+					tagName="figcaption"
+					placeholder={ isSelected ? __( 'Write caption…' ) : null }
+					value={ caption }
+					isSelected={ this.state.captionSelected }
+					onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
+					unstableOnFocus={ this.onSelectCaption }
+					inlineToolbar
+				/>
 			</figure>
 		);
 	}