fix(slider): keyboard focus works in storybook

adobe · Nov 9, 2023 · b0736dc · b0736dc
1 parent 2214996
commit b0736dc
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/components/slider/stories/template.js b/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