Support customized text for all aria-labels

[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
    });
}

[recrit]

The opened PR #88 makes the following changes: List / Slider:

• If the slider element already has an aria-label or aria-labelledby then the aria-label is not set with the hard coded "carousel" or the options.regionLabel.

Item / Slide:

• Added a options.customItemLabel function similar to options.customPaging that is passed the slider and the slide index. This allows 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 aria-label is not set with the options.customItemLabel.

[achemkhi]

@recrit : when will it be released to fix the problem

[recrit]

@achemkhi The PR #88 is opened for the accessible-slick maintainers to review, so it is up to them when it is released.