feat(tabs): high contrast mode-related fixes

Looking at WHCM revealed a few issues:
- disabled selection indicator color was not being applied; instead
disabled selected tab text was a different color
- would have been great to have a test for disabled items, better late
than never
- we were setting an unneeded margin-inline-start on the focus indicator
for the vertical variant that made WHCM look a little off
- other refactoring and simplificaion of WHCM styles

Author: rise-erpelding

components/tabs/dist/metadata.json

@@ -4,31 +4,29 @@
     ".spectrum--large .spectrum-Tabs",
     ".spectrum--large .spectrum-Tabs.spectrum-Tabs--compact",
     ".spectrum-Tabs",
-    ".spectrum-Tabs .is-selected:before",
-    ".spectrum-Tabs .is-selected:focus",
-    ".spectrum-Tabs .is-selected:focus-visible",
     ".spectrum-Tabs .spectrum-Picker-button",
-    ".spectrum-Tabs .spectrum-Tabs-item .spectrum-Icon",
-    ".spectrum-Tabs .spectrum-Tabs-item .spectrum-Tabs-itemLabel",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected .spectrum-Icon",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Icon",
+    ".spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--horizontal",
     ".spectrum-Tabs--horizontal .spectrum-Tabs-item",
     ".spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--horizontal.spectrum-Tabs--compact",
     ".spectrum-Tabs--vertical",
     ".spectrum-Tabs--vertical .spectrum-Icon",
     ".spectrum-Tabs--vertical .spectrum-Tabs-item",
-    ".spectrum-Tabs--vertical .spectrum-Tabs-item:before",
     ".spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs--vertical-right",
     ".spectrum-Tabs--vertical-right .spectrum-Icon",
     ".spectrum-Tabs--vertical-right .spectrum-Tabs-item",
-    ".spectrum-Tabs--vertical-right .spectrum-Tabs-item:before",
     ".spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs-item",
     ".spectrum-Tabs-item .spectrum-Icon",
     ".spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel",
     ".spectrum-Tabs-item.is-disabled",
     ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel",
+    ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs-item.is-selected",
     ".spectrum-Tabs-item.is-selected.is-disabled",
     ".spectrum-Tabs-item.is-selected:focus-visible",
@@ -40,8 +38,7 @@
     ".spectrum-Tabs-itemLabel",
     ".spectrum-Tabs-itemLabel:empty",
     ".spectrum-Tabs-selectionIndicator",
-    ".spectrum-Tabs.spectrum-Tabs--compact",
-    ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before"
+    ".spectrum-Tabs.spectrum-Tabs--compact"
   ],
   "modifiers": [
     "--mod-tabs-animation-duration",
@@ -162,14 +159,14 @@
   ],
   "passthroughs": ["--mod-picker-block-size"],
   "high-contrast": [
+    "--highcontrast-tabs-background-color-selected",
     "--highcontrast-tabs-color",
     "--highcontrast-tabs-color-disabled",
     "--highcontrast-tabs-color-hover",
     "--highcontrast-tabs-color-key-focus",
     "--highcontrast-tabs-color-selected",
     "--highcontrast-tabs-color-selected-hover",
     "--highcontrast-tabs-color-selected-key-focus",
-    "--highcontrast-tabs-focus-indicator-background-color",
     "--highcontrast-tabs-focus-indicator-color",
     "--highcontrast-tabs-selection-indicator-color",
     "--highcontrast-tabs-selection-indicator-color-disabled"

components/tabs/index.css

@@ -181,7 +181,7 @@
 		}
 
 		&.is-disabled {
-			color: var(--spectrum-tabs-selection-indicator-color-disabled);
+			color: var(--spectrum-tabs-color-disabled);
 		}
 	}
 
@@ -192,6 +192,10 @@
 		.spectrum-Tabs-itemLabel {
 			cursor: default;
 		}
+
+		.spectrum-Tabs-selectionIndicator {
+			background-color: var(--spectrum-tabs-selection-indicator-color-disabled);
+		}
 	}
 
 	&:focus-visible {
@@ -275,10 +279,6 @@
 
 		margin-inline-start: var(--spectrum-tabs-start-to-edge);
 		margin-inline-end:  var(--spectrum-tabs-start-to-edge);
-
-		&::before {
-			margin-inline-start: calc(-1 * var(--spectrum-tabs-focus-indicator-gap));
-		}
 	}
 
 	.spectrum-Icon {
@@ -302,49 +302,36 @@
 
 @media (forced-colors: active) {
 	.spectrum-Tabs {
-		--highcontrast-tabs-selection-indicator-color: Highlight;
-		--highcontrast-tabs-focus-indicator-color: CanvasText;
-		--highcontrast-tabs-focus-indicator-background-color: Highlight;
-
+		--highcontrast-tabs-background-color-selected: SelectedItem;
+		--highcontrast-tabs-color-selected: SelectedItemText;
+		--highcontrast-tabs-color-selected-key-focus: SelectedItemText;
+		--highcontrast-tabs-color-selected-hover: SelectedItemText;
+		--highcontrast-tabs-selection-indicator-color: CanvasText;
+		--highcontrast-tabs-focus-indicator-color: Highlight;
 		--highcontrast-tabs-color: ButtonText;
 		--highcontrast-tabs-color-hover: ButtonText;
-		--highcontrast-tabs-color-selected: HighlightText;
 		--highcontrast-tabs-color-key-focus: ButtonText;
 		--highcontrast-tabs-color-disabled: GrayText;
 		--highcontrast-tabs-selection-indicator-color-disabled: GrayText;
-		--highcontrast-tabs-color-selected-hover: HighlightText;
-		--highcontrast-tabs-color-selected-key-focus: HighlightText;
 
-		/* Prevents black box behind text on Highlight background */
+		/* Prevents black box behind text on SelectedItem background */
 		forced-color-adjust: none;
 
-		.spectrum-Tabs-item {
-			.spectrum-Icon {
-				z-index: 1;
-				position: relative;
-			}
-
-			.spectrum-Tabs-itemLabel {
-				position: relative;
-				z-index: 1;
-			}
-		}
-
-		.is-selected {
-			&::before {
-				background-color: var(--highcontrast-tabs-focus-indicator-background-color);
-			}
+		.spectrum-Tabs-item.is-selected {
+			background-color: var(--highcontrast-tabs-background-color-selected);
 
-			&:focus,
-			&:focus-visible {
+			.spectrum-Icon {
 				color: var(--highcontrast-tabs-color-selected);
 			}
-		}
 
-		&.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item {
-			&::before {
-				block-size: 100%;
-				inset-block-start: 0;
+			&.is-disabled {
+				.spectrum-Icon {
+					color: var(--highcontrast-tabs-color-disabled);
+				}
+
+				.spectrum-Tabs-selectionIndicator {
+					background-color: var(--highcontrast-tabs-selection-indicator-color-disabled);
+				}
 			}
 		}
 	}

components/tabs/stories/tabs.test.js

@@ -78,6 +78,23 @@ export const TabsGroups = Variants({
 				}
 			]
 		},
+		{
+			testHeading: "Disabled tabs",
+			withStates: false,
+			content: [
+				{
+					label: "Selected tab",
+					icon: "Archive",
+					isSelected: true,
+					isDisabled: true,
+				},
+				{
+					label: "Unselected tab",
+					icon: "File",
+					isDisabled: true,
+				}
+			]
+		},
 		{
 			testHeading: "With anchor tags",
 			useAnchors: true,