[RangeSlider] Fix range slider focus state

[spencercanner]

WHY are these changes introduced?

• The range slider currently doesn't have a visible focus state, which is especially noticeable when it is used without the numeric output bubble

WHAT is this pull request doing?

• Removed a class selector from the SingleThumb styles which was preventing the focus styles from being applied to the input
  • The .RangeSlider selector was never used anywhere in the component, and was left over from the before the DualThumb component existed
• Added an outline to the entire SingleThumb input when focused in high contrast mode
• Updated the SingleThumb styles to prevent focus from taking over the error track colour
  • This should improve consistency across other input components (e.g. checkbox, select), where it will maintain some error styles but the focused area will receive an indigo outline
• Copied over the focus styles to the DualThumb scss to apply consistent focus styles across both components
• Added an outline to the DualThumb thumb button when focused in high contrast mode
• Disabled the DualThumb buttons to prevent them from receiving focus when the component is disabled
  • The single thumb range slider cannot receive focus in a disabled state, so this improves consistency across range sliders

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

General case:

• Tab into the input, and verify the slider receives an indigo border
• Use the mouse to move the slider, and verify it receives the focus state

Error state:

• Update component to be in an error state by adding error="error" as a prop
• Verify that focus states will not change the track colour, but the slider will receive an indigo border

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useState} from 'react';
import {Page, Card, RangeSlider} from '../src';

export function Playground() {
  const initialValue = [700, 1000];
  const prefix = '$';
  const min = 0;
  const max = 2000;
  const step = 10;

  const [doubleRangeValue, setDoubleRangeValue] = useState(initialValue);
  const [rangeValue, setRangeValue] = useState(32);

  const handleDoubleRangeSliderChange = useCallback((value) => {
    setDoubleRangeValue(value);
  }, []);

  const handleRangeSliderChange = useCallback(
    (value) => setRangeValue(value),
    [],
  );

  return (
    <Page title="Playground">
      <Card sectioned title="Background color">
        <RangeSlider
          label="Opacity percentage"
          value={rangeValue}
          onChange={handleRangeSliderChange}
          output
        />
      </Card>
      <Card sectioned title="Minimum requirements">
        <RangeSlider
          output
          label="Money spent is between"
          value={doubleRangeValue}
          prefix={prefix}
          min={min}
          max={max}
          step={step}
          onChange={handleDoubleRangeSliderChange}
        />
      </Card>
    </Page>
  );
}

Mac Chrome:
Single without focus:

Single with focus:

Single error without focus:

Single error with focus:

Double without focus:

Double with focus:

Double error without focus:

Double error with focus:

Edge:
Single without focus:

Single with focus:

Single error without focus:

Single error with focus:

Double without focus:

Double with focus:

Double error without focus:

Double error with focus:

High contrast mode:
Single without focus:

Single with focus:

Single error without focus:

Single error with focus:

Double without focus:

Double with focus:

Double error without focus:

Double error with focus:

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[danrosenthal]

Hey @spencercanner, sorry for the delay on getting review on this PR, seems like it must have fallen between the cracks.

I've tophatted this change, and it's looking great in the single input range slider. I'd love to see this change made in the dual input range slider as well. The focus state in it currently is pretty gross.

Dual Input

Also pinging @dpersing for her thoughts on the high contrast styles. I wonder if the button-text-background color would be more appropriate here. It'd also be great to add high contrast background color to the track so it's visible. But that could be done in another PR if you like.

[dpersing]

@danrosenthal @spencercanner Hi! Thanks so much for catching this.

I think we want to maintain a focus state for High Contrast that doesn't rely on color alone, since it's a subtle change. Having a focus indicator on the full input would be ideal, since this mimics the default focus ring behavior.

What tool and browser are you using for the high contrast setting in this case? I ask since we typically test with Edge and the native High Contrast theme settings on Windows, which looks like this for the current example in the style guide:

Default:

Focus state:

[spencercanner]

@dpersing I was testing with Edge as well, but running it on a VirtualBox Windows VM using the High Contrast Black theme. I just checked the polaris styleguide, and I'm seeing this as the focus state:

Maybe the VM isn't providing a good representation of an actual machine?

[dpersing]

@spencercanner Gotcha, that is curious. I had the same theme, but I'm using VMware and looking at the version that's currently in the style guide. I'll block out some time later today to take a closer look.

[dpersing]

Yeah, here's your version in VMware in High Contrast black.

😩

I'd still like the err on the side of reproducing the default focus ring around the whole slider in High Contrast if we can. This more closely matches the default-style focus ring in the dual-thumb version.

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified	5
Files potentially affected	3

Details

All files potentially affected (total: 3)

• /src/components/RangeSlider/components/DualThumb/DualThumb.tsx
• /src/components/RangeSlider/RangeSlider.tsx
• /src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/RangeSlider/components/DualThumb/DualThumb.scss (total: 2)

Files potentially affected (total: 2)

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

🧩 src/components/RangeSlider/components/DualThumb/DualThumb.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/RangeSlider/RangeSlider.tsx

🧩 src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx (total: 0)

Files potentially affected (total: 0)

🎨 src/components/RangeSlider/components/SingleThumb/SingleThumb.scss (total: 2)

Files potentially affected (total: 2)

• /src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
• /src/components/RangeSlider/RangeSlider.tsx

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[spencercanner]

@danrosenthal I've updated the PR to include the single and dual thumb range slider focus states, and added more detail in the PR description above

@dpersing I think the HC inconsistencies were caused by my VM running an older version of Edge, but I've updated the PR to include HC focus styling for both the single and dual thumb range sliders

[danrosenthal]

Hey @spencercanner, sorry this one fell between the couch cushions. I'm happy for this to merge as-is once it's gotten a rebase. @dpersing any objections?

[danrosenthal]

@spencercanner, I'm going to go ahead and rebase, fix the conflict, and merge this PR.

[ghost]

🎉 Thanks for your contribution to Polaris React!