fix(slider): disabled focus and styles (#17675)

* fix(slider): disabled focus and styles * fix(slider): disabled active styles
carbon-design-system · Oct 14, 2024 · 9a4c29b · 9a4c29b
1 parent 0c39d8f
commit 9a4c29b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/react/src/components/Slider/Slider-test.js b/packages/react/src/components/Slider/Slider-test.js
@@ -962,7 +962,7 @@ describe('Slider', () => {
 
       await click(lowerThumb);
       await keyboard('{ArrowRight}');
-      expect(lowerThumb).toHaveFocus();
+      expect(lowerThumb).not.toHaveFocus();
       expect(lowerInput).toHaveValue(initialValueLower);
       expect(lowerThumb).toHaveAttribute(
         'aria-valuenow',

diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -1520,7 +1520,7 @@ class Slider extends PureComponent<SliderProps> {
                       className={lowerThumbClasses}
                       role="slider"
                       id={twoHandles ? undefined : id}
-                      tabIndex={!readOnly ? 0 : -1}
+                      tabIndex={readOnly || disabled ? undefined : 0}
                       aria-valuetext={`${formatLabel(value, '')}`}
                       aria-valuemax={twoHandles ? valueUpper : max}
                       aria-valuemin={min}
@@ -1554,7 +1554,7 @@ class Slider extends PureComponent<SliderProps> {
                       <div
                         className={upperThumbClasses}
                         role="slider"
-                        tabIndex={!readOnly ? 0 : -1}
+                        tabIndex={readOnly || disabled ? undefined : 0}
                         aria-valuemax={max}
                         aria-valuemin={value}
                         aria-valuenow={valueUpper}

diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss
@@ -388,6 +388,22 @@
     }
   }
 
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb--upper {
+    background-color: transparent;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      transform: none;
+    }
+
+    .#{$prefix}--slider__thumb-icon {
+      fill: $border-disabled;
+    }
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__track,
   .#{$prefix}--slider--disabled .#{$prefix}--slider__filled-track,
   .#{$prefix}--slider--disabled