Skip to content

Support customized text for all aria-labels #86

@recrit

Description

@recrit

The following represents the aria-labels used as of master 61b5322:

  • List / Slider: The aria-label can be customized with the option regionLabel; however, if you do not set a regionLabel then a hard coded "carousel" is used.
  • Item / Slide: The aria-label cannot customized. The aria-label is always set to "slide [number of slide]", example "slide 2".

Issues

  • List / Slider: The markup could have a aria-label or aria-labelledby that provides more details or is translated by a backend CMS (example Drupal).
  • Item / Slide: The hard coded value is not translatable and cannot be customized to provide a more specific label (example: "Image 1 of 5").

Desired Changes to support customizing the aria-labels

  • List / Slider:
    • If the slider element already has an aria-label or aria-labelledby then the slick library should not override it with the hard coded "carousel" or the options.regionLabel.
  • Item / Slide:
    • Add a options.customItemLabel function similar to options.customPaging that is passed the slider and the slide index. This would allow the caller to pass in a custom label function or use the default that would return "slide [number of slide]".
    • If the slide element already has an aria-label or aria-labelledby then the slick library should not override it with the options.customItemLabel.

Generic Example:

customItemLabel: function (slider, i) {
    return 'Image ' + (i + 1) + ' of ' + slider.$slides.length;
}

Example with Drupal:

customItemLabel: function (slider, i) {
    return Drupal.t('Image @index of @total', {
      '@index': i + 1,
      '@total':  slider.$slides.length
    });
}

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