embla-carousel-aria
v8.0.0-rc19
Published
An accessibility plugin for Embla Carousel
Downloads
1,457
Maintainers
Readme
Installation
First you need to follow the installation instructions for Embla Carousel, after that you can add aria support:
npm install --save embla-carousel-aria # yarn add embla-carousel-aria
JavaScript / TypeScript
import EmblaCarousel from 'embla-carousel';
import AriaPlugin from 'embla-carousel-aria';
// initialize Embla Carousel
const embla = EmblaCarousel(
emblaNode,
{
inViewThreshold: 0.25, // A high view threshold is recommended.
},
[AriaPlugin()]
);
React
import { useEmblaCarousel } from 'embla-carousel-react';
import AriaPlugin from 'embla-carousel-aria';
const EmblaCarouselComponent = ({ children }) => {
const [emblaRef, embla] = useEmblaCarousel(
{
inViewThreshold: 0.25, // 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:
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 for creating Embla Carousel with its open API 🙏
License
MIT.