- Conveying color meaning to AT as markdown include

- Add/replace callout for color and AT with include

diff --git a/docs/_includes/callout-warning-color-assistive-technologies.md b/docs/_includes/callout-warning-color-assistive-technologies.md
new file mode 100644 (file)
index 0000000..b92a1c3
--- /dev/null
+++ b/docs/_includes/callout-warning-color-assistive-technologies.md
@@ -0,0 +1,5 @@
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
\ No newline at end of file

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index c269c3d8f2c7a3d9d09915c4fa54bac2c5f51613..274061a5eec1019b35ed9832633cb1c0f0f6d3dc 100644 (file)
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -30,6 +30,9 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ### Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.

diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 42841807f3903a1301ebb9ec84759d62ee668213..d5aa453d7aeb5754fb078f630d20295feb981851 100644 (file)
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -39,11 +39,8 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
 <button type="button" class="btn btn-link">Link</button>
 {% endexample %}
 
-{% callout warning %}
-#### Conveying meaning to assistive technologies
-
-Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
 
 ## Button tags
 

diff --git a/docs/components/card.md b/docs/components/card.md
index 53580d667c24788d1919d24ccee72f3d338594f8..b53d2e39ae3ce610068854a45225fd58550764da 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -362,6 +362,9 @@ Cards include their own variant classes for quickly changing the `background-col
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Outline variants
 
 In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.

diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index db339c824d3e3b1a4d7384866c2cc528e0020677..8b3b9cd885611211da2bd37664ac18e72fb2306d 100644 (file)
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -104,6 +104,9 @@ Use contextual classes to style list items, default or linked. Also includes `.a
 </div>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Custom content
 
 Add nearly any HTML within, even for linked list groups like the one below.

diff --git a/docs/components/tag.md b/docs/components/tag.md
index 185ea378de47faa79fdc74f094f7045e8e175706..09608931a2ff985f538c14adc5f7e32eb26226e4 100644 (file)
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -32,6 +32,9 @@ Add any of the below mentioned modifier classes to change the appearance of a ta
 <span class="tag tag-danger">Danger</span>
 {% endexample %}
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 ## Pill tags
 
 Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index b67221119afec4a745a70944b6601b1e2ac1a8c7..7add31309b7a6e0b61cf94bbb370302c25222882 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -160,11 +160,8 @@ Similar to the contextual text color classes, easily set the background of an el
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
 {% endcallout %}
 
-{% callout warning %}
-#### Conveying meaning to assistive technologies
-
-Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
-{% endcallout %}
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
 
 ## Close icon
 

diff --git a/docs/content/tables.md b/docs/content/tables.md
index 80bbbf8549d301bf317e3aae097cfbe1fd338958..01ec2239a943682b3330ce00955e793d3c27d9f7 100644 (file)
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -420,6 +420,9 @@ Use contextual classes to color table rows or individual cells.
   </table>
 </div>
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 {% highlight html %}
 <!-- On rows -->
 <tr class="table-active">...</tr>