When I am trying to navigate through the slides using the tab key, the slides outside of viewport do not seem to be accessible.

Is this because accessibility is not properly supported by the slider or is this an issue with my code?



:question:Question

:bookmark:4.x

Accessibility issue

## Description
I've got a React based slider using the pagination plugin. Each slide has a button that toggles a text pop up within the slide. When I click the button to bring up the text pop up, the `flicking-pagination` element gets emptied, and the bullets disappear from the DOM. I imagine this is because the slide content is technically changing, so the slider feels the pagination settings are possibly inaccurate. I've tried running the `init` method after every time the text pop up is toggled, but that doesn't fix the issue. Any idea what's happening here, or how to fix it?

## Steps to check or reproduce

The important chunk is here:

```
    <button className={styles.learn_more} onClick={() => toggleBios(index)} aria-label="open slide bio">+ learn more</button>
    {slide.bio && openBios[index] && (
        <div className={`${styles.bio} fade-in`}>
            <button className={styles.close} onClick={() => toggleBios(index)} aria-label="close slide bio">&#10005;</button>
            <RichTextArea html={slide.bio} />
        </div>
    )}
```

This is within a slide, and a button that toggles a boolean value to conditionally render a `div` within the slide is toggled with the `toggleBios()` function. The amount of slides within the `Flicking` element never changes, just what is rendered within. The slider works fine after toggling the appearance of the text pop up, it's just the pagination bullets that are affected.

Here's the entire component including the `ViewportSlot` if it helps narrow down a problem.

```
                        <Flicking
                            align="prev"
                            circular={true}
                            plugins={plugins}
                            ref={sliderRef}>
                            {slides.map((slide, index) => (
                                <div
                                    className={styles.slide}
                                    key={`focus-slide-${index}`}
                                    style={{ backgroundImage: `url('${slide.backgroundImage.url}')` }}>
                                    <div className={styles.slide_content}>
                                        <div className={styles.logo}>
                                            <SEOImage img={slide.logo} sizes={[200]} className="w-100" />
                                        </div>
                                        {slide.companyName && <h3>{slide.companyName}</h3>}
                                        {slide.subtitle && <h4>{slide.subtitle}</h4>}
                                        {slide.location && <p className={styles.location}>{slide.location}</p>}
                                        <hr />
                                        <button className={styles.learn_more} onClick={() => toggleBios(index)} aria-label="open slide bio">+ learn more</button>
                                        {slide.bio && openBios[index] && (
                                            <div className={`${styles.bio} fade-in`}>
                                                <button className={styles.close} onClick={() => toggleBios(index)} aria-label="close slide bio">&#10005;</button>
                                                <RichTextArea html={slide.bio} />
                                            </div>
                                        )}
                                    </div>
                                </div>
                            ))}
                            <ViewportSlot>
                                <div className={styles.controls}>
                                    <button className={styles.arrow} onClick={prevSlide}>
                                        <img src="/assets/icons/left-arrow.svg" alt="Left Arrow" aria-label="previous slide" />
                                    </button>
                                    <div className={`flicking-pagination ${styles.pagination}`}></div>
                                    <button className={styles.arrow} onClick={nextSlide}>
                                        <img src="/assets/icons/right-arrow.svg" alt="Right Arrow" aria-label="next slide" />
                                    </button>
                                </div>
                            </ViewportSlot>
                        </Flicking>
```




:bug:Bug

:package:React

stale

Pagination disappearing with slide content modification

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

@egjs/flicking

2 GitHub issues

Links