## 👉 Maintainer edit
Jump directly to [ongoing work](https://github.com/davidjerleke/embla-carousel/issues/6#issuecomment-3214408454).

## Original post

Would be nice to have the slider accessibile, maybe with custom labels (i18n).

feature request

resolved

[Feat]: Accessibility

### Which variants of Embla Carousel are you using?

- [x] embla-carousel **(Core)**
- [x] embla-carousel-react
- [x] embla-carousel-accessibility
- [ ] 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)**

### Steps to reproduce

In the CodeSandbox shared, the slides that have a red background are the slides that are hidden from keyboard navigation. It works perfectly when you scroll slide by slide or you don't contain scroll/keep snaps.

However, when using the `slidesToScroll: auto` with a number of slides that don't fill every snap, it adds `aria-hidden` to slides that are still in view.

### Expected Behavior

Instead of using `scrollSnaps` to set `aria-hidden` it should use `slidesInView` instead.

### Additional Context

_No response_

### What browsers are you seeing the problem on?

All browsers

### Version

v9.0.0-rc1

### CodeSandbox

https://codesandbox.io/p/sandbox/embla-carousel-accessibility-react-forked-wqxz3q

### Before submitting

- [x] I've made research efforts and searched the documentation
- [x] I've searched for existing issues
- [x] I agree to follow this project's Contributing Guidelines for bug reports

not a bug

[Bug]: Accessibility hidden slides that are still visible/interactable

### Which variants of Embla Carousel are you using?

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

### Steps to reproduce

The bug occurs when I use version 9.0.0-rc01 of the carousel in React with the AutoHeight-plugin, **and** use React Compiler. The `height`-style is set on init, but never updated afterwards. If I add `'use no memo';` (see line 7 in App.tsx in the attached Stackblitz-example), which opts the component out of compilation, the bug disappears and everything works as expected again.

(It also looks like `embla-carousel-accessibility` breaks when used with React Compiler, but I haven't looked more into that.)

### Expected Behavior

AutoHeight plugin should work both when used with and without React Compiler.

### Additional Context

I did some debugging and first believed that the issue was related to `isSsr` in AutoHeight always being set to `true`, which makes the plugin inactive. However, when copying the entire plugin and removing `isSsr`, the bug still persists.

### What browsers are you seeing the problem on?

Chrome, All browsers

### Version

9.0.0-rc01

### CodeSandbox

https://stackblitz.com/edit/vitejs-vite-vyrkshzg?file=src%2FApp.tsx%3AL7-L7

### Before submitting

- [x] I've made research efforts and searched the documentation
- [x] I've searched for existing issues
- [x] I agree to follow this project's Contributing Guidelines for bug reports

[Bug]: AutoHeight plugin breaks when using React Compiler

### Which variants of Embla Carousel are you using?

- [ ] embla-carousel **(Core)**
- [x] 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)**

### Steps to reproduce

Following these steps we get an error when trying to use Navigation Buttons

```tsx
import React, { useState, useEffect } from 'react'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })
  const [scrollSnaps, setScrollSnaps] = useState([])
  const [selectedSnap, setSelectedSnap] = useState(0)

  const goTo = (index) => emblaApi?.goTo(index)
  const setupSnaps = (emblaApi) => setScrollSnaps(emblaApi.snapList())
  const setActiveSnap = (emblaApi) => setSelectedSnap(emblaApi.selectedSnap())

  useEffect(() => {
    if (!emblaApi) return

    setupSnaps(emblaApi)
    setActiveSnap(emblaApi)

    emblaApi.on('reinit', setupSnaps)
    emblaApi.on('reinit', setActiveSnap)
    emblaApi.on('select', setActiveSnap)
  }, [emblaApi])

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaRef}>
        <div className="embla__container">
          <div className="embla__slide">Slide 1</div>
          <div className="embla__slide">Slide 2</div>
          <div className="embla__slide">Slide 3</div>
        </div>
      </div>

      <div className="embla__dots">
        {scrollSnaps.map((_, index) => (
          <button
            className={'embla__dot'.concat(
              index === selectedSnap ? ' embla__dot--selected' : ''
            )}
            key={index}
            onClick={() => goTo(index)}
          >
            {/* Button content */}
          </button>
        ))}
      </div>
    </div>
  )
}
```

### Expected Behavior

Docs should be updated with current implementation

### Additional Context

I have also tried...

### What browsers are you seeing the problem on?

_No response_

### Version

_No response_

### CodeSandbox

_No response_

### Before submitting

- [x] I've made research efforts and searched the documentation
- [x] I've searched for existing issues
- [x] I agree to follow this project's Contributing Guidelines for bug reports

[Bug]: Docs for Dot Buttons are not up to date

### Bug is related to

- [x] embla-carousel-react
- [x] embla-carousel-vue
- [x] embla-carousel-svelte
- [x] embla-carousel-solid

### Embla Carousel version

- `v8.0.0-rc15`

### Describe the bug

Since version v8.0.0-rc15,  ESLint says that the `SliderPropsOptions` type does not have a `loop` property. This happens to all properties that are in `EmblaOptionsType`:

![image](https://github.com/davidjerleke/embla-carousel/assets/7840559/420a01d6-a92b-4d8a-b9af-c1efea9fb98f)

Also because of this, `useEmblaCarousel` has the `options` argument type `Partial<OptionsType> | undefined` instead of `EmblaOptionsType | undefined`, which causes a linter error:

![image](https://github.com/davidjerleke/embla-carousel/assets/7840559/0463401c-d806-421a-a9e5-5a662fefbc35)


typescript

Can't import `EmblaCaroouselType`, `EmblaOptionsType`, `EmblaPluginType` from `embla-carousel-react`, `embla-carousel-vue` and `embla-carousel-svelte`

It would be great to be able to use the left/right arrow keys to navigate slides by default when the carousel is in focus.

Won't be investigated unless it gets lots of traction

not planned

Optional keyboard left/right arrow key navigation

### Feature request is related to

- [ ] The Vanilla JavaScript version
- [x] The React version
- [ ] The Embla Carousel core (all versions)
- [ ] Documentation website
- [ ] Other

### Is your feature request related to an issue?

I tried to update to the latest version but now my project is working as expected because of the removal of the selected class.

Is there any heavy reason why this was removed? Is there any chance to bring it back?

Is there any alternative to accomplish the same result?

### Describe the solution you'd like

- A restoration of the selected class functionality or an alternative


Bring the selected class back?

### Bug is related to

- [x] embla-carousel-react

### Embla Carousel version

- v7.1.0

### Describe the bug

I'm trying to eliminate the stuttering issue that seems to appear whenever I set a state on scroll, particularly the `setSlidesInView` one, in the codesandbox I provided.
Being it a lighter version of my actual code, in this example the issue starts manifesting with way more items (~1500) than I have (~100). 
If I comment out that `setSlidesInView` either in my code or in the example, the carousel will work just perfectly fine.
I wonder if there is a way to get around this issue I'm facing as I think I've tried them all, among `throttle`, `flushSync` and what not, to no avail.
The goal is to lower the opacity of the immediate slide out of the view.

I appreciate any kind of help and/or any suggestions on how I can improve my code. Thanks!


### CodeSandbox

- https://codesandbox.io/s/embla-carousel-opacity-react-forked-ghjton

### Steps to reproduce

- Click on the right arrow multiple times.

### Expected behavior

- The carousel will stutter



Carousel stuttering with many items when setting state on scroll 

I was wondering if there was a way to set all of the event listeners to passive?   In the type EventStore the event options are defined but it doesn't' look like in the eventDispatch they are included.  Plus I don't see away that you can set them. I'm hoping I overlooked something and there is a way to set them.

I'm getting some jank on mobile with a slider (3 full width image slides + some HTML).  Also, I have a client that is adamant about the Google Lighthouse scores (Chrome->Inspector->Audit).  This is the only thing I'm getting dinged for in best practices category.

Passive event listeners

### Feature request is related to

- [x] embla-carousel (core package)
- [x] embla-carousel-react
- [ ] embla-carousel-autoplay
- [ ] embla-carousel-auto-height
- [ ] embla-carousel-class-names
- [ ] embla-carousel-docs (documentation website)

### Is your feature request related to an issue?

I'm unable to focus on or navigate the carousel with my keyboard.

### Describe the solution you'd like

For accessibility reasons, I would expect interactive elements to be interactive with a keyboard as well as a mouse.

### Describe alternatives you've considered

There really isn't an alternative to this, aside from not supporting it at all.

### Additional context

n.a.


This issue or pull request already exists

duplicate

Unable to access and move through carousels with the keyboard.

Hi! I ran into a nasty bug with unnecessary scroll under certain conditions:
- `loop`: `true`
- `draggable`: `false`
- `slidesToScroll`: more than 1 (for example 4)
- slides count: more than `slidesToScroll` but not completely divisible by `slidesToScroll` (for example 5)

In this case after initial load when we scroll to next and try to click link on the first slide we see unnecessary scroll.

Here's a demonstration of what I'm talking about: https://codesandbox.io/s/embla-carousel-containscroll-mec6x

As I figured out it is because click on the link fires `focus` event and Embla considers that this is not the current slide and does scroll. 

Unnecessary scroll under certain conditions

A lightweight carousel library with fluid motion and great swipe precision

embla-carousel

11 GitHub issues

Links