Docs: tweak icon link and callouts (#37923)

* Tweak callout for icon link

- no need to talk about `alt` for `<img>` since these don't use `<img>`
- make start of sentence more readable

* Tweak language of dropdown warning callout

* Tweak popover warning callout

* Tweak rtl warning callouts

* Tweak color warning callout

* Add/move accessibility callout for color to relevant pages

* Update site/content/docs/5.3/helpers/icon-link.md

* Update site/layouts/partials/callouts/warning-color-assistive-technologies.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>

site/content/docs/5.3/helpers/color-background.md

@@ -23,6 +23,10 @@ Color and background helpers combine the power of our [`.text-*` utilities]({{<
 {{< /text-bg.inline >}}
 {{< /example >}}
 
+{{< callout info >}}
+{{< partial "callouts/warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## With components
 
 Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}):

site/content/docs/5.3/helpers/icon-link.md

@@ -13,7 +13,7 @@ The icon link helper component modifies our default link styles to enhance their
 Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like.
 
 {{< callout >}}
-Icons used here are likely to be purely decorative, which means they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that are more than decorative, provide an appropriate text alternative via `alt` for `<img>` elements `role="img"` and `aria-label` for SVGs.
+When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs.
 {{< /callout >}}
 
 ## Example