Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support customized text for all aria-labels #86

Open
recrit opened this issue Feb 14, 2023 · 3 comments
Open

Support customized text for all aria-labels #86

recrit opened this issue Feb 14, 2023 · 3 comments

Comments

@recrit
Copy link

recrit commented Feb 14, 2023

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
Copy link
Author

recrit commented Feb 14, 2023

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.

recrit pushed a commit to recrit/accessible-slick-issue-86-customizable-aria-labels that referenced this issue Feb 16, 2023
@achemkhi
Copy link

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

@recrit
Copy link
Author

recrit commented Jun 20, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants