wontfix

first and last array elemts duplicate when real dom created

Hi supporters/contributors,

When applying [react-responsive-carousel](https://github.com/leandrowd/react-responsive-carousel) into my landing page, the result is so great. However, there is no way to customize thumb which changes **li** to another HTML element. It seems that **li** is automatically generated from original source code.
The reason to proceed is that PageSpeed score reported low Accessibility scope due to **Values assigned to role="" are not valid ARIA roles**. Please check my below screenshot to get further details. 
![Screenshot 2024-01-25 at 15 15 39](https://github.com/leandrowd/react-responsive-carousel/assets/9548275/e80edb2c-2970-48a2-af2f-11b25e271983)
![Screenshot 2024-01-25 at 15 22 53](https://github.com/leandrowd/react-responsive-carousel/assets/9548275/8e49057a-d7e4-472d-a768-5c72ef56523b)

The **Accessibility** score is only 95 now. Therefore, could you check to expose one props to let us handle this task?

There is no way to remove 'role' attribute out of li or change li to another HTML elements from 'renderThumbs' props

I render not only images but also div elements.
When I swipe the screen, the screen turns white during the swipe.
How can I fix this problem?

```
<Carousel
        centerMode
        centerSlidePercentage={90}
        showStatus={false}
        showThumbs={false}
        autoPlay
        infiniteLoop
        dynamicHeight={false}
        swipeable={true}
        renderIndicator={(onClickHandler, isSelected, index, label) => {
          return (
            // this is styled component.
            <Indicator
              selected={isSelected}
              onClick={onClickHandler}
              onKeyDown={onClickHandler}
              value={index}
              key={index}
              role="button"
              tabIndex={0}
              title={`${label} ${index + 1}`}
              aria-label={`${label} ${index + 1}`}
            />
          );
        }}
      >
        {reviews.map((review, i) => (
          <div key={i}>
            <Link href={`/products/${review.productId}`}>
              <a>
                <Image imageUrl={images[i]} ratio={70}/>
                <div className="p-h-10 m-t-35">
                  <ProductInfo
                    className="limit-line-2 m-t-9 m-b-3"
                    size="lg"
                    type="name"
                    component="p"
                  >
                    {review.content}
                  </ProductInfo>
                  <ProductInfo
                    className="limit-line-2 m-t-9 m-b-3"
                    size="md"
                    type="sub"
                    component="p"
                  >
                    {review.userName}
                    &nbsp;|&nbsp;
                    {moment(review.createdAt).format("YYYY.MM.DD")}
                  </ProductInfo>
                  <Divider height={1} color="dark" className="m-v-10 p-h-10" />
                  <Row align="middle">
                    <Col span={22}>
                      <ProductInfo
                        className="limit-line-1 m-b-5"
                        size="lg"
                        type="sub"
                        component="p"
                      >
                        {review.productName}
                      </ProductInfo>
                      <ProductInfo
                        className="m-r-5"
                        size="md"
                        type="price"
                        component="span"
                      >
                        {currency(review.calculateTotalPrice, "원")}
                      </ProductInfo>
                      <ProductInfo
                        className="m-r-5"
                        size="md"
                        type="originPrice"
                        component="span"
                      >
                        {currency(review.productPrice, "원")}
                      </ProductInfo>
                      <ProductInfo
                        size="md"
                        type="discountRate"
                        component="span"
                      >
                        {review.discountPercent}%
                      </ProductInfo>
                    </Col>
                    <Col span={2} className="text-right">
                      <SeeMoreIcon />
                    </Col>
                  </Row>
                </div>
              </a>
            </Link>
          </div>
        ))}
      </Carousel>
```


![it_turns_white](https://user-images.githubusercontent.com/29244883/95298799-9bbfae80-08b7-11eb-89b3-d8730d379c6e.gif)


It turns white when I swipe 

When a node is passed into Carousel, that has interactive children, you can tab through those children without advancing the slide.
This gets you into a state where two slides are shown at once. You can see this from the storybook youtube example, if you tab through the elements in the video, you'll advance partially to the next slide

Picture for the behavior:
![Screen Shot 2022-02-23 at 6 47 48 AM](https://user-images.githubusercontent.com/58561705/155314091-f288c0c8-4495-41a3-a6e7-34de10691941.png)


Accessibility bug with interactive nested children


<img width="959" alt="React responsive cursol" src="https://user-images.githubusercontent.com/93735775/219969368-e0df8a15-c706-4dcf-8c81-211f5797a248.png">

**Description:**
Focus goes to hidden content after 'Learn more' icon. 

**Steps to reproduce the behavior:**
1. Open URL: https://ui.ads-int.microsoft.com/Campaign/mca/ads/campaign/14362371719539?isDMC=false&uid=194363245&cid=313974029&aid=391890532 in edge browser.
2. Sign in using valid credentials.
3. Navigate to 'Ads' tab and activate it.
4. Navigate to the left navigation pane and Activate ' Add campaign traffic' control.
5. Navigate to 'Ads' section.
6. Navigate to 'Learn more' button control and press tab.
7. Observe that Focus goes to hidden content after 'Learn more' icon.

**Actual behavior:**
Focus goes to hidden content after 'Learn more' icon. 

**Expected behavior:**
After 'Learn more' icon, focus should land on link 'https...'. Focus should not go to hidden control(s) and the screen reader should not read hidden content unless the content is specifically designed for that purpose (such as screen-reader only text and headings). If these items are hidden visually and aren’t specifically for screen reader users, they should be hidden with aria-hidden and tab-index="-1", or simply ‘display:none’.

**
https://user-images.githubusercontent.com/93735775/219969359-d02b1101-391e-442d-a007-255817036497.mp4
**
OS: Windows_11 
Version: 22H2
OS Build: 22610.1
Browser: Microsoft Edge (103.0.1264.71)
URL: https://ui.ads-int.microsoft.com/Campaign/mca/ads/campaign/14362371719539?isDMC=false&uid=194363245&cid=313974029&aid=391890532

**Note:** This is not public-facing. It requires credentials. So to bypass that, use this demo instead to repro: [01 - Basic - Vertical ⋅ Storybook (react-responsive-carousel.js.org)](http://react-responsive-carousel.js.org/storybook/index.html?path=/story/01-basic--vertical).
The issue is that the focus is moving to the carousel container, which is "hidden content". This is the exact HTML element that is unnecessarily receiving focus in [01 - Basic - Vertical ⋅ Storybook (react-responsive-carousel.js.org)](http://react-responsive-carousel.js.org/storybook/index.html?path=/story/01-basic--vertical):

<div class="carousel-root" tabindex="0">

To repro this on the demo, just TAB to the carousel and you will immediately notice that the focus moves to the hidden container. It is the first TAB stop in the carousel.

Focus goes to hidden content after 'Learn more' icon. 

Carousel Html Code

Lighthouse audit results in accessibility issue for the control dots:

![lighthouse_error_react-responsive-carousel](https://user-images.githubusercontent.com/6371670/74598248-200cab00-5023-11ea-8706-56edff342bf0.png)

Replicated in this sandbox:
https://codesandbox.io/s/react-responsive-carousel-lighthouse-audit-issue-0kxyl

When the audit is finished, it seems to correctly contain only `<li>` elements, so my guess is that, at some point during rendering there's some invalid element, but it's fixed by the time I inspect the DOM.


Lighthouse Accessibility issue: Lists do not contain only <li> elements...

**Describe the bug**
I'm trying to use v3.2.21 in order to use the new `ariaLabel` prop applied on the carousel-root element on my project.

Strange thing is that searching through the release zip file from github, I see ariaLabel changes but not in the respective node_modules subfolder...

**Expected behavior**
I should see the `aria-label` attribute in the generated markup, but it does not happen...

**Example**
I did tiny changes on the codesandbox below:

- Use v `3.2.21` in the `package.json` file
- Line 5 of `src/Carousel.js` => `<Carousel autoPlay="false" ariaLabel="hello world">`

See it in action via https://codesandbox.io/s/arialabel-prop-not-in-3-2-21-8msle

**Screenshots**
Expected markup:
![image](https://user-images.githubusercontent.com/704026/130204565-48543d08-d0df-45bc-a649-91fe1f1bd02a.png)


https://www.npmjs.com/package/react-responsive-carousel/v/3.2.21

Incorrect release of 3.2.21 on npm ?

Hi. Someone here managed a way to custom the indicators when there are too many dots on the picture? Like this:
![toomanydots](https://user-images.githubusercontent.com/43316469/73000446-c5ec4180-3df8-11ea-91b5-0b2d2810920c.PNG)
Any help will be appreciated. 

Custom indicators when dots occupy too much space

**Problem**:
Purely visual controls are being displayed to screen readers.

**Impact**:
Screen reader users will have a separate, non-visual user experience when moving through the carousel since they navigate the DOM without paying special attention to the currently selected slide.
For a screen reader it's more important that the list of slides is laid out correctly in the DOM. The carousel controls are purely visual elements and should be removed from the accessibility tree to avoid confusion.

**Recommended Solution**:
Any visual controls for the carousel should be removed for screen readers. This can be done by setting `aria-hidden` on the slide dots (`.control-dots`) and carousel arrows (`.control-arrow`).

There are currently some `aria-label` attributes set on the carousel dots (`.dot`). If the parent element has `aria-hidden` added then these should also be removed since they won't be possible for screen readers to reach. The same would also apply for the carousel arrows (`.control-arrow`) if they have an `aria-hidden` attribute added.

The current slide label (`.carousel-status`) is also hard for screen reader users to understand as it reads "X of Y" after the slide contents in the DOM. Since this is also a purely visual element it should be hidden from screen readers with `aria-hidden` as well.

![slide dots](https://user-images.githubusercontent.com/3979926/106400321-39993500-63e3-11eb-9d72-23630c3ff7bb.png)

Hide Purely Visual Elements from Screen Readers

I see the external controls example, but trying to modify the onClick of the Thumbs does not allow the control of the carousel index.  I am placing components inside the carousel with the images and I am trying to skip those images in the thumbnails, but in doing so with renderThumbs, the indexes of the carousel is thrown off.


```
<Carousel
      showStatus={false}
      thumbWidth={100}
      dynamicHeight
      showThumbs={images && images.length > 1}
      showIndicators={false}
      useKeyboardArrows
      selectedItem={selectedIndex}
      onClickThumb={(index, item) => {
        console.log(index, item, 'THUM B HERE');
        if (item && item.props && item.props.unique) return setSelectedIndex(index - 1);
        setSelectedIndex(index);
      }}
      onChange={(index, item) => {
        console.log(index, item, 'ITEM HERE');
        if (item && item.props && item.props.unique) return setSelectedIndex(index - 1);
        setSelectedIndex(index);
      }}
      renderArrowNext={(clickHandler, hasNext, label) => {
        if (!hasNext) return (null);
        return <button onClick={() => console.log('NEXT')} type="button" aria-label="next slide / item" className="control-arrow control-next">NEXT</button>
      }}
      renderArrowPrev={(clickHandler, hasNext, label) => {
        if (!hasNext) return (null);
        return <button onClick={() => console.log('PREVZIUOS')} type="button" aria-label="previous slide / item" class="control-arrow control-prev"></button>
      }}
      renderThumbs={children => children.filter(({ props }) => props && !props.unique).map(item => {
        const { props } = item;

        return (
          <div className="carousel-wrapper-in-cnc-carousel" key={props && props.id}>
            <img className="image-in-carousel" src={props && props.thumbUrl} alt="listing-details" />
          </div>
        );
      })
      }
    >
      {
        getCellImages(images, hasCellPhone, isUpdatedCell).map(image => {
          if (image && image.url) {
            return (
              <ImageContainer id={image && image.order} detailUrl={image && image.detailUrl} url={image && image.url} thumbUrl={image && image.thumbUrl} />
            );
          }
          if (image && image.middle) {
            return (
              <CellPhoneCTA unique>
                Middle of it

              </CellPhoneCTA>
            );
          }
          if (image && image.end) {
            return (
              <CellPhoneCTA unique>
                End of the line

              </CellPhoneCTA>
            );
          }
          return (null);
        })
      }
    </Carousel>
```

Controlling State including onThumbNailClick

I am testing the `react-responsive-carousel` with Voice Over and the "root" of the gallery which has an imposed `tab-index="0"` (https://github.com/leandrowd/react-responsive-carousel/issues/545) does not accept any `aria-label` or `ariaLabel` attribute.

Without any custom `aria-label` on an interactive element, Voice Over will read ALL the readable contents from ALL the children of this interactive element. In my case, it gets really verbose, reading:

- "previous" button text
- every single image `alt` attribute
- "next" button text



A11Y `div.carousel-root` should accept an `aria-label` attribute

Both the `thumbs` and `indicators` are causing various accessibility issues because of `role="button"` on the `li` element.

Tested with Axe v4.5.3 and Storybook 

**Axe**:
![image](https://user-images.githubusercontent.com/30587540/93130819-14f52880-f6a1-11ea-82bf-de6090e0fb1a.png)
![image](https://user-images.githubusercontent.com/30587540/93130630-d1022380-f6a0-11ea-92c8-816dc4516847.png)

**Storybook**:
![image](https://user-images.githubusercontent.com/30587540/93130654-db242200-f6a0-11ea-9258-1771ef4007b8.png)
![image](https://user-images.githubusercontent.com/30587540/93130674-e11a0300-f6a0-11ea-8043-cc11b3af25a6.png)



Accessibility issue: ARIA role button is not allowed for given element <li>

Lighthouse accessibility audit message 'Buttons do not have an accessible name'. Here are the two element listed:
```
<button type="button" class="control-arrow control-prev"></button>
<button type="button" class="control-arrow control-next"></button>
```
 Would this pass by just adding a `role` or `aria-label` to these buttons? If so I would like to make a PR for this. I've never contributed to an open source project before and this seems like something easy for a newbie like myself. 

good first issue

Accessibility: 'Buttons do not have an accessible name'

Hi, I noticed a few a11y issues with this project so I wanted to make a few issues to help out. I can try to follow up with some PRs today too. Thank you for all the work you've done building and maintaining this! It's a really nice project to use :smile:

**Problem**:
`.carousel-root` has a `tabindex=0` attribute
Focus should not be given to non-interactive elements in the DOM.

**Impact**: 
Screen reader and keyboard only users will stop on this element but not be able to do anything with it since it's non-interactive. 
Also nothing will be read to screen readers when they land on this element. That will likely be confusing since each element that is focusable needs to serve a purpose for screen reader users.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#accessibility_concerns

**Recommended Solution**:
Remove the `tabindex=0` on this element since it serves no purpose for keyboard users or screen readers.

Focus given to non-interactive div

As I want to make carousal of cards and  the problem is here I am just getting the header of the card, not the whole card

" <Carousel  autoPlay={false}
                  useKeyboardArrows={true}
                  dynamicHeight={true}
                  centerSlidePercentage={80}
                  infiniteLoop={true}
                  showThumbs={false}
                  showStatus={false}
                  width = {500}
                  height = {400}>
<div>
<Card>
<CardHeader` className = "Tweeter_header">
			        <div className = "CardHeader_logo">
			        <a href = "https://twitter.com/duckduckgo"><img style = {{float:'left' }} src = {DuckDuckGo_logo}  className="DuckDuckgoLogo" /></a>
			        <div className = "card_left"><a href="https://twitter.com/duckduckgo" className="tweeterCardName">DuckDuckGo</a>
		            <img src={Twitter_verified} className="tw_card__verified" aria-hidden="true" /> 
		            <a href="https://twitter.com/duckduckgo" className="tw_card_username">@DuckDuckGo</a></div>
		            <img src = {Twitter_logo}  className="twitter_Logo" /> 
		            </div>
			    </CardHeader>
<CardBody  className = "card1_text">
              <CardText>While Google says they donot read your email, 
                <a className="tweet_ur_username" href="https://twitter.com/dmac1" data-screen-name="dmac1" rel="nofollow">@dmac1 </a> 
                 reports that third-party developers still can and sometimes do: <a href="https://t.co/xwml7fdQh6"></a> (paywall).
              </CardText>
              <CardText>
                Summary (non-paywall) by <a className="tweet-url username" href="https://twitter.com/richardjnieva" data-screen-name="richardjnieva" rel="nofollow">
                @richardjnieva</a>:  <a href="https://t.co/EDH2eACccz" title="https://www.cnet.com/news/third-party-gmail-apps-reportedly-let-employees-read-peoples-emails/" rel="nofollow">
                cnet.com/news/third-par...</a>
              </CardText>
<CardFooter className = "tw_card_link"> 
                <a href="https://twitter.com/intent/tweet?in_reply_to=1017404966552498176" data-wrapped="true" className="tw_card_reply" aria-label="Reply to this tweet" title="Reply to this tweet">
                <img src= {Twitter_reply} aria-hidden="true"/>
                </a>
                <a href="https://twitter.com/intent/retweet?tweet_id=1017404966552498176" data-wrapped="true" className="tw-card__link tw-card__action js-tweet-action" aria-label="Retweet button" title="Retweet button">
                <img src= {Twitter_retweet} aria-hidden="true"/></a>
                <a href="https://twitter.com/intent/like?tweet_id=1017404966552498176" data-wrapped="true" className="tw-card__link tw-card__action js-tweet-action" aria-label="Like button" title="Like button">
                <img src= {Twitter_like} aria-hidden="true"/></a>
                <a href="https://twitter.com/duckduckgo/status/1017404966552498176" className="tw-card__date tw-card__link t-bold"  >
                <time style ={{float:'right' , color: '#333' , textDecoration: 'none'}}>Thu Jul 12</time> </a>
            </CardFooter>
          </CardBody>
        </Card>
</div>
</Carousal> 

> " @leandrowd i know it can be noob question but still help  me out

help wanted

card into a carousal is not working properly

Hey there
In a project I want to render the [indicators](https://github.com/leandrowd/react-responsive-carousel#indicators) with numbers, not boxes, so, how can I use this props on my Carousel?

```jsx
const arrayTest = ["/home/banner.png", "/home/banner.png"];

<Carousel
  showThumbs={false}
  showStatus={false}
  showIndicators={false}
  infiniteLoop
>
  {arrayTest &&
    arrayTest.map((image, index) => (
      <Item key={index}>
        <img src={image} />
      </Item>
    ))}
</Carousel>
```

How do I use renderIndicator

(this.state.lessons[this.state.currentLesson]?.downloadable_content_url !== null && this.state.lessons[this.state.currentLesson]?.downloadable_content_url !== "") ?
<div className="content-download">
 {console.log('download url', this.state?.lessons[this.state?.currentLesson], this.state?.lessons[this.state?.currentLesson]?.downloadable_content_url)},
<a href={this.state.lessons[this.state.currentLesson]?.downloadable_content_url} target="_blank"><button className="download" >
<span><i className="fa fa-download" aria-hidden="true"></i></span>Download
</button></a>
</div> : null
 }
if we have only one content 
Like this
<li class="slide selected"></li>
<li class="slide"></li>
<li class="slide"></li>



why it not support ternary operator ? it create empty <li> in frontend if we don't have downloadable_content_url

## 1. How to reproduce

I've implemented custom carousel component, by customizing indicator, using react-spring

```es6
import { Carousel as ReactCaousel } from 'react-responsive-carousel';
import { useSpring, animated } from 'react-spring';


function CarouselIndicatorDot({
  isSelected,
  index,
  label,
}: {
  isSelected: boolean;
  index: number;
  label: string;
}) {
  const theme = useTheme();

  const props = useSpring({
    backgroundColor: isSelected ? theme.palette.primary.main : 'white',
    width: isSelected ? '36px' : '12px',
  });

  const indicatorStyles: CSSProperties = {
    borderRadius: 6,
    display: 'inline-block',
    margin: '0 8px',
    width: 12,
    height: 12,
  };

  const ariaLabel = isSelected ? `Selected: ${label} ${index + 1}` : `${label} ${index + 1}`;

  return (
    <animated.li
      style={{ ...indicatorStyles, ...props }}
      value={index}
      key={index}
      title={ariaLabel}
      aria-label={ariaLabel}
    ></animated.li>
  );
}

export const Carousel = ({ carouselActions }: { carouselActions: ICarouselAction[] }) => {
  return (
    <ReactCarousel
      showArrows={false}
      // autoPlay
      interval={2000}
      showThumbs={false}
      infiniteLoop
      emulateTouch
      swipeable
      dynamicHeight={false}
      showIndicators
      renderIndicator={(onClickHandler, isSelected, index, label) => {
        return <CarouselIndicatorDot isSelected={isSelected} index={index} label={label} />;
      }}
    >
      {carouselActions.map((action, index) => (
        <CarouselItem carouselAction={action} key={index} />
      ))}
    </ReactCarousel>
  );
};

```

In android or mac chrome, it's fine. But in ios, the indiator dots disappeared and shows only when touch moves. 

## 2. Solution

https://github.com/scottjehl/Device-Bugs/issues/8#issuecomment-5742063

I've follwed above link. it need to be applied below css property
```css
.carousel .control-dots {
  -webkit-transform: translate3d(0, 0, 0);
}
```








control dot disappearing issue & solution

**Problem**:
`.control-arrow` buttons are missing focus styles.

**Impact**:
Keyboard only users will not be able to tell where they are in the page without a visual indication for the focused element.

**Recommended Solution**:
Add a visual style for this button so keyboard users know that they're on the arrow button. This could be done by applying the current :hover styles to the arrow elements.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard#focusable_element_must_have_focus_styling



Carousel Arrows Missing Focus Styles

Hello,

Is there a way to add aria accessibility (label, group, hidden, ...) in ul, li & div childs of Carousel ? 

```javascript
<div class="carousel carousel-slider" style="width: 100%;">
<button type="button" class="control-arrow control-prev control-disabled"></button>
<ul class="slider animated" style="transform: translate3d(0%, 0px, 0px); transition-duration: 350ms;">
<li class="slide selected"><div aria-label="carrousel-li-label">
```

I tried : 

```javascript
const elements = React.Children.toArray(props.children)
  let ariaElements = null
  if (elements && elements.length) {
    ariaElements = elements.map(element => React.cloneElement(element, {
      'aria-label': 'carrousel-li-label',
    }))
  }
  return (
    <div ref={ref}>
      <Carousel
        showArrows
        showThumbs={false}
      >
        {ariaElements}
      </Carousel>
    </div>
  )
```

But this add props only inside li.
I tried also to use refs but we cannot modify props inside refs because props are readonly.
Is there a way to do ?
I don't want to manipulate DOM (React is declarative).

Thanks :)

A comment that is awaiting a response from the issue submitter.

awaiting response

Accessibility in ul, li & div 

I'm using [react-a11y](https://github.com/reactjs/react-a11y) in my project that I have this package installed in and it's kicking off a few warnings for the carousel.

> Thumbs You have a click handler on a non-interactive element but no `tabIndex` DOM property. The element will not be navigable or interactive by keyboard users.

Recommended fix: https://github.com/leandrowd/react-responsive-carousel/blob/master/src/components/Thumbs.js#L249
```
const thumbProps = {
  key: index,
  ref: e => this.setThumbsRef(e, index),
  className: itemClass,
  onClick: this.handleClickItem.bind(this, index, this.props.children[index])
  role='button'
  tabIndex={0}
};
```

> Carousel You have a click handler on a non-interactive element but no `tabIndex` DOM property. The element will not be navigable or interactive by keyboard users.

Recommended fix: https://github.com/leandrowd/react-responsive-carousel/blob/master/src/components/Carousel.js#L496
```
const slideProps = {
  ref: (e) => this.setItemsRef(e, index),
  key: 'itemKey' + index,
  className: klass.ITEM(true, index === this.state.selectedItem),
  onClick: this.handleClickItem.bind(this, index, item)
  role='button'
  tabIndex={0}
};
```

Let me know if you'd like me to submit a PR.

react-responsive-carousel

22 GitHub issues

Links