mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

SVG accessibility fixes (#27826)

Browse Source 
* SVG accessibility fixes

- add `focusable="false"` to all SVGs, to stop IE from including the `<svg>` in its default focus cycle
- completely hide decorative SVGs using `aria-hidden="true"`
- add `role="img"` to meaningful/"content" SVGs, ensure they have an appropriate `<title>` and/or `aria-label`
- simplify placeholder default title

* Simplify usage of placeholder.svg in the docs

- in most cases, no need for separate/redundant text and title (now that we make text itself part of the alternative text explicitly)
- no need (expect in rare cirumstances) to describe the placeholder image (unless the look of the image is important/the actual content, as is the case with the image thumbnail class)

* Simplify example.html rewriting of <svg> to <img> code sample

- as the `alt` for the placeholder isn't really important, just add an ellipsis instead (otherwise, to be correct, we'd have to construct the whole "title+text" construct like we do now in the
placeholder.svg itself

* Change svgo configuration to retain role attribute and add/force focusable=false

- regarding `focusable=false`, see https://github.com/svg/svgo/issues/1011 (which would be the "proper" SVGO fix) and the (hacky) solution https://github.com/svg/svgo/pull/817
This commit is contained in:
Patrick H. Lauke
2018-12-13 13:09:47 +00:00
committed by GitHub
parent 375d137561
commit c031584bcd
25 changed files with 94 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/docs/4.1/components/card.md
+21 -21
View File
@@ -18,7 +18,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
{% capture example %}
<div class="card" style="width: 18rem;">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -70,7 +70,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
{% capture example %}
<div class="card" style="width: 18rem;">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
@@ -113,7 +113,7 @@ Mix and match multiple content types to create the card you need, or throw every
{% capture example %}
<div class="card" style="width: 18rem;">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -358,7 +358,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
{% capture example %}
<div class="card mb-3">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -371,7 +371,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
{% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
</div>
{% endcapture %}
{% include example.html content=example %}
@@ -382,7 +382,7 @@ Turn an image into a card background and overlay your card's text. Depending on
{% capture example %}
<div class="card bg-dark text-white">
{% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" title="Card image" %}
{% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" %}
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -462,7 +462,7 @@ Use card groups to render cards as a single, attached element with equal width a
{% capture example %}
<div class="card-group">
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -470,7 +470,7 @@ Use card groups to render cards as a single, attached element with equal width a
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -478,7 +478,7 @@ Use card groups to render cards as a single, attached element with equal width a
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -494,7 +494,7 @@ When using card groups with footers, their content will automatically line up.
{% capture example %}
<div class="card-group">
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -504,7 +504,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -514,7 +514,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -534,7 +534,7 @@ Need a set of equal width and height cards that aren't attached to one another?
{% capture example %}
<div class="card-deck">
<div class="card">
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -542,7 +542,7 @@ Need a set of equal width and height cards that aren't attached to one another?
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -550,7 +550,7 @@ Need a set of equal width and height cards that aren't attached to one another?
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -566,7 +566,7 @@ Just like with card groups, card footers in decks will automatically line up.
{% capture example %}
<div class="card-deck">
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -576,7 +576,7 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -586,7 +586,7 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -608,7 +608,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
{% capture example %}
<div class="card-columns">
<div class="card">
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -625,7 +625,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</blockquote>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -650,7 +650,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div>
</div>
<div class="card">
{% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" title="Card image" %}
{% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" %}
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">