Skip to content

Not able to assign different aria-label to different handles #88

Open
@oliver139

Description

@oliver139

As the documentation of noUISlider:
https://refreshless.com/nouislider/slider-options/#section-handle-attributes

noUiSlider.create(slider, {
    start: [10, 120],
    handleAttributes: [
        { 'aria-label': 'lower' },
        { 'aria-label': 'upper' },
    ],
    range: {
        'min': 0,
        'max': 100
    }
});

It should be possible to assign different labels to the handles separately by passing a array


But recently the parameter aria of vueform slider is not supporting.
Where if we take a look on the source code:

if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
  let handles = Array.isArray(value.value) ? value.value : [value.value]

  defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby && ariaLabelledby.value ? {
    'aria-labelledby': ariaLabelledby.value,
  }: {})))
}

aria is always passed as an object to defaultOptions.handleAttributes, which make such action becoming not possible.


Although developers can also try passing slider option with options parameter, it is not possible in this case.
While with the watcher:

watch(options, refresh, { immediate: false, deep: true })

Making the slider refreshing everytime when user dragging the controls and becoming unusable.


Possible solution:

  1. Make aria to accept both object and array
  2. Then have different action base on the type

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions