Support customized text for all aria-labels
Opened this issue · 3 comments
recrit commented
The following represents the aria-labels used as of master 61b5322:
- List / Slider: The
aria-label
can be customized with the optionregionLabel
; however, if you do not set aregionLabel
then a hard coded "carousel" is used. - Item / Slide: The
aria-label
cannot customized. Thearia-label
is always set to "slide [number of slide]", example "slide 2".
Issues
- List / Slider: The markup could have a
aria-label
oraria-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
oraria-labelledby
then the slick library should not override it with the hard coded "carousel" or theoptions.regionLabel
.
- If the slider element already has an
- Item / Slide:
- Add a
options.customItemLabel
function similar tooptions.customPaging
that is passed theslider
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
oraria-labelledby
then the slick library should not override it with theoptions.customItemLabel
.
- Add a
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 commented
The opened PR #88 makes the following changes:
List / Slider:
- If the slider element already has an
aria-label
oraria-labelledby
then thearia-label
is not set with the hard coded "carousel" or theoptions.regionLabel
.
Item / Slide:
- Added a
options.customItemLabel
function similar tooptions.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 thearia-label
is not set with theoptions.customItemLabel
.