Tabs: Expand vertical interaction backgrounds and focus rings

packages/components/CHANGELOG.md

@@ -39,6 +39,7 @@
 
 ### Bug Fixes
 
+-   `Tabs`, `TabPanel`: Expand vertical tab interaction backgrounds and focus rings across the row ([#84821](https://github.com/WordPress/gutenberg/pull/84821)).
 -   `StyleProvider`: Register module styles before children measure layout in iframe documents ([#84736](https://github.com/WordPress/gutenberg/pull/84736)).
 -   `BorderBoxControl`: Unpack multi-value CSS box shorthand strings (such as `"0 0 0 2px"`) into individual side widths when splitting borders ([#84826](https://github.com/WordPress/gutenberg/pull/84826)).
 -   `SelectControl`: Preserve the minimal variant's inline layout in iframe documents ([#84732](https://github.com/WordPress/gutenberg/pull/84732)).

packages/components/src/tab-panel/style.scss

@@ -41,8 +41,7 @@
 		&:focus-visible {
 			color: var(--wpds-color-foreground-interactive-neutral-active);
 
-			&::before,
-			& .components-tab-panel__tabs-item-label::before {
+			&::before {
 				background-color: var(--wpds-color-background-interactive-neutral-weak-active);
 			}
 		}
@@ -85,48 +84,27 @@
 	// Interaction background and focus ring.
 	&::before {
 		content: "";
-	}
-
-	&::before,
-	& .components-tab-panel__tabs-item-label::before {
 		position: absolute;
 		z-index: -1;
 		inset: var(--wpds-dimension-padding-md);
 		pointer-events: none;
 		border-radius: var(--wpds-border-radius-sm);
 	}
 
-	&:focus-visible::before,
-	&:focus-visible .components-tab-panel__tabs-item-label::before {
+	&:focus-visible::before {
 		@include outset-ring__focus();
 		outline-offset: 0;
 	}
 
 	.components-tab-panel__tabs[aria-orientation="vertical"] & {
 		&::before {
-			content: none;
-		}
-
-		&.has-icon::before {
-			content: "";
-			inset-block: var(--wpds-dimension-padding-sm);
-			inset-inline-start:
-				calc(50% - var(--wpds-dimension-size-sm) /
-				2 - var(--wpds-dimension-padding-xs));
-			inset-inline-end: auto;
-			width:
-				calc(var(--wpds-dimension-size-sm) + 2 *
-				var(--wpds-dimension-padding-xs));
+			inset: 0;
+			outline-offset: calc(-1 * var(--wpds-border-width-focus));
 		}
 
 		& .components-tab-panel__tabs-item-label {
 			position: relative;
 			display: inline-flex;
-
-			&::before {
-				content: "";
-				inset: calc(-1 * var(--wpds-dimension-padding-xs));
-			}
 		}
 
 		&::after {

packages/components/src/tabs/style.module.scss

@@ -91,6 +91,7 @@
 		&::before {
 			top: var(--wpds-dimension-padding-md);
 			inset-inline-start: 0;
+			z-index: 1;
 			width: var(--wp-admin-border-width-focus);
 			height: max(0px, calc(var(--selected-height, 0) * 1px - 2 * var(--wpds-dimension-padding-md)));
 			transform: translateY(calc(var(--selected-top, 0) * 1px));
@@ -134,8 +135,7 @@
 		) {
 			color: var(--wpds-color-foreground-interactive-neutral-active);
 
-			&::after,
-			& .tab-children::after {
+			&::after {
 				background-color: var(--wpds-color-background-interactive-neutral-weak-active);
 				opacity: 1;
 			}
@@ -149,8 +149,7 @@
 		// Interaction background and focus indicator.
 		position: relative;
 		isolation: isolate;
-		&::after,
-		& .tab-children::after {
+		&::after {
 			position: absolute;
 			z-index: -1;
 			pointer-events: none;
@@ -168,8 +167,7 @@
 			}
 		}
 
-		&[data-focus-visible]::after,
-		&[data-focus-visible] .tab-children::after {
+		&[data-focus-visible]::after {
 			outline-color: $components-color-accent;
 			opacity: 1;
 		}
@@ -189,6 +187,12 @@
 	[aria-orientation="vertical"] & {
 		padding: var(--wpds-dimension-padding-md);
 		min-height: var(--wpds-dimension-size-lg);
+
+		&::after {
+			content: "";
+			inset: 0;
+			outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+		}
 	}
 }
 
@@ -202,14 +206,7 @@
 		justify-content: center;
 	}
 	[aria-orientation="vertical"] & {
-		flex-grow: 0;
-		position: relative;
 		justify-content: start;
-
-		&::after {
-			content: "";
-			inset: calc(-1 * var(--wpds-dimension-padding-xs));
-		}
 	}
 }
 

packages/ui/CHANGELOG.md

@@ -32,6 +32,7 @@
 
 ### Bug Fixes
 
+-   `Tabs`: Expand vertical tab interaction backgrounds and focus rings across the row ([#84821](https://github.com/WordPress/gutenberg/pull/84821)).
 -   Keep the `Link` new-tab indicator with the preceding text when wrapping ([#84806](https://github.com/WordPress/gutenberg/pull/84806)).
 -   `Select`: Keep long popup lists scrollable when item alignment falls back to anchored positioning or the popup opens through touch ([#84682](https://github.com/WordPress/gutenberg/pull/84682)).
 -   `Combobox.Input`, `SearchableSelect`, and `SearchableSelectControl`: Orient the search icon toward the top left in LTR and the top right in RTL ([#84690](https://github.com/WordPress/gutenberg/pull/84690)).

packages/ui/src/tabs/style.module.css

@@ -150,17 +150,15 @@
 			) {
 				color: var(--wpds-color-foreground-interactive-neutral-active);
 
-				&::after,
-				& .tab-children::after {
+				&::after {
 					background-color: var(--wpds-color-background-interactive-neutral-weak-active);
 					opacity: 1;
 				}
 			}
 
 			/* Interaction background and focus indicator. */
 			&::before,
-			&::after,
-			& .tab-children::after {
+			&::after {
 				position: absolute;
 				z-index: -1;
 				pointer-events: none;
@@ -177,8 +175,7 @@
 				}
 			}
 
-			&:focus-visible::after,
-			&:focus-visible .tab-children::after {
+			&:focus-visible::after {
 				outline-color: var(--wpds-color-stroke-focus);
 				opacity: 1;
 			}
@@ -242,6 +239,12 @@
 			[data-orientation="vertical"] & {
 				padding: var(--wpds-dimension-padding-md);
 				min-height: var(--wpds-dimension-size-lg);
+
+				&::after {
+					content: "";
+					inset: 0;
+					outline-offset: calc(-1 * var(--wpds-border-width-focus));
+				}
 			}
 		}
 
@@ -256,14 +259,7 @@
 			}
 
 			[data-orientation="vertical"] & {
-				flex-grow: 0;
-				position: relative;
 				justify-content: start;
-
-				&::after {
-					content: "";
-					inset: calc(-1 * var(--wpds-dimension-padding-xs));
-				}
 			}
 		}
 	}