From f6cfdb2f093795f5e4eae145776308b96af0f3ed Mon Sep 17 00:00:00 2001
From: Matt Pharoah <mtpharoah@gmail.com>
Date: Mon, 11 Mar 2024 12:13:28 -0400
Subject: [PATCH] Force the focus-visible style for slider handles if the
 keyboard is used to move them, even if they were originally focused via the
 mouse cursor

---
 src/components/multi-range/multi-range.component.ts | 5 +++--
 src/components/multi-range/multi-range.styles.ts    | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/multi-range/multi-range.component.ts b/src/components/multi-range/multi-range.component.ts
index 98a83baa..c3c3b08b 100644
--- a/src/components/multi-range/multi-range.component.ts
+++ b/src/components/multi-range/multi-range.component.ts
@@ -297,6 +297,8 @@ export default class SlMultiRange extends ShoelaceElement {
         return;
     }
 
+    this.baseDiv.classList.add('keyboard-focus');
+
     if (value !== this.#sliderValues.get(sliderId)) {
       this.#moveHandle(handle, value);
 
@@ -331,14 +333,13 @@ export default class SlMultiRange extends ShoelaceElement {
 
   #onFocus(): void {
     if (this.#hasFocus) return;
-    console.info('sl-focus');
     this.emit('sl-focus');
     this.#hasFocus = true;
   }
 
   #onBlur(event: FocusEvent): void {
+    this.baseDiv?.classList?.remove('keyboard-focus');
     if (event.relatedTarget && this.shadowRoot?.contains(event.relatedTarget as Node)) return;
-    console.info('sl-blur');
     this.emit('sl-blur');
     this.#hasFocus = false;
   }
diff --git a/src/components/multi-range/multi-range.styles.ts b/src/components/multi-range/multi-range.styles.ts
index 615deb6b..d52e5f54 100644
--- a/src/components/multi-range/multi-range.styles.ts
+++ b/src/components/multi-range/multi-range.styles.ts
@@ -63,7 +63,7 @@ export default css`
     cursor: grabbing;
   }
 
-  .handle:focus-visible {
+  .handle:focus-visible, .keyboard-focus .handle:focus {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }