akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.73k stars 2.1k forks source link

Accessibility Issue- on Mobile device: Focus Not Moving to Every Slide with TalkBack on React Slick #2310

Open nvarma999 opened 9 months ago

nvarma999 commented 9 months ago

Description: I am experiencing an issue with TalkBack accessibility on React Slick. When using the carousel with the following settings, the focus is not consistently moving to every slide as expected. This behavior is observed on real mobile devices.

Settings: const settings = { dots: false, infinite: false, speed: 300, slidesToShow: 2, slidesToScroll: 1, swipeToSlide: true, arrows: false, variableWidth: true, accessibility: true, touchMove: true, rows: 1, beforeChange: beforeChange, responsive: [ { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] };

Description: I am experiencing an issue with TalkBack accessibility on React Slick. When using the carousel with the following settings, the focus is not consistently moving to every slide as expected. This behavior is observed on real mobile devices.

Settings:


const settings = {
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 2,
    slidesToScroll: 1,
    swipeToSlide: true,
    arrows: false,
    variableWidth: true,
    accessibility: true,
    touchMove: true,
    rows: 1,
    beforeChange: beforeChange,
    responsive: [
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
};

**Steps to Reproduce:**

Open the React Slick carousel on a real mobile device.
Enable TalkBack accessibility.
Swipe through the slides.

**Expected Behavior:**
The focus should move to every slide, making each slide accessible when using TalkBack.

**Actual Behavior:**
The focus is not consistently moving to every slide. Some slides do not receive focus when swiping through the carousel.

**Environment:**

React Slick version: 0.28.1
Browser and version: All Browsers & All Versions
Device: All Android & Iphone
TalkBack version (if applicable): Pre defined