CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3outline
RoboYak
RoboYak

Reputation: 1482

Adding focus and override on CSS outline causes outline to disappear

I have a Bootstrap modal that contains a Bootstrap Carousel. I need the slide that is active in the Carousel to have focus. I am attempting to override the outline style to make the focus more visible (especially in Edge). I can focus successfully (the codepen will only do this on first slide for demo purposes), and if I DO NOT override the outline there can be seen the default browser outline on the image. However when I try to override the outline, it disappears entirely.

Codepen: https://codepen.io/VVarPiglet/pen/QqegMd

HTML

  <div class="main">
<div class="button">
  <button class="modal-pop">Open Modal</button>
</div>
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true" data-hidden-by="user">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true" class="close-symbol">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="my-carousel" class="carousel slide" data-interval="false" data-wrap="false">
                    <div class="carousel-inner">
                      <div class="item card active" tabindex="1">
                        <img class="card-image" src="https://www.w3schools.com/css/img_fjords.jpg"/>
                      </div>
                      <div class="item card" tabindex="1">
                        <img class="card-image" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"/>
                      </div>
                    </div>
                    <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous Label</span>
                    </a>
                    <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next Label</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

  .main{
    width: 100%;
   }
  .button{
    margin: 20px auto;
    text-align: center;
   }

  #my-modal{
    width 500px;
  }

  .card-image{
    width: 100%
  }

  .modal-body{
    padding: 0;
  }

  /** comment the below out to see the outline that automatically takes place. It is a little hard to see, but it is a 1px solid blue outline */
  .carousel-inner .item.active:focus
  {
     outline: #00bfff solid 5px;
  }

Steps to reproduce:

  1. Navigate to codepen.
  2. Press the button to open modal.
  3. Notice that there is no outline to describe focus.
  4. Open CSS editor.
  5. Scroll down to the end and delete or comment out outline override.
  6. Save.
  7. Press button to open modal.
  8. Notice that the image has outline to describe focus.

How can I successfully override the outline?

Upvotes: 0

Views: 2772

Answers (2)

RoboYak
RoboYak

Reputation: 1482

I was able to fix this after coming across this other stack post. This was extremely hard to search for! styling the outline border with outer overflow set to hidden

The solution that I chose was a combination of two suggestions on that page:

.carousel-inner .item.active:focus
{
    outline: 2px solid #00bfff;
    outline-offset: -2px;
}

/* FIX FOR EDGE: When Edge impliments outline-offset will want to delete 
this block. But until then this is the best method
to allow a noticeable outline for accessibility
*/
.carousel-inner .item.active:focus::after
{
    content: "";
    height: 99.19%;
    outline: 2px solid #00bfff;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 99.19%;
    z-index: 99999;
}

I updated the codepen as well with this solution: https://codepen.io/VVarPiglet/pen/QqegMd

Upvotes: 1

Laura
Laura

Reputation: 278

From what I can see, I'm not sure you need the :focus if you are targeting the .active item. Also the overflow: hidden is indeed hiding the outline.

Try this instead: 

.carousel-inner .item.active {
  border: #00bfff solid 5px;
}

Upvotes: 1

Related Questions