spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[Bug][a11y][VoiceOver]: Range Slider handles have no accessibility name

Open majornista opened this issue 2 years ago • 0 comments
trafficstars

Code of conduct

  • [X] I agree to follow this project's code of conduct.

Impacted component(s)

Slider, SliderHandle

Expected behavior

Using Safari with VoiceOver on either macOS or iOS, the slider handles for Range Sliders examples on https://opensource.adobe.com/spectrum-web-components/components/slider-handle/ should announce with the label provided for sp-slider and the label provided for each sp-slider-handle. The example below should have two inputs announced as "5, Output Levels Minimum, slider" and "250, Output Levels Maximum, slider."

<sp-slider variant="range" step="1" min="0" max="255">
    Output Levels
    <sp-slider-handle
        slot="handle"
        name="min"
        label="Minimum"
        value="5"
    ></sp-slider-handle>
    <sp-slider-handle
        slot="handle"
        name="max"
        label="Maximum"
        value="250"
    ></sp-slider-handle>
</sp-slider>

The labelling seems to be working as expected with Chrome, Edge and Firefox.

Actual behavior

Using Safari with VoiceOver on either macOS or iOS, the slider handles for Range Sliders examples on https://opensource.adobe.com/spectrum-web-components/components/slider-handle/ announce without any accessibility name. The example below has two inputs announced as "5, slider" and "250, slider," without context.

<sp-slider variant="range" step="1" min="0" max="255">
    Output Levels
    <sp-slider-handle
        slot="handle"
        name="min"
        label="Minimum"
        value="5"
    ></sp-slider-handle>
    <sp-slider-handle
        slot="handle"
        name="max"
        label="Maximum"
        value="250"
    ></sp-slider-handle>
</sp-slider>

Also, note that the multi-handle storybook examples do not provide a label for each of the sp-slider-handle elements: https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/slider--two-handles

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

  1. Go to '...'
  2. Click on '....'
  3. Scroll to '....'
  4. Check console
  5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

majornista avatar Jun 19 '23 14:06 majornista