Merge pull request #19255 from patrickhlauke/color-accessibility-callout-include

Docs: add/unify advice on contextual colors and accessibility

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 %}

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.

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
 

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.

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.

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.

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
 

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>