[RangeSlider] Fix range slider focus state

UNRELEASED.md

@@ -9,6 +9,12 @@
 ### Bug fixes
 
 - Fixed issue with `Filters` component displaying an undesired margin top and bottom on the button element on Safari ([#2292](https://github.com/Shopify/polaris-react/pull/2292))
+- Doesn't render `MenuActions` if no actions are passed to an `actionGroups` item inside `Page` ([#2266](https://github.com/Shopify/polaris-react/pull/2266))
+- Fixed `PositionedOverlay` incorrectly calculating `Topbar.UserMenu` `Popover` width ([#1692](https://github.com/Shopify/polaris-react/pull/1692))
+- Fixed `recolor-icon` Sass mixin to properly scope `$secondary-color` to the child `svg` ([#2298](https://github.com/Shopify/polaris-react/pull/2298))
+- Fixed a regression with the positioning of the `Popover` component ([#2305](https://github.com/Shopify/polaris-react/pull/2305))
+- Fixed Stack Item proportion when shrinking ([#2319](https://github.com/Shopify/polaris-react/pull/2319))
+- Fixed `RangeSlider` focus state style issues ([#1926](https://github.com/Shopify/polaris-react/pull/1926))
 
 ### Documentation
 

src/components/RangeSlider/components/DualThumb/DualThumb.scss

@@ -14,6 +14,7 @@ $range-thumb-border-error: rem(2px) solid color('red');
 $range-thumb-shadow: (0 0 0 rem(1px) rgba(black, 0.2), shadow(faint));
 $range-thumb-shadow-hover: (0 0 0 rem(1px) rgba(black, 0.4), shadow(faint));
 $range-thumb-shadow-error: 0 0 0 rem(1px) color('red');
+$range-thumb-shadow-focus: 0 0 0 rem(1px) color('indigo');
 
 .Wrapper {
   position: relative;
@@ -94,20 +95,25 @@ $range-thumb-shadow-error: 0 0 0 rem(1px) color('red');
     border-color: color('sky', 'dark');
   }
 
+  &:hover {
+    background: linear-gradient(color('sky', 'lighter'), color('sky', 'light'));
+    box-shadow: $range-thumb-shadow-hover;
+  }
+
   .error & {
     border-color: color('red');
     box-shadow: $range-thumb-shadow-error;
-
-    &:hover,
-    &:focus {
-      border-color: color('red');
-      box-shadow: $range-thumb-shadow-error;
-    }
   }
 
-  &:hover {
+  &:focus {
+    outline: 0;
     background: linear-gradient(color('sky', 'lighter'), color('sky', 'light'));
-    box-shadow: $range-thumb-shadow-hover;
+    border-color: color('indigo');
+    box-shadow: $range-thumb-shadow-focus;
+
+    @media (-ms-high-contrast: active) {
+      outline: 1px solid ms-high-contrast-color('text');
+    }
   }
 }
 

src/components/RangeSlider/components/DualThumb/DualThumb.tsx

@@ -260,6 +260,7 @@ export class DualThumb extends React.Component<DualThumbProps, State> {
                 onMouseDown={this.handleMouseDownThumbLower}
                 onTouchStart={this.handleTouchStartThumbLower}
                 ref={this.thumbLower}
+                disabled={disabled}
               />
               {outputMarkupLower}
               <button
@@ -282,6 +283,7 @@ export class DualThumb extends React.Component<DualThumbProps, State> {
                 onMouseDown={this.handleMouseDownThumbUpper}
                 onTouchStart={this.handleTouchStartThumbUpper}
                 ref={this.thumbUpper}
+                disabled={disabled}
               />
               {outputMarkupUpper}
             </div>

src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx

@@ -82,36 +82,40 @@ describe('<DualThumb />', () => {
   });
 
   describe('disabled', () => {
-    it('sets aria-disabled to false by default on the lower thumb', () => {
+    it('sets aria-disabled and disabled to false by default on the lower thumb', () => {
       const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
 
       const thumbLower = findThumbLower(dualThumb);
       expect(thumbLower.prop('aria-disabled')).toBe(false);
+      expect(thumbLower.prop('disabled')).toBe(false);
     });
 
-    it('sets aria-disabled to false by default on the upper thumb', () => {
+    it('sets aria-disabled and disabled to false by default on the upper thumb', () => {
       const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
 
       const thumbUpper = findThumbUpper(dualThumb);
       expect(thumbUpper.prop('aria-disabled')).toBe(false);
+      expect(thumbUpper.prop('disabled')).toBe(false);
     });
 
-    it('sets aria-disabled to true on the lower thumb', () => {
+    it('sets aria-disabled and disabled to true on the lower thumb', () => {
       const dualThumb = mountWithAppProvider(
         <DualThumb {...mockProps} disabled />,
       );
 
       const thumbLower = findThumbLower(dualThumb);
       expect(thumbLower.prop('aria-disabled')).toBe(true);
+      expect(thumbLower.prop('disabled')).toBe(true);
     });
 
-    it('sets aria-disabled to true on the upper thumb', () => {
+    it('sets aria-disabled and disabled to true on the upper thumb', () => {
       const dualThumb = mountWithAppProvider(
         <DualThumb {...mockProps} disabled />,
       );
 
       const thumbUpper = findThumbUpper(dualThumb);
       expect(thumbUpper.prop('aria-disabled')).toBe(true);
+      expect(thumbUpper.prop('disabled')).toBe(true);
     });
   });
 

src/components/RangeSlider/components/SingleThumb/SingleThumb.scss

@@ -143,11 +143,7 @@ $range-thumb-shadow-focus: 0 0 0 rem(1px) color('indigo');
     }
   }
 
-  // match `error` specificity for interaction styles
-  .RangeSlider &:focus {
-    // repeated so that `focus` can override `error`
-    --progress-lower: #{color('indigo')};
-
+  &:focus {
     @include range-track-selectors {
       background-color: color('sky', 'dark');
     }
@@ -160,6 +156,10 @@ $range-thumb-shadow-focus: 0 0 0 rem(1px) color('indigo');
       border-color: color('indigo');
       box-shadow: $range-thumb-shadow-focus;
     }
+
+    @media (-ms-high-contrast: active) {
+      outline: 1px solid ms-high-contrast-color('text');
+    }
   }
 }