blue outline on slides

[moontaekim]

It looks like when you set dragEnabled={false} there is a blue outline when you toggle to the next page. I assume this is an accessibility feature but is there a way to get rid of this?

[bcarroll22]

Hi @moontaekim, thanks for using Pure React Carousel!

This issue looks like a support question. As outlined in the question issue type, these types of issues will be closed because this is intended to be an issue tracker not a support forum. There are better places on the Internet to find support for questions like this.

If you'd like to request a feature or report a bug, feel free to open another issue and use the provided templates. Thanks again for using our carousel, and good luck!

[HanliTheron]

Hey @moontaekim, did you ever find a solution to this?

I know I can usually switch the blue border of by using something like: .my-class:focus { border: none !important; outline: none !important; } But I can't seem to get rid of this blue border.

[moontaekim]

Hi there,

I was not able to figure it out. I decided to use React-Slick instead.

[HanliTheron]

Ah, thanks for the reply @moontaekim.

For others that might be facing the same problem, with the help of a colleague we were able to remove it, but it's not the cleanest solution:

The Slide component as has a .focusRing class which sets the outline. But trying to overwrite it directly or adding a new className to the Slide component and overwriting it in that class also doesn't work. This however did:

.focusRing___1airF.carousel__slide-focus-ring { outline: none !important; }

The class can be seen in the browser when a user clicks on it.

[dardub]

To me this sounds like a bug or a question on a design decision.

[Vlad715]

@HanliTheron in my case your variant to fix this outline don't work, but I add this style to other class: .carousel__slider { outline: none !important; } It works fine for me))

[latachz]

Hi guys! Any idea how to hot fix it with styled components?

[Victor-Varghese]

const StyledSlide = styled(Slide)`
  display: flex;
  width: 110px;
  min-width: 110px;
  min-height: 72px;
  .focusRing___1airF.carousel__slide-focus-ring {
    outline: none !important;
  }
`;

const StyledBackButton = styled(ButtonBack)`
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 24px;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 0px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  outline: none !important;
`;

u can override styles for next/back button and for slide you can overrride using the answer above @HanliTheron

[HarishTeens]

Shouldn't there be a toggle to turn this off?

[mrbinky3000]

@HarishTeens the outline is needed for accessibility compliance. In general, you see that same outline all over the web on form elements when you tab through, unless the author has overridden the outline in their CSS. Defeating the outline will make your carousel not compliant with current accessibility guidelines. A major reason for creating the carousel was to adhere to accessibility guidelines. Therefore, I doubt we'll add an option to turn this off anytime soon, unless guidelines change.

[HarishTeens]

Thats great @mrbinky3000 . But sadly none of the above potential fixes work me :(

[HarishTeens]

Oh my god I am sorry. There was an error with my css file. This fix .focusRing___1airF.carousel__slide-focus-ring { outline: none !important; } worked perfectly

[MARCA-Charlie]

Oh my god I am sorry. There was an error with my css file. This fix .focusRing___1airF.carousel__slide-focus-ring { outline: none !important; } worked perfectly

Simply referencing .carousel__slide-focus-ring will suffice