[Help]: liveRegionContent has inconsistent behaviour

[intelligence]

Summary

When setup up liveRegionContent I cannot just pass the params I need, I must pass them all, otherwise totalSlides, for example show "0" or "true" (depending on which params are passed).

Maybe this is working as intended, but the docs should declare this.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @intelligence,

If you want to customize the live region content, you should cover all cases. Use the default setup and customize it:

{
  liveRegionContent: (
    hasAnyGroupedSlides,
    firstSlideIndex,
    lastSlideIndex,
    totalSlides,
    selectedSnapIndex,
    totalSnaps
  ) => {
    const slide = firstSlideIndex + 1
    const lastSlide = lastSlideIndex + 1
    const isSlideGrouped = firstSlideIndex !== lastSlideIndex
    const groupInfo = `(group ${selectedSnapIndex + 1} of ${totalSnaps})`

    if (!hasAnyGroupedSlides) {
      return `Showing slide ${slide} of ${totalSlides}`
    }
    if (!isSlideGrouped) {
      return `Showing slide ${slide} of ${totalSlides} ${groupInfo}`
    }

    return `Showing slides ${slide}-${lastSlide} of ${totalSlides} ${groupInfo}`
  }
}