slider button custom aria-label (screen reader announcement)

[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.

[cyrustheiv]

moved to issues #130