role="slider" requires accessible name (aria-label)

[cyrustheiv]

Hi

How is this aria-label <div aria-label="Drag to move">, that's nested inside the slider button, announced?

<button role="slider">
  <div aria-label="Drag to move">
  ...
</button>

I'm looking for a solution to add a custom aria announcement when interacting with the slider button. But looking at the HTML, the only aria-label I see is nested and not actually reached (from testing with VO on Safari/Chrome).

Looking at the MDN docs for the role=slider, it mentions

An accessible name is required. If the range's role is applied to an HTML element (or or element), the accessible name can come from the associated . Otherwise use aria-labelledby if a visible label is present or aria-label if a visible label is not present.

also

Accessibility APIs do not have a way of representing semantic elements contained in a slider. To deal with this limitation, browsers, automatically apply role presentation to all descendant elements of any slider element as it is a role that does not support semantic children.

Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role

Thanks.

[nerdyman]

Thanks for raising this @cyrustheiv. This is most definitely a bug, I must have forgotten to move the aria attr while I was refactoring things.

I'll do a bug fix release to resolve this.

As far as adding a custom label, you can directly manipulate the button element using the useReactCompareSliderRef hook.

E.g.

const Example = () => {
  const reactCompareSliderRef = useReactCompareSliderRef();

  useEffect(() => {
    const rootContainer = reactCompareSliderRef.current.rootContainer!;
    const handleContainer = rootContainer.querySelector(
      '[data-rcs="handle-container"]',
    ) as HTMLButtonElement;

    handleContainer.setAttribute('aria-label', 'My custom label');
  }, []);

  return (
    <ReactCompareSlider ref={reactCompareSliderRef} />
  )
};

It might be useful to expose this as a prop but I'm concerned that the component is getting very prop-heavy. So the workaround above should do for now.

[cyrustheiv]

Thanks @nerdyman!

Appreciate the considerations you have put in around accessibility, with this.

Sure, a prop would help us to avoid the additional JS, but the workaround will help for now and I look forward to the bug release!