diff --git a/content/patterns/writing/snippets.md b/content/patterns/writing/snippets.md
index 38a212b..ae26379 100644
--- a/content/patterns/writing/snippets.md
+++ b/content/patterns/writing/snippets.md
@@ -13,3 +13,7 @@ The example `visually-hidden.md` snippet describes the CSS needed to create cont
{{% note %}}
To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does.
{{% /note %}}
+
+## Visually hidden snippet
+
+{{% snippet file="visually-hidden.md" %}}
diff --git a/docs/patterns/writing/snippets/index.html b/docs/patterns/writing/snippets/index.html
index 9e5ba1b..2a9a8d8 100644
--- a/docs/patterns/writing/snippets/index.html
+++ b/docs/patterns/writing/snippets/index.html
@@ -403,7 +403,9 @@
-
A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
+
+
+A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
The example visually-hidden.md
snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The snippet
shortcode lets you do exactly that:
@@ -423,6 +425,29 @@
+Visually hidden snippet
+
+
+
+
+
+
+The visually-hidden
utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:
+
+.visually-hidden {
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ padding:0 !important;
+ border:0 !important;
+ height: 1px !important;
+ width: 1px !important;
+ overflow: hidden !important;
+}
+
+
+Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users.
+
+
diff --git a/docs/print-version/index.html b/docs/print-version/index.html
index 5fa3767..725fc1e 100644
--- a/docs/print-version/index.html
+++ b/docs/print-version/index.html
@@ -1505,7 +1505,9 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Snippets
- A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
+
+
+A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.
The example visually-hidden.md
snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The snippet
shortcode lets you do exactly that:
@@ -1525,6 +1527,29 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
+Visually hidden snippet
+
+
+
+
+
+
+The visually-hidden
utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:
+
+.visually-hidden {
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ padding:0 !important;
+ border:0 !important;
+ height: 1px !important;
+ width: 1px !important;
+ overflow: hidden !important;
+}
+
+
+Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users.
+
+
diff --git a/docs/service-worker.js b/docs/service-worker.js
index 0231043..131c238 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
/* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
'use strict';
-var precacheConfig = [["404.html","e2d33a29b433413771556aa05e073b33"],["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","dd0691f0f2b78ded7332ccc5df6b6e71"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-512x512.png","42d6b28cc7eb41810a5392c81368340a"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-chrome-android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-firefox-android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-ie.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-safari-ios.svg","f729e629ec998ec40d313495d7257741"],["images/browser-safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","50293a256b796b9a737f1969d511a98e"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","91306e97ed6931c7938c1b42d933939b"],["index.xml","b8a15d8043cbf39f285ef2cc8e526241"],["js/dom-scripts.js","1d87ba44d730c37fae139d4ac47b118a"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","47399fd703e572a010a718a351c37b03"],["patterns/coding/code-blocks/index.html","f4814cc277fffab7c35655ea04b1c052"],["patterns/coding/color-palettes/index.html","cc56cd6d80393508172475a68cb5af62"],["patterns/coding/command-line/index.html","7e2ebf2737baf985fba7abb7c20e00aa"],["patterns/coding/demo-embedding/index.html","5c3cb8175501f636e223818483b24f6f"],["patterns/coding/file-trees/index.html","9656a4b4c4c2b2d703f9373e33d4398c"],["patterns/coding/index.html","d419b4cc31f70a3c1308ce3bc9fabb83"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","c8e6b8993157f7171fca0daaab42d405"],["patterns/coding/writing-inline-demos/index.html","de903ac3dfe2b5d51426a77b6d640ad2"],["patterns/help/index.html","9598c24c2dbc9efe7bd4fbd7b557f75d"],["patterns/index.html","c731999592e957794a4ad9c913d2729f"],["patterns/index.xml","0e49402f089456241cec01def9588ef2"],["patterns/installation/index.html","5df065c86c6f9b114d5996b7ad6eab56"],["patterns/media/including-images/index.html","200d0c9713d72869ac16b132b1259178"],["patterns/media/including-videos/index.html","1143b865c1b11d96d63ab5c8cf3c264b"],["patterns/media/index.html","fcf0f2ff7dee14916855f3e60544bed0"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","97a3380c1a14ed47aabc592e2062d1ee"],["patterns/serving/index.html","34db32ccfe9ee015202793f48678a196"],["patterns/setup/index.html","f4b3cb7076a50498bda4ed8aa8b3683f"],["patterns/updating/index.html","de575c35bec6062d7278058f68630d45"],["patterns/writing/expandable-sections/index.html","c3874bb55a1d582b4f982a30f2cba712"],["patterns/writing/index.html","b13d60875195f8839c8a11c38dcaa2cd"],["patterns/writing/index.xml","53aea727e5ea1133e83cd6a859115e7e"],["patterns/writing/markdown-and-metadata/index.html","2c826f16a0f93e80662c952e68b87110"],["patterns/writing/notes-and-warnings/index.html","04e7854f87358421c487f19a074e7e30"],["patterns/writing/project-structure/index.html","ff26146c1f81c8a4df95439e53a242ec"],["patterns/writing/references/index.html","1f4f49ee3d79cb01bbd76947c1cbfb65"],["patterns/writing/snippets/index.html","26b5416d92a787db668bafa219e881ba"],["patterns/writing/tables-of-contents/index.html","bdbaa5c93004c4cbf900c97c620c9873"],["print-version/index.html","722b26ba01fe34195ffe9789b8264d98"],["sitemap.xml","7eb61596c5317562661d44c90fba8374"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","ed81e7c9e709471a000948900d263d4e"],["tags/markdown/index.xml","5387a8d0317e6b6641e0803ac2f5af3c"],["tags/metadata/index.html","1d9d753f35461c59bad8b6f4472f42a9"],["tags/metadata/index.xml","098f151053be1a17654318a88433154b"]];
+var precacheConfig = [["404.html","e2d33a29b433413771556aa05e073b33"],["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","dd0691f0f2b78ded7332ccc5df6b6e71"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-512x512.png","42d6b28cc7eb41810a5392c81368340a"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-chrome-android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-firefox-android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-ie.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-safari-ios.svg","f729e629ec998ec40d313495d7257741"],["images/browser-safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","50293a256b796b9a737f1969d511a98e"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","91306e97ed6931c7938c1b42d933939b"],["index.xml","b8a15d8043cbf39f285ef2cc8e526241"],["js/dom-scripts.js","1d87ba44d730c37fae139d4ac47b118a"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","47399fd703e572a010a718a351c37b03"],["patterns/coding/code-blocks/index.html","f4814cc277fffab7c35655ea04b1c052"],["patterns/coding/color-palettes/index.html","cc56cd6d80393508172475a68cb5af62"],["patterns/coding/command-line/index.html","7e2ebf2737baf985fba7abb7c20e00aa"],["patterns/coding/demo-embedding/index.html","5c3cb8175501f636e223818483b24f6f"],["patterns/coding/file-trees/index.html","9656a4b4c4c2b2d703f9373e33d4398c"],["patterns/coding/index.html","d419b4cc31f70a3c1308ce3bc9fabb83"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","c8e6b8993157f7171fca0daaab42d405"],["patterns/coding/writing-inline-demos/index.html","de903ac3dfe2b5d51426a77b6d640ad2"],["patterns/help/index.html","9598c24c2dbc9efe7bd4fbd7b557f75d"],["patterns/index.html","c731999592e957794a4ad9c913d2729f"],["patterns/index.xml","0e49402f089456241cec01def9588ef2"],["patterns/installation/index.html","5df065c86c6f9b114d5996b7ad6eab56"],["patterns/media/including-images/index.html","200d0c9713d72869ac16b132b1259178"],["patterns/media/including-videos/index.html","1143b865c1b11d96d63ab5c8cf3c264b"],["patterns/media/index.html","fcf0f2ff7dee14916855f3e60544bed0"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","97a3380c1a14ed47aabc592e2062d1ee"],["patterns/serving/index.html","34db32ccfe9ee015202793f48678a196"],["patterns/setup/index.html","f4b3cb7076a50498bda4ed8aa8b3683f"],["patterns/updating/index.html","de575c35bec6062d7278058f68630d45"],["patterns/writing/expandable-sections/index.html","c3874bb55a1d582b4f982a30f2cba712"],["patterns/writing/index.html","b13d60875195f8839c8a11c38dcaa2cd"],["patterns/writing/index.xml","53aea727e5ea1133e83cd6a859115e7e"],["patterns/writing/markdown-and-metadata/index.html","2c826f16a0f93e80662c952e68b87110"],["patterns/writing/notes-and-warnings/index.html","04e7854f87358421c487f19a074e7e30"],["patterns/writing/project-structure/index.html","ff26146c1f81c8a4df95439e53a242ec"],["patterns/writing/references/index.html","1f4f49ee3d79cb01bbd76947c1cbfb65"],["patterns/writing/snippets/index.html","e6cdaf173cdb061b278d71ca35672fdf"],["patterns/writing/tables-of-contents/index.html","bdbaa5c93004c4cbf900c97c620c9873"],["print-version/index.html","e3db9847d5bf8b089e09bc88d53b2b68"],["sitemap.xml","7eb61596c5317562661d44c90fba8374"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","ed81e7c9e709471a000948900d263d4e"],["tags/markdown/index.xml","5387a8d0317e6b6641e0803ac2f5af3c"],["tags/metadata/index.html","1d9d753f35461c59bad8b6f4472f42a9"],["tags/metadata/index.xml","098f151053be1a17654318a88433154b"]];
var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');