fix(slider): focus state matches spec, supports forced-colors (#2217)

* fix(slider): focus state doesn't get active state style

* fix(slider): high contrast mode works for standard variant

* fix(slider): disabled slider gets default cursor

* fix(slider): hover, focus in WHCM with prefers-color-scheme

* docs(slider): focus and disabled implementations documented

* refactor(slider): ramp variant high contrast properties

* fix(slider): high contrast highlight when control is interacted with

* chore(slider): adjust high contrast mode nesting

* chore(slider): is-disabled styles in one place

* fix(slider): is-focused class bubbles to controls parent, styles apply in storybook

* fix(slider): disabled sliders have disabled input in docs site

* chore(slider): add with focus story

* fix(slider): keyboard focus works in storybook

* chore(slider): forced-color-adjusts go in forced-colors media query

Author: Melissa Thompson

components/slider/index.css

@@ -47,7 +47,7 @@ governing permissions and limitations under the License.
   --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
   --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
   --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-  
+
   /* TODO: placeholder value for sideLabel variant value width */
   --spectrum-slider-value-inline-size: 18px;
 }
@@ -316,7 +316,6 @@ governing permissions and limitations under the License.
   outline: none;
 
   &:active,
-  &.is-focused,
   &.is-dragged {
     border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
   }
@@ -516,22 +515,6 @@ governing permissions and limitations under the License.
   }
 }
 
-
-.spectrum-Slider {
-  &.is-disabled {
-    cursor: default;
-
-    .spectrum-Slider-handle {
-      cursor: default;
-      pointer-events: none;
-    }
-
-    .spectrum-Slider-tickLabel {
-      color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
-    }
-  }
-}
-
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
@@ -609,15 +592,7 @@ governing permissions and limitations under the License.
 .spectrum-Slider--ramp {
   .spectrum-Slider-handle {
     box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
-    background: var(--mod-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color));
-
-    @media (forced-colors: active) {
-      /* forced-color-adjust required to ensure the "circle" around the handle is transparent */
-      forced-color-adjust: none;
-      box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
-      border-color: ButtonText;
-      background-color: ButtonFace;
-    }
+    background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
   }
 }
 
