Carousel implementation does not pass WCAG2a using Axe tests in Cypress

• pure-react-carousel version: ^1.27.5
• react version: ^16.8
• browser used: Chrome
• node version: v12.18.4

Relevant code or config:

            <div
                data-testid="spotlights"
                style={{ height: '100%', position: 'relative' }}
                role="region"
                aria-label="Spotlights carousel"
            >
                <CarouselProvider
                    visibleSlides={1}
                    totalSlides={totalSlides}
                    step={1}
                    naturalSlideWidth={1967}
                    naturalSlideHeight={721}
                    isPlaying={!account}
                    interval={10000}
                    style={{ height: '100%' }}
                >
                    {totalSlides > 1 && (
                        <div
                            style={{
                                width: 36,
                                height: '100%',
                                position: 'absolute',
                                top: 4,
                                left: 4,
                                zIndex: 101,
                            }}
                        >
                            <ButtonBack>
                                <ChevronLeftIcon />
                            </ButtonBack>
                        </div>
                    )}
                    {totalSlides > 1 && (
                        <div
                            style={{
                                width: 36,
                                height: '100%',
                                position: 'absolute',
                                top: 4,
                                right: 0,
                                zIndex: 101,
                            }}
                        >
                            <ButtonNext>
                                <ChevronRightIcon />
                            </ButtonNext>
                        </div>
                    )}
                    {totalSlides > 1 && (
                        <div
                            style={{
                                width: 36,
                                position: 'absolute',
                                top: 4,
                                left: 32,
                                zIndex: 101,
                            }}
                        >
                            <ButtonPlay childrenPlaying={<PauseIcon />} childrenPaused={<PlayArrowIcon />} />
                        </div>
                    )}
                    {totalSlides > 1 && (
                        <div
                            style={{
                                width: 200,
                                marginLeft: -100,
                                position: 'absolute',
                                top: 0,
                                left: '50%',
                                zIndex: 101,
                                textAlign: 'center',
                            }}
                        >
                            <DotGroup />
                        </div>
                    )}
                    <div
                        style={{
                            zIndex: 99,
                        }}
                    >
                        <Slider>
                            {slides.map((item, index) => {
                                return (
                                    <Slide index={item.index} key={index}>
                                        <a href={item.link} aria-label={item.aria}>
                                            <Image
                                                src={item.src}
                                                alt={item.alt}
                                                style={{ width: '100%' }}
                                                aria-label={item.aria}
                                            />
                                        </a>
                                    </Slide>
                                );
                            })}
                        </Slider>
                    </div>
                </CarouselProvider>
            </div>

What you did:

Running Axe in Cypress tests for WCAG compliance.

What happened:

failureSummary: "Fix any of the following:↵  aria-label attribute does not exist or is empty↵  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty↵  Element has no title attribute or the title attribute is empty"
html: "<div class="horizontalSlider___281Ls carousel__slider carousel__slider--horizontal" aria-live="polite" tabindex="0" role="listbox">"
impact: "serious"

failureSummary: "Fix all of the following:↵  List element has direct children that are not allowed inside <li> elements"
html: "<ul class="sliderTray___-vHFQ sliderAnimation___300FY carousel__slider-tray carousel__slider-tray--horizontal" style="width: 400%; transform: translateX(0%) translateX(0px); flex-direction: row;">"
impact: "serious"

Problem description:

Does not pass WCAG2a tests at the moment.

Suggested solution:

Fixes are explained in the errors above.

Can you help us fix this issue by submitting a pull request?

TBH - Have never tried - but happy to when I get some time.

[CatchGus]

The first violation can be solved by passing your own aria-label prop to Slider

The second violation is “List element has direct children with a role that is not allowed: option”. Apparently putting a role of option on an li element is a no no. This can be solved by changing the ul and li tags to a different element.

<Slider aria-label="My accessible name" trayTag="div">
   <Slide tag="div">...<Slide>
</Slider>

Should probably be fixed up the code though… Also this is not a Cypress only issue, I also saw these violations surfaced in our Storybook.

[stale[bot]]

This issue has been automatically closed becuase it has not had recent activity.