embla-carousel-aria

KO | EN

gitlite — search

#python #react #go #machine-learning #rust #deep-learning #linux #docker #macos #kubernetes #awesome-list #security #ios #open-source

embla-carousel-aria

(★ 14)

An accessibility plugin for the embla-carousel library.

embla-carousel-aria Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<a href="https://github.com/davidjerleke/embla-carousel" target="_blank"><img width="70" height="70" src="/assets/embla-logo.svg" alt="Embla Carousel"></a>

<h2 align="center">Accessibility for Embla Carousel</h2>

This plugin adds ARIA-spec compliance to the amazing
 <a href="https://github.com/davidjerleke/embla-carousel">Embla Carousel</a>

## Installation

First you need to follow the [installation instructions for Embla Carousel](https://github.com/davidcetinkaya/embla-carousel#installation), after that you can add aria support:

```sh
npm install --save embla-carousel-aria  # yarn add embla-carousel-aria
```

### JavaScript / TypeScript

```js
import EmblaCarousel from 'embla-carousel';
import AriaPlugin from 'embla-carousel-aria';

// initialize Embla Carousel
const embla = EmblaCarousel(
  emblaNode,
  {
    inViewThreshold: 0.25, // Note: Your slide must be in view for it to be tabbable! A high view threshold is recommended.
  },
  [AriaPlugin()]
);
```

### React

```js
import { useEmblaCarousel } from 'embla-carousel-react';
import AriaPlugin from 'embla-carousel-aria';

const EmblaCarouselComponent = ({ children }) => {
  const [emblaRef, embla] = useEmblaCarousel(
    {
      inViewThreshold: 0.25, // Note: Your slide must be in view for it to be tabbable! A high view threshold is recommended.
    },
    [AriaPlugin()]
  );

// ...
};
```

## Options

### locale

**Type**: string 
**Default**: en-US

Locale to be used in IETF's BCP 47 format.

### live

**Type**: false | "off" | "polite" | "assertive" 
**Default**: false

Whether the screen reader should announce slide changes. Recommended to be turned off if autoscroll is used.

### debounce

**Type**: number 
**Default**: 300

The debounce to use when updating aria properties.

### onFocusChange

**Type**: Function 
**Default**: (evt: HTMLElement, target: HTMLElement) => void

A callback function that is invoked when the focus is moved by the Aria plugin.

## Global Options

You can also set global options that will be applied to all instances. This allows for overriding the default plugin options with your own:

```js
AriaPlugin.globalOptions = {
  debounce: 1000,
};
```

## OS & Browser Support

- Mac OS (Chrome, Firefox, Safari, Edge), Magic Mouse, Magic Trackpad
- Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads

## Thanks

Kudos to [David Jerleke](https://github.com/davidjerleke) for creating [Embla Carousel](https://github.com/davidjerleke/embla-carousel) with its open API 🙏

## License

MIT.

embla-carousel-aria

embla-carousel-aria Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

embla-carousel-aria

embla-carousel-aria Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README