From 7c4c36eff5432833b57411276bf67f4235a45d36 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Oct 2020 19:24:22 -0700 Subject: Rewrite docs note --- docs/content/_index.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/content/_index.md b/docs/content/_index.md index b7e05fa45..fb0cfc935 100644 --- a/docs/content/_index.md +++ b/docs/content/_index.md @@ -122,9 +122,16 @@ Color can be changed by setting a `.text-*` class or custom CSS: +
+
+{{< md >}} ## Working with SVGs - SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven't included these attributes and workarounds in our code. +{{< /md >}} +
+
+{{< md >}} +Known issues include: - **Focus handling is broken in Internet Explorer and Edge.** When embedding your SVGs, add `focusable="false"` to the `` element. [Learn more on Stack Overflow.](https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element) @@ -132,10 +139,9 @@ SVGs are awesome to work with, but they do have some known quirks to work around - **Safari skips `aria-label` when used non-focusable SVGs.** As such, use `aria-hidden="true"` when embedding the `` file and use CSS to visually hide an equivalent label. [More details here.](https://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-6) -- **SVG external sprites are not working for IE 9-11 and Edge 12.** You can use the [svg4everybody](https://github.com/jonathantneal/svg4everybody) polyfill: -{{< highlight html >}} - - -{{< /highlight >}} +- **External SVG sprites may not function correctly in Internet Explorer 9-11 and Edge 12.** Use the [svg4everybody](https://github.com/jonathantneal/svg4everybody) polyfill as needed. Found another issue with SVGs we should note? Please open an issue to share details. +{{< /md >}} +
+
-- cgit v1.2.3