From 789a69fea548366d353d2279e9b21ab924586c77 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 18 Jan 2023 11:34:57 +0100
Subject: [PATCH] Improve slider/switch bar focus style (#15009)

Improve bar input focus style
---
 src/components/ha-bar-slider.ts | 5 +++++
 src/components/ha-bar-switch.ts | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/ha-bar-slider.ts b/src/components/ha-bar-slider.ts
index 11b8558cda..ccbf1dbf55 100644
--- a/src/components/ha-bar-slider.ts
+++ b/src/components/ha-bar-slider.ts
@@ -278,6 +278,11 @@ export class HaBarSlider extends LitElement {
         --slider-bar-border-radius: 10px;
         height: var(--slider-bar-thickness);
         width: 100%;
+        border-radius: var(--slider-bar-border-radius);
+        outline: none;
+      }
+      :host(:focus-visible) {
+        box-shadow: 0 0 0 2px var(--slider-bar-color);
       }
       :host([vertical]) {
         width: var(--slider-bar-thickness);
diff --git a/src/components/ha-bar-switch.ts b/src/components/ha-bar-switch.ts
index 7c0f687e59..5b20e0bfa7 100644
--- a/src/components/ha-bar-switch.ts
+++ b/src/components/ha-bar-switch.ts
@@ -104,6 +104,14 @@ export class HaBarSwitch extends LitElement {
         box-sizing: border-box;
         user-select: none;
         cursor: pointer;
+        border-radius: var(--switch-bar-border-radius);
+        outline: none;
+      }
+      :host(:focus-visible) {
+        box-shadow: 0 0 0 2px var(--switch-bar-off-color);
+      }
+      :host([checked]:focus-visible) {
+        box-shadow: 0 0 0 2px var(--switch-bar-on-color);
       }
       .switch {
         box-sizing: border-box;