hide captions for for smaller viewports

[bassjobsen]

should close #18171

[houndci-bot]

Properties should be ordered position, right, bottom, left, z-index, display, padding-top, padding-bottom, color, text-align, text-shadow

[bassjobsen]

possibly also consider to apply sr-only() to hide the caption? But reset it will make the code more complex

Note it seems possible to do:

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $carousel-caption-color;
  text-align: center;
  text-shadow: $carousel-text-shadow;

  .btn {
    text-shadow: none; // No shadow for button elements in carousel-caption
  }

  @include media-breakpoint-down(xs) { 
    @include sr-only();
  }
}

[cvrebert]

/cc @patrickhlauke

[patrickhlauke]

Maybe I'm missing something here, but: if captions convey information, why should they be hidden, ever?

Turning them into screen-reader only text on small screen size will, paradoxically, make the information accessible to screen-reader users while not making it accessible to any other user group. Why? Are non-AT-users not supposed to get the info?

[cvrebert]

There is a general problem with the caption text getting cut off if there's insufficient room for it.
Example from #18140: Compare:

Versus:

(The only difference being the viewport width)
Note how the heading in the caption got cut off in the latter screenshot.

However, this isn't particular to XS screens per se, so I agree that this PR's hiding scheme isn't a great solution.

@mdo Could you give your reasoning for #18171 (comment) ?

[bassjobsen]

@patrickhlauke

non-AT-users not supposed to get the info?

Well non-AT-users can see the images of the carousel. But indeed i agree this make only sense when the information is only addtional to the images.
we shall wait for @mdo :)

[mdo]

My thought there was just how crazy they look with the captions overlaying things. Looking at the screenshots again, it'd be nice if the captions simply moved to the bottom of the images instead.

[iatek]

A workaround I've found is using CSS 3 object-fit:cover (no IE9, edge, etc..) which makes the img behave more like a background image so that it can be scaled properly along with the caption.

http://www.codeply.com/go/EaMgFMhff2

[mdo]

This can be optionally handled with display utilities. Example coming with #21298.