feat(react-range-slider-preview): scaffold package and add spec

[soniaboller]

PR Summary

• This PR adds the scaffolding and spec for a new RangeSlider component
• This is a separate control from current range-slider because it does not support multi values.

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[mainframev]

@soniaboller

We also discussed this within the team and agreed that it would be better to add this to existing Slider component. So you better will be to create a new feature branch and change this PR to target that branch instead of master, locally reset this commit changes except the spec file, then run yarn create-component to add RangeSlider to react-slider to create a boilerplate code for new component

UPD: I forgot that create-component is intended for preview packages only. You can resolve the lint errors by adding the necessary exports to the react-components suite package and updating the story imports to pull from react-components

[mainframev]

One thing I'd suggest to revisit is the accessibility shape of the DOM. In the proposed markup, the input type="range" elements are aria-hidden and tabindex="-1", and the thumbs are exposed as div role="slider". Let's check this approach

[mainframev]

it's common for both slider components, let's use separator and add it on the bottom of the document after both slider sections

Suggested change

	### Slider Open UI Research
	- <https://open-ui.org/components/slider.research.parts>
	- <https://open-ui.org/components/slider.research>

[mainframev]

maybe we should also mention here that when vertical is true we expose also aria-orientation:

• https://w3c.github.io/aria/#aria-orientation
• https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/

[mainframev]

Suggested change

	| `startInput` | none | Hidden (`aria-hidden="true"`, `tabindex="-1"`). Mirrors the start value for forms. |
	| `endInput` | none | Hidden (`aria-hidden="true"`, `tabindex="-1"`). Mirrors the end value. |
	| `startInput` | none | Hidden (`aria-hidden="true"`, `tabindex="-1"`). Mirrors the start value for forms. |
	| `endInput` | none | Hidden (`aria-hidden="true"`, `tabindex="-1"`). Mirrors the end value for forms. |

[mainframev]

is no longer a control, hidden from AT, not focusable and visible

Suggested change

	<input type="range" aria-hidden="true" tabindex="-1" value="20" />
	<input type="range" aria-hidden="true" tabindex="-1" value="80" />
	<input type="hidden" tabindex="-1" value="20" />
	<input type="hidden" tabindex="-1" value="80" />

[mainframev]

@soniaboller

I guess this DOM output should include visible label, otherwise instead of aria-labelledby here should be aria-label

[mainframev]

Suggested change

	| `startInput` | `input` | Hidden `<input type="range">` mirroring the start value for form submissions and pointer/touch selection. |
	| `endInput` | `input` | Hidden `<input type="range">` mirroring the end value. Receives most native props passed to `<RangeSlider>`. |
	| `startInput` | `input` | Hidden input mirroring the start value for form submissions and pointer/touch selection. |
	| `endInput` | `input` | Hidden input mirroring the end value. Receives most native props passed to `<RangeSlider>`. |

[mainframev]

I think you do not need to explicitly have Slider / RangeSlider for each heading. Second level headings for Slider and RangeSlider sections should be enough

[mainframev]

Have you considered an alternative approach where the native elements remain the actual interactive controls, but are visually hidden using SR only styles, with the thumbs being purely visual?

Instead of using aria-hidden on real inputs and recreating slider behavior with div role="slider", the real inputs stay accessible and focusable, and only their visuals are replaced.

.fui-RangeSlider__srOnlyInput {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="fui-RangeSlider">
  <div className="fui-RangeSlider__rail" />
  <div className="fui-RangeSlider__track" />
  <div class="fui-RangeSlider__startThumb">
    <!-- visual thumb handle goes here (e.g. a div or pseudo-element) -->
    <input
      class="fui-RangeSlider__srOnlyInput"
      type="range"
      min="0"
      max="100"
      step="1"
      value="20"
      aria-labelledby="label-1"
      aria-valuetext="20"
    />
  </div>
  <div class="fui-RangeSlider__endThumb">
    <input
      class="fui-RangeSlider__srOnlyInput"
      type="range"
      min="0"
      max="100"
      step="1"
      value="80"
      aria-labelledby="label-2"
      aria-valuetext="80"
    />
  </div>
</div>

the native inputs remain the source of truth for accessibility and keyboard interaction, while the custom thumbs and track are purely presentational