♿ a11y(bal-input-slider): focus not visible enough (#1635)

* Create PR for #1630 * fix(input-slider): highlight slider thumb when navigating with keyboard --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Marco Zirkenbach <[email protected]>
baloise · Mar 6, 2025 · 7afef3c · 7afef3c
1 parent a8c1840
commit 7afef3c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/tall-cobras-occur.md b/.changeset/tall-cobras-occur.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**core**: a11y: highlight slider thumb when navigating with keyboard
diff --git a/packages/core/src/components/bal-input-slider/bal-input-slider.sass b/packages/core/src/components/bal-input-slider/bal-input-slider.sass
@@ -90,9 +90,15 @@
       &:focus-visible
         outline: none
 
-        &::-webkit-slider-thumb
-          background: var(--bal-color-primary)
-          border: 2px solid var(--bal-color-primary)
+        &::-webkit-slider-thumb,&::-moz-range-thumb
+          height: 1.5rem
+          width: 1.5rem
+          background: var(--bal-color-white)
+          border: 4px solid var(--bal-color-primary)
+          box-shadow: 0 0 0 0.75rem rgba(255, 255, 255, 0.3)
+          outline: none
+          position: relative
+
 
       &::-moz-range-track
         cursor: pointer