SVG accessibility fixes (#27826)

* 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

diff --git a/build/svgo.yml b/build/svgo.yml
index a12cf421c44acbe7bdcb0762a1831c3379ce4e99..047e6947f0ce9a31f9d4bdf65221eb2459f197ce 100644 (file)
--- a/build/svgo.yml
+++ b/build/svgo.yml
@@ -15,6 +15,10 @@ js2svg:
   indent: 2
 
 plugins:
+  # remove this with IE 11 is no longer supported
+  - addAttributesToSVGElement:
+      attributes:
+        - focusable: false
   - cleanupAttrs: true
   - cleanupEnableBackground: true
   - cleanupIDs: true
@@ -41,8 +45,9 @@ plugins:
   - removeHiddenElems: true
   - removeMetadata: true
   - removeNonInheritableGroupAttrs: true
-  - removeTitle: true
-  - removeUnknownsAndDefaults: true
+  - removeTitle: false
+  - removeUnknownsAndDefaults:
+      keepRoleAttr: true
   - removeUnusedNS: true
   - removeUselessDefs: true
   - removeUselessStrokeAndFill: true

diff --git a/site/_includes/example.html b/site/_includes/example.html
index dd1cc63823bff521e5f27ba127531cf013db5c16..dcd148b02a1fe0ca219c7bc4daa5d8c8873249e6 100644 (file)
--- a/site/_includes/example.html
+++ b/site/_includes/example.html
@@ -34,16 +34,10 @@
         {%- assign image_class = image_class[1] | replace: 'bd-placeholder-img-lg', '' | strip -%}
       {%- endif -%}
 
-      {%- assign image_alt = include.content
-        | replace: '<title>', '<title>✂️'
-        | replace: '</title>', '✂️</title>'
-        | split: '✂️' -%}
-      {%- assign image_alt = image_alt[1] -%}
-
       {%- for content_chunk in modified_content -%}
         {%- if content_chunk contains '<svg class="bd-placeholder-img' -%}
           {%- capture img_placeholder -%}
-            <img src="..." {% if image_class %}class="{{ image_class }}" {% endif %}alt="{{ image_alt }}">
+            <img src="..." {% if image_class %}class="{{ image_class }}" {% endif %}alt="...">
           {%- endcapture -%}
           {{- img_placeholder -}}
         {%- else -%}

diff --git a/site/_includes/icons/bootstrap-stack.svg b/site/_includes/icons/bootstrap-stack.svg
index 2ced27898f8b0df0c584f67dd0f03a59cebb6bc2..6b3535449000ef82021692e8a4f33dc5b3be74b7 100644 (file)
--- a/site/_includes/icons/bootstrap-stack.svg
+++ b/site/_includes/icons/bootstrap-stack.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewBox="0 0 1024 860"><defs><linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#5C24AE"/><stop offset="100%" stop-color="#30135A"/></linearGradient><path id="b" d="M355.967 242.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="a" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter><linearGradient id="f" x1="50%" x2="50%" y1="-17.303%" y2="100%"><stop offset="0%" stop-color="#7331D4"/><stop offset="100%" stop-color="#461B84"/></linearGradient><path id="e" d="M355.967 132.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="d" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#905BDD"/><stop offset="100%" stop-color="#5521A0"/></linearGradient><path id="h" d="M355.967 22.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="g" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter></defs><g fill="none"><g transform="translate(75 23)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="translate(75 23)"><use fill="#000" filter="url(#d)" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/></g><g transform="translate(75 23)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="url(#i)" xlink:href="#h"/></g><path fill="#FFF" d="M558.273 447.667L308.036 279.5l97.982-65.847c42.83-28.784 96.789-31.483 134.245-6.311 26.044 17.502 31.214 46.615 11.444 65.724l1.389.934c38.324-19.932 84.107-18.527 117.396 3.845 44.046 29.6 38.671 68.419-14.561 104.193l-97.658 65.629zM447.112 331.01l49.942-33.562c36.935-24.822 42.31-48.249 15.224-66.451-24.798-16.665-55.49-14.453-85.851 5.95l-59.641 40.081 80.326 53.982zm176.532 35.663c37.63-25.289 42.136-48.832 13.203-68.276-28.932-19.444-64.163-15.614-104.042 11.186l-58.789 39.508 87.92 59.084 61.708-41.502z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewBox="0 0 1024 860" focusable="false" role="img"><title>Bootstrap</title><defs><linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#5C24AE"/><stop offset="100%" stop-color="#30135A"/></linearGradient><path id="b" d="M355.967 242.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="a" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter><linearGradient id="f" x1="50%" x2="50%" y1="-17.303%" y2="100%"><stop offset="0%" stop-color="#7331D4"/><stop offset="100%" stop-color="#461B84"/></linearGradient><path id="e" d="M355.967 132.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="d" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#905BDD"/><stop offset="100%" stop-color="#5521A0"/></linearGradient><path id="h" d="M355.967 22.807l-322 216.395c-44.275 29.754-44.275 78.443 0 108.197l322 216.395c44.275 29.754 116.725 29.754 161 0l322-216.395c44.275-29.754 44.275-78.443 0-108.197l-322-216.395c-44.275-29.754-116.725-29.754-161 0z"/><filter id="g" width="108%" height="112%" x="-4%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="10" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="10"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/></filter></defs><g fill="none"><g transform="translate(75 23)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="url(#c)" xlink:href="#b"/></g><g transform="translate(75 23)"><use fill="#000" filter="url(#d)" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/></g><g transform="translate(75 23)"><use fill="#000" filter="url(#g)" xlink:href="#h"/><use fill="url(#i)" xlink:href="#h"/></g><path fill="#FFF" d="M558.273 447.667L308.036 279.5l97.982-65.847c42.83-28.784 96.789-31.483 134.245-6.311 26.044 17.502 31.214 46.615 11.444 65.724l1.389.934c38.324-19.932 84.107-18.527 117.396 3.845 44.046 29.6 38.671 68.419-14.561 104.193l-97.658 65.629zM447.112 331.01l49.942-33.562c36.935-24.822 42.31-48.249 15.224-66.451-24.798-16.665-55.49-14.453-85.851 5.95l-59.641 40.081 80.326 53.982zm176.532 35.663c37.63-25.289 42.136-48.832 13.203-68.276-28.932-19.444-64.163-15.614-104.042 11.186l-58.789 39.508 87.92 59.084 61.708-41.502z"/></g></svg>
\ No newline at end of file

diff --git a/site/_includes/icons/bootstrap.svg b/site/_includes/icons/bootstrap.svg
index 816028bd8eda1d3ccd998632cf142e06f92c66e7..a60e29f33b3183cd6dfa3b40b690ae778c5c948d 100644 (file)
--- a/site/_includes/icons/bootstrap.svg
+++ b/site/_includes/icons/bootstrap.svg
@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>

diff --git a/site/_includes/icons/download.svg b/site/_includes/icons/download.svg
index aa5f3f1beee845e38e7ba77517dba7730570ba33..d0c1fd2cc32aa6b5f45e64f22de650398f88570e 100644 (file)
--- a/site/_includes/icons/download.svg
+++ b/site/_includes/icons/download.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Download icon</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><title>Download</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>

diff --git a/site/_includes/icons/github.svg b/site/_includes/icons/github.svg
index 5d6ad18040403905f17ce76073884252ae76e158..4fcd9ed37475eb37b973be82c070e695d03cc8c6 100644 (file)
--- a/site/_includes/icons/github.svg
+++ b/site/_includes/icons/github.svg
@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false" role="img"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>

diff --git a/site/_includes/icons/import.svg b/site/_includes/icons/import.svg
index 0a9dbb269689d04c9393ce8d42d8c470223effee..5db5bf8d8209a771f0ef15480f08680b86370709 100644 (file)
--- a/site/_includes/icons/import.svg
+++ b/site/_includes/icons/import.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Import icon</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><title>Import</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>

diff --git a/site/_includes/icons/lightning.svg b/site/_includes/icons/lightning.svg
index be6f475ef40ab3f3d75eed740e6f4a940ff9a595..bfc14b0e6abac91a3c99b2bf291fd706cc4a4aba 100644 (file)
--- a/site/_includes/icons/lightning.svg
+++ b/site/_includes/icons/lightning.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round"><title>Lightning icon</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-width="2"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><title>Lightning</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>

diff --git a/site/_includes/icons/menu.svg b/site/_includes/icons/menu.svg
index 03e15dc49225ff2ce3f29dc4b72c409d504a59e1..779870a54128045209453899b9fd2262cd6516f0 100644 (file)
--- a/site/_includes/icons/menu.svg
+++ b/site/_includes/icons/menu.svg
@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false" role="img"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>

diff --git a/site/_includes/icons/placeholder.svg b/site/_includes/icons/placeholder.svg
index 159c2a335c222f4632889b772d4e55cb5dce0aae..415d55c47958eba1a35a3bcf70f1833cfdf79b2e 100644 (file)
--- a/site/_includes/icons/placeholder.svg
+++ b/site/_includes/icons/placeholder.svg
@@ -11,7 +11,7 @@
     height: default: 180px
 {%- endcomment -%}
 
-{%- assign title = include.title | default: 'Generic Placeholder Image' -%}
+{%- assign title = include.title | default: 'Placeholder' -%}
 {%- assign class = include.class | default: '' -%}
 {%- assign color = include.color | default: site.data.grays[2].hex -%}
 {%- assign background = include.background | default: site.data.grays[5].hex -%}
@@ -25,7 +25,7 @@
 {%- endif -%}
 
 {%- capture svg -%}
-<svg class="bd-placeholder-img{% if class != '' %} {{ class }}{% endif %}" width="{{ width }}" height="{{ height }}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
+<svg class="bd-placeholder-img{% if class != '' %} {{ class }}{% endif %}" width="{{ width }}" height="{{ height }}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" {% if title != ' ' or text != ' ' %}aria-label="{% if title != ' ' %}{{ title }}{% if text != ' ' %}: {% endif %}{% endif %}{% if text != ' ' %}{{ text }}{% endif %}"{% endif %}>
   {% if title != ' ' %}<title>{{ title }}</title>{% endif %}
   <rect fill="{{ background }}" width="100%" height="100%"/>
   {% if text != ' ' %}<text fill="{{ color }}" dy=".3em" x="50%" y="50%">{{ text }}</text>{% endif %}

diff --git a/site/_includes/icons/slack.svg b/site/_includes/icons/slack.svg
index 3927fa458b1542c17724d75c368844dba7c638d5..93a4a29432f97e63b406312d39591206008349d6 100644 (file)
--- a/site/_includes/icons/slack.svg
+++ b/site/_includes/icons/slack.svg
@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>

diff --git a/site/_includes/icons/twitter.svg b/site/_includes/icons/twitter.svg
index 450c393b92ff4d1be91b37cb5a37ef5d30b03119..9b978a87841520e22f3543247f2d120e29dbb430 100644 (file)
--- a/site/_includes/icons/twitter.svg
+++ b/site/_includes/icons/twitter.svg
@@ -1 +1 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false" role="img"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>

diff --git a/site/docs/4.1/assets/brand/bootstrap-outline.svg b/site/docs/4.1/assets/brand/bootstrap-outline.svg
index f331db63f30588b46303c5d6f3410ac089734ef0..6e136ca87b03772efce04cd7aca3082b43197ccb 100644 (file)
--- a/site/docs/4.1/assets/brand/bootstrap-outline.svg
+++ b/site/docs/4.1/assets/brand/bootstrap-outline.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 180 612 612">
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 180 612 612" focusable="false" role="img">
+  <title>Bootstrap</title>
   <path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
   <path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
 </svg>

diff --git a/site/docs/4.1/assets/brand/bootstrap-punchout.svg b/site/docs/4.1/assets/brand/bootstrap-punchout.svg
index 8538ee95c8ca4c8209c42711ffe68e9b6f05df35..81c20b0d8f0207a4e9e790dfe89b0fd6782992c9 100644 (file)
--- a/site/docs/4.1/assets/brand/bootstrap-punchout.svg
+++ b/site/docs/4.1/assets/brand/bootstrap-punchout.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 180 612 612">
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" viewBox="0 180 612 612" focusable="false" role="img">
+  <title>Bootstrap</title>
   <path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
   <path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
 </svg>

diff --git a/site/docs/4.1/assets/brand/bootstrap-solid.svg b/site/docs/4.1/assets/brand/bootstrap-solid.svg
index 5d860a70e493854e1531eb9e387c4d609f144330..4eed29bb728a9fc6fdb0f882e097d8800f56ef55 100644 (file)
--- a/site/docs/4.1/assets/brand/bootstrap-solid.svg
+++ b/site/docs/4.1/assets/brand/bootstrap-solid.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" focusable="false" role="img">
+  <title>Bootstrap</title>
   <path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
   <path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
 </svg>

diff --git a/site/docs/4.1/components/card.md b/site/docs/4.1/components/card.md
index 5691ea84ab5ca7d2c49938ece310cbcbc8d383ea..221c9da54a9ff2d6e1798b0523eb44a042a108e0 100644 (file)
--- a/site/docs/4.1/components/card.md
+++ b/site/docs/4.1/components/card.md
@@ -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">

diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md
index bf8f5c250f9fa9eef888193b8dc20eb1f3a783a0..a0ff8c34f98da62e5f2182a574c16a1392a8699e 100644 (file)
--- a/site/docs/4.1/components/carousel.md
+++ b/site/docs/4.1/components/carousel.md
@@ -32,13 +32,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
+        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
     </div>
   </div>
 </div>
@@ -53,13 +53,13 @@ Adding in the previous and next controls:
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
@@ -87,13 +87,13 @@ You can also add the indicators to the carousel, alongside the controls, too.
   </ol>
   <div class="carousel-inner">
     <div class="carousel-item active">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
@@ -121,21 +121,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
     </ol>
     <div class="carousel-inner">
       <div class="carousel-item active">
-        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
+        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
         <div class="carousel-caption d-none d-md-block">
           <h5>First slide label</h5>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
       </div>
       <div class="carousel-item">
-        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
+        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
         <div class="carousel-caption d-none d-md-block">
           <h5>Second slide label</h5>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
       </div>
       <div class="carousel-item">
-        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
+        {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
         <div class="carousel-caption d-none d-md-block">
           <h5>Third slide label</h5>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -171,13 +171,13 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
 <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
@@ -200,13 +200,13 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
 <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active" data-interval="10000">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
     </div>
     <div class="carousel-item" data-interval="2000">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
     </div>
     <div class="carousel-item">
-      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
+      {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">

diff --git a/site/docs/4.1/components/media-object.md b/site/docs/4.1/components/media-object.md
index eb22911faf2d0b0438eeea3004f475a05c9771ea..32628e723f05457daf70dfa9f380af47b4b23886 100644 (file)
--- a/site/docs/4.1/components/media-object.md
+++ b/site/docs/4.1/components/media-object.md
@@ -14,7 +14,7 @@ Below is an example of a single media object. Only two classes are required—th
 
 {% capture example %}
 <div class="media">
-  {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
+  {% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
   <div class="media-body">
     <h5 class="mt-0">Media heading</h5>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
@@ -38,14 +38,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
 
 {% capture example %}
 <div class="media">
-  {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
+  {% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
   <div class="media-body">
     <h5 class="mt-0">Media heading</h5>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
 
     <div class="media mt-3">
       <a class="mr-3" href="#">
-        {% include icons/placeholder.svg width="64" height="64" title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="64" height="64" %}
       </a>
       <div class="media-body">
         <h5 class="mt-0">Media heading</h5>
@@ -63,7 +63,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% capture example %}
 <div class="media">
-  {% include icons/placeholder.svg width="64" height="64" class="align-self-start mr-3" title="Generic placeholder image" %}
+  {% include icons/placeholder.svg width="64" height="64" class="align-self-start mr-3" %}
   <div class="media-body">
     <h5 class="mt-0">Top-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -75,7 +75,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% capture example %}
 <div class="media">
-  {% include icons/placeholder.svg width="64" height="64" class="align-self-center mr-3" title="Generic placeholder image" %}
+  {% include icons/placeholder.svg width="64" height="64" class="align-self-center mr-3" %}
   <div class="media-body">
     <h5 class="mt-0">Center-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -87,7 +87,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
 
 {% capture example %}
 <div class="media">
-  {% include icons/placeholder.svg width="64" height="64" class="align-self-end mr-3" title="Generic placeholder image" %}
+  {% include icons/placeholder.svg width="64" height="64" class="align-self-end mr-3" %}
   <div class="media-body">
     <h5 class="mt-0">Bottom-aligned media</h5>
     <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
@@ -107,7 +107,7 @@ Change the order of content in media objects by modifying the HTML itself, or by
     <h5 class="mt-0 mb-1">Media object</h5>
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
   </div>
-  {% include icons/placeholder.svg width="64" height="64" class="ml-3" title="Generic placeholder image" %}
+  {% include icons/placeholder.svg width="64" height="64" class="ml-3" %}
 </div>
 {% endcapture %}
 {% include example.html content=example %}
@@ -119,21 +119,21 @@ Because the media object has so few structural requirements, you can also use th
 {% capture example %}
 <ul class="list-unstyled">
   <li class="media">
-    {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
+    {% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
     <div class="media-body">
       <h5 class="mt-0 mb-1">List-based media object</h5>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     </div>
   </li>
   <li class="media my-4">
-    {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
+    {% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
     <div class="media-body">
       <h5 class="mt-0 mb-1">List-based media object</h5>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
     </div>
   </li>
   <li class="media">
-    {% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
+    {% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
     <div class="media-body">
       <h5 class="mt-0 mb-1">List-based media object</h5>
       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

diff --git a/site/docs/4.1/content/figures.md b/site/docs/4.1/content/figures.md
index a574a7693b41a6ab5261d27a75d82795999190cd..a647fc1d0b4f456ffa7ecd0ca55fb37fa8f8a130 100644 (file)
--- a/site/docs/4.1/content/figures.md
+++ b/site/docs/4.1/content/figures.md
@@ -11,7 +11,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov
 
 {% capture example %}
 <figure class="figure">
-  {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" title="A generic square placeholder image with rounded corners in a figure." %}
+  {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %}
   <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
 {% endcapture %}
@@ -21,7 +21,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
 
 {% capture example %}
 <figure class="figure">
-  {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" title="A generic square placeholder image with rounded corners in a figure." %}
+  {% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" %}
   <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
 </figure>
 {% endcapture %}

diff --git a/site/docs/4.1/content/images.md b/site/docs/4.1/content/images.md
index b86f4f5f3478c6b6fa53ee7b7a3c40d2b21c23b1..3ff822bed5219b77da32e165dacfbebdf9fb6629 100644 (file)
--- a/site/docs/4.1/content/images.md
+++ b/site/docs/4.1/content/images.md
@@ -11,7 +11,7 @@ toc: true
 Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
 
 <div class="bd-example">
-  {% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" title="Generic responsive image" %}
+  {% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" %}
 </div>
 
 {% highlight html %}
@@ -42,8 +42,8 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc
 Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
 
 <div class="bd-example bd-example-images">
-  {% include icons/placeholder.svg width="200" height="200" class="rounded float-left" title="A generic square placeholder image with rounded corners" %}
-  {% include icons/placeholder.svg width="200" height="200" class="rounded float-right" title="A generic square placeholder image with rounded corners" %}
+  {% include icons/placeholder.svg width="200" height="200" class="rounded float-left" %}
+  {% include icons/placeholder.svg width="200" height="200" class="rounded float-right" %}
 </div>
 
 {% highlight html %}
@@ -52,7 +52,7 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  {% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" title="A generic square placeholder image with rounded corners" %}
+  {% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" %}
 </div>
 
 {% highlight html %}
@@ -61,7 +61,7 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
 
 <div class="bd-example bd-example-images">
   <div class="text-center">
-    {% include icons/placeholder.svg width="200" height="200" class="rounded" title="A generic square placeholder image with rounded corners" %}
+    {% include icons/placeholder.svg width="200" height="200" class="rounded" %}
   </div>
 </div>
 

diff --git a/site/docs/4.1/examples/album/index.html b/site/docs/4.1/examples/album/index.html
index 1e41de0f237629fc0ecb01b94f1e85ae60f48a31..2f143e26d4b01d77ab198e2ee9909573d33ca775 100644 (file)
--- a/site/docs/4.1/examples/album/index.html
+++ b/site/docs/4.1/examples/album/index.html
@@ -26,7 +26,7 @@ extra_css: "album.css"
   <div class="navbar navbar-dark bg-dark shadow-sm">
     <div class="container d-flex justify-content-between">
       <a href="#" class="navbar-brand d-flex align-items-center">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2" focusable="false" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
         <strong>Album</strong>
       </a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/site/docs/4.1/examples/blog/index.html b/site/docs/4.1/examples/blog/index.html
index 8c8417aca9d394b7cbf1b0ba920cd8ec27363cbf..c2e1395acb2f0415e4b58ad918207908effee427 100644 (file)
--- a/site/docs/4.1/examples/blog/index.html
+++ b/site/docs/4.1/examples/blog/index.html
@@ -17,7 +17,7 @@ extra_css:
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center">
         <a class="text-muted" href="#">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3" focusable="false" role="img"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
         </a>
         <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
       </div>
@@ -61,7 +61,7 @@ extra_css:
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#">Continue reading</a>
         </div>
-        {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" class="card-img-right flex-auto d-none d-lg-block" text="Thumbnail" title="Card image cap" %}
+        {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" class="card-img-right flex-auto d-none d-lg-block" text="Thumbnail" %}
       </div>
     </div>
     <div class="col-md-6">
@@ -75,7 +75,7 @@ extra_css:
           <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
           <a href="#">Continue reading</a>
         </div>
-        {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" class="card-img-right flex-auto d-none d-lg-block" text="Thumbnail" title="Card image cap" %}
+        {% include icons/placeholder.svg width="200" height="250" background="#55595c" color="#eceeef" class="card-img-right flex-auto d-none d-lg-block" text="Thumbnail" %}
       </div>
     </div>
   </div>

diff --git a/site/docs/4.1/examples/carousel/index.html b/site/docs/4.1/examples/carousel/index.html
index 3c0379b2a7b552408254bb7edd6d96176402cd81..2cbf929ac19230033ae0636cb0d0dd4561032b31 100644 (file)
--- a/site/docs/4.1/examples/carousel/index.html
+++ b/site/docs/4.1/examples/carousel/index.html
@@ -90,19 +90,19 @@ extra_css: "carousel.css"
     <!-- Three columns of text below the carousel -->
     <div class="row">
       <div class="col-lg-4">
-        {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" text=" " title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" %}
         <h2>Heading</h2>
         <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
         <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" text=" " title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" %}
         <h2>Heading</h2>
         <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
         <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
-        {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" text=" " title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="140" height="140" background="#777" color="#777" class="rounded-circle" %}
         <h2>Heading</h2>
         <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
         <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
@@ -120,7 +120,7 @@ extra_css: "carousel.css"
         <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
       </div>
       <div class="col-md-5">
-        {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" %}
       </div>
     </div>
 
@@ -132,7 +132,7 @@ extra_css: "carousel.css"
         <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
       </div>
       <div class="col-md-5 order-md-1">
-        {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" %}
       </div>
     </div>
 
@@ -144,7 +144,7 @@ extra_css: "carousel.css"
         <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
       </div>
       <div class="col-md-5">
-        {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" title="Generic placeholder image" %}
+        {% include icons/placeholder.svg width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" %}
       </div>
     </div>
 

diff --git a/site/docs/4.1/examples/product/index.html b/site/docs/4.1/examples/product/index.html
index 3b4e17873647372a7f1d69e8519648acc70ab2eb..1961304f117c33d34cefa56c1299d3370389ae15 100644 (file)
--- a/site/docs/4.1/examples/product/index.html
+++ b/site/docs/4.1/examples/product/index.html
@@ -7,7 +7,7 @@ extra_css: "product.css"
 <nav class="site-header sticky-top py-1">
   <div class="container d-flex flex-column flex-md-row justify-content-between">
     <a class="py-2" href="#">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto" focusable="false" role="img"><title>Product</title><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
     </a>
     <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
     <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
@@ -100,7 +100,7 @@ extra_css: "product.css"
 <footer class="container py-5">
   <div class="row">
     <div class="col-12 col-md">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2" focusable="false" role="img"><title>Product</title><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
       <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
     </div>
     <div class="col-6 col-md">

diff --git a/site/docs/4.1/utilities/sizing.md b/site/docs/4.1/utilities/sizing.md
index d95b13516d699f19d55881d72a57d8be2185f66c..1b0acf07ac51c21723e624707d664181b3d59a65 100644 (file)
--- a/site/docs/4.1/utilities/sizing.md
+++ b/site/docs/4.1/utilities/sizing.md
@@ -33,7 +33,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
 You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 
 {% capture example %}
-{% include icons/placeholder.svg width="100%" height="100" class="mw-100" text="Max-width 100%" title="Max-width 100%" %}
+{% include icons/placeholder.svg width="100%" height="100" class="mw-100" text="Max-width 100%" %}
 {% endcapture %}
 {% include example.html content=example %}