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

@@ -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;
   }

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);
   }