Resolve warning

[ben4d85]

Hi, great project, very easy to use!

Unfortunately, I am getting the following warning for each image (in Chrome Dev Tools):

warning Non-interactive elements should not be assigned mouse or keyboard event listeners jsx-a11y/no-noninteractive-element-interactions

Please can this be addressed?

The following info might help:

• https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md

[maxmarinich]

Hi, @ben4d85! The gallery has wide functionality and allow you use custom components. Please use them as interactive components as needed. New pull request also welcome.

[ben4d85]

For anyone else who faces this, you need to add the prop role="presentation" to your img components.

Here's the starter code from the readme with said prop added:

import React from 'react';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';

const handleDragStart = (e) => e.preventDefault();

const items = [
  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
];

const Gallery = () => {
  return (
    <AliceCarousel mouseTracking items={items} />
  );
}