aria-label and aria-valuetext

I can see that <DefautlHandle/> does declare aria-label and aria-valuetext properties. https://github.com/airbnb/rheostat/blob/563f6a739023dbd3c77311323de109ae66c4ac7c/src/DefaultHandle.jsx#L13-L14

Still, <Handle/> doesn’t get passed these two properties. https://github.com/airbnb/rheostat/blob/master/src/Slider.jsx#L803-L821

At the same time, there’s handle property which is for React.Component. So I suppose a developer is supposed to pass their own handle component which must wrap the <DefaultHandle/>. Like this:

function CustomHandle(props) {
  return (
    <DefaultHandle
      {...props}
      aria-label={props['data-handle-key'] === 0 ? 'Minimum price' : 'Maximum price'}
      aria-valuetext={'$' + props['aria-valuenow']}/>
  )
}

Is this the recommended approach to add aria-label and aria-valuetext? If yes then is DefaultHandle being exported from the library or should it be imported from as rheostat/src/DefaultHandle.jsx?

[catamphetamine]

@droda59 I don’t know what exactly worked, but something surely did.

import Rheostat from 'rheostat';

        <Rheostat
          snap={snap}
          handle={currency === 'USD' ? PriceHandleUSD : Handle}
          min={min}
          max={max}
          values={[currentRefinement.min, currentRefinement.max]}
          onChange={this.onChange}
          onValuesUpdated={this.onValuesUpdated}
          disabled={this.props['aria-hidden'] ? true : undefined} />

function PriceHandleUSD(props) {
  return (
    <Handle
      {...props}
      aria-label={props['data-handle-key'] === 0 ? 'Minimum price' : 'Maximum price'}
      aria-valuetext={'$' + props['aria-valuenow']} />
  );
}


function Handle(props) {
  return (
    <button
      type="button"
      aria-label={props['data-handle-key'] === 0 ? 'From' : 'To'}
      {...props}
      tabIndex={props['aria-disabled'] ? -1 : props.tabIndex} />
  );
}

[catamphetamine]

That works, closing.