@@ -648,13 +623,25 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Slider.is-disabled {
+  cursor: default;
+
+  .spectrum-Slider-controls {
+    cursor: default;
+  }
+
+  .spectrum-Slider-tickLabel {
+    color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+  }
+
   .spectrum-Slider-labelContainer {
     color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
   }
 
   .spectrum-Slider-handle {
     border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
     background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
+    cursor: default;
+    pointer-events: none;
 
     &:hover,
     &:active {
@@ -703,14 +690,20 @@ governing permissions and limitations under the License.
 @media (forced-colors: active) {
 
   .spectrum-Slider {
-
     /*  over-writes */
     --highcontrast-slider-track-color: ButtonText;
     --highcontrast-slider-track-fill-color: ButtonText;
     --highcontrast-slider-ramp-track-color: ButtonText;
     --highcontrast-slider-ramp-track-color-disabled: GrayText;
     --highcontrast-slider-tick-mark-color: ButtonText;
-
+    --highcontrast-slider-handle-border-color: ButtonText;
+    --highcontrast-slider-handle-border-color-hover: Highlight;
+    --highcontrast-slider-handle-border-color-down: Highlight;
+    --highcontrast-slider-handle-border-color-key-focus: Highlight;
+    --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
+    --highcontrast-slider-handle-background-color: ButtonFace;
+    --highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
+    --highcontrast-slider-ramp-handle-background-color: ButtonFace;
 
     --spectrum-slider-track-color: ButtonText;
     --spectrum-slider-track-fill-color: ButtonText;
@@ -732,21 +725,43 @@ governing permissions and limitations under the License.
 
     --spectrum-slider-track-color-disabled: GrayText;
     --spectrum-slider-track-fill-color-disabled: GrayText;
-    
+
     --spectrum-slider-handle-border-color-disabled: GrayText;
 
     --spectrum-slider-label-text-color: CanvasText;
     --spectrum-slider-label-text-color-disabled: GrayText;
 
     --spectrum-slider-ramp-handle-border-color-active: ButtonText;
 
-  }
+    .spectrum-Slider-handle.is-focused::before {
+      forced-color-adjust: none;
+    }
+
+    .spectrum-Slider--ramp .spectrum-Slider-handle {
+      /* forced-color-adjust required to ensure the "circle" around the handle is transparent */
+      forced-color-adjust: none;
+    }
+
+    /* Slider control hover and focus colors for high contrast mode */
+    &:not(.is-disabled) {
+      .spectrum-Slider-controls:hover,
+      .spectrum-Slider-controls:active,
+      .spectrum-Slider-controls:focus-within,
+      .spectrum-Slider-controls.is-focused {
+        --highcontrast-slider-track-fill-color: Highlight;
+        --highcontrast-slider-track-color: Highlight;
+        --highcontrast-slider-handle-border-color: Highlight;
+        --highcontrast-slider-ramp-track-color: Highlight;
+        --highcontrast-slider-tick-mark-color: Highlight;
+      }
+    }
 
-  /* Slider handle turns transparent in high contrast mode for ramp */
-  .spectrum-Slider.is-disabled {
-    .spectrum-Slider-ramp + .spectrum-Slider-handle {
-      fill: ButtonFace;
-      background-color: ButtonFace;
+    /* Slider handle turns transparent in high contrast mode for ramp */
+    &.is-disabled {
+      .spectrum-Slider-ramp + .spectrum-Slider-handle {
+        fill: ButtonFace;
+        background-color: ButtonFace;
+      }
     }
   }
 }

components/slider/metadata/slider.yml

@@ -15,6 +15,17 @@ sections:
 
       ### Three Handles is included in the `range` variant
       When using a slider with three handles, classify it as a `range` variant to apply correct styling
+
+      ### Indicating focus
+      Focus must be bubbled up to the parent so descendants siblings can be styled.
+
+      Thus, implementations should add the following class to the `.spectrum-Slider` parent class in the following situations:
+
+      * `.is-disabled` - when the slider is disabled
+
+      Implementations should also bubble the following class to the `.spectrum-Slider-controls` parent class in the following situations:
+
+      * `.is-focused` - when the handle input is focused with the mouse or keyboard
 examples:
   - id: slider
     name: Standard
@@ -118,7 +129,7 @@ examples:
             </div>
           </div>
         </div>
-        
+
         <div class="spectrum-Examples-item" style="width: 200px">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
           <div class="spectrum-Slider spectrum-Slider--sizeXL">
@@ -169,7 +180,7 @@ examples:
         <div class="spectrum-Slider-controls">
           <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-6">
+            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-6" disabled>
           </div>
           <div class="spectrum-Slider-track"></div>
         </div>
@@ -218,7 +229,7 @@ examples:
         <div class="spectrum-Slider-controls">
           <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-8">
+            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-8" disabled>
           </div>
           <div class="spectrum-Slider-track"></div>
         </div>
@@ -263,7 +274,7 @@ examples:
         <div class="spectrum-Slider-controls">
           <div class="spectrum-Slider-track" style="width: 25%;"></div>
           <div class="spectrum-Slider-handle" style="left: 70%;">
-            <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-11">
+            <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-11" disabled>
           </div>
           <div class="spectrum-Slider-track" style="width: 50%;"></div>
           <div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
@@ -299,11 +310,11 @@ examples:
         <div class="spectrum-Slider-controls" role="presentation">
           <div class="spectrum-Slider-track" style="width: 20%;"></div>
           <div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" disabled id="spectrum-Slider-input-13-0" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-0">
+            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" disabled id="spectrum-Slider-input-13-0" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-0" disabled>
           </div>
           <div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
           <div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" disabled id="spectrum-Slider-input-13-1" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-1">
+            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" disabled id="spectrum-Slider-input-13-1" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-1" disabled>
           </div>
           <div class="spectrum-Slider-track" style="width: 40%;"></div>
         </div>
@@ -355,7 +366,7 @@ examples:
           </div>
           <div class="spectrum-Slider-handleContainer">
             <div class="spectrum-Slider-handle" style="left: 75%;">
-              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-15">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-15" disabled>
             </div>
           </div>
         </div>
@@ -434,7 +445,7 @@ examples:
           </div>
           <div class="spectrum-Slider-handleContainer">
             <div class="spectrum-Slider-handle" style="left: 40%;">
-              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-17">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-17" disabled>
             </div>
           </div>
         </div>

components/slider/stories/slider.stories.js

@@ -186,6 +186,13 @@ Disabled.args = {
 	isDisabled: true,
 };
 
+export const WithFocus = Template.bind({});
+WithFocus.args = {
+	...Default.args,
+	variant: "with focus",
+	isFocused: true,
+};
+
 export const Gradient = Template.bind({});
 Gradient.args = {
 	...Default.args,

components/slider/stories/template.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import { useArgs, useGlobals } from "@storybook/client-api";
 
@@ -142,6 +142,14 @@ export const Template = ({
 			})}
 			role=${ifDefined(values.length > 1 ? "group" : undefined)}
 			aria-labelledby=${ifDefined(label && id ? `${id}-label` : undefined)}
+			@focusin=${() => {
+				const focusClass = { isFocused: true };
+				updateArgs(focusClass);
+			}}
+			@focusout=${() => {
+				const focusClass = { isFocused: false };
+				updateArgs(focusClass);
+			}}
 		>
 			<!-- Label region -->
 			${label
@@ -175,7 +183,11 @@ export const Template = ({
 
 			<!-- Slider controls -->
 			<div
-				class="${rootClass}-controls"
+				class=${classMap({
+					[`${rootClass}-controls`]: true,
+					"is-focused": isFocused,
+					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+				})}
 				role=${ifDefined(isRamp ? "presentation" : undefined)}
 			>
 				${values.map((value, idx) => {