diff --git a/content/patterns/coding/tested.md b/content/patterns/coding/tested.md index 0243ae8..a2ab621 100644 --- a/content/patterns/coding/tested.md +++ b/content/patterns/coding/tested.md @@ -7,12 +7,12 @@ When you're an inclusive designer, it's pertinent to do some testing. Following **Infusion** provided a `tested` shortcode that let's you show which browsers and assistive technologies you've tried your design out in. Here's an example. Note the commas and "+" signs. {{}} -{{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} +{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} {{}} This outputs: -{{% tested using="Firefox Android + Talkback, Chrome, Safari iOS + Voiceover, Edge" %}} +{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} The value for the `using` attribute follows a specific format: each testing setup is separated by a comma (with a space if you like, but it's not mandatory). If you want to add an assistive technology (or any other "add on") this needs to follow a "+". This additional part can be anything, like "A VR headset I borrowed", but there are only a few browser terms available. These are case sensitive, so you need to write them as below: diff --git a/docs/css/styles.css b/docs/css/styles.css index 00b4fc0..434c1d0 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -304,7 +304,7 @@ caption { .library-desc { font-style: italic; - margin-top: 0.25rem; + margin-top: 0.5rem; margin-left: auto; margin-right: auto; max-width: 30rem; @@ -330,7 +330,7 @@ caption { .patterns { overflow: auto; - margin-top: 1rem; + margin-top: 1.5rem; } .patterns * { @@ -341,12 +341,19 @@ caption { font-size: 1rem; } +.patterns h3 + ul { + margin-top: 0.75rem; +} + .patterns li { line-height: 1.125; - margin-top: 0.75rem; list-style: none; } +.patterns li + li { + margin-top: 0.75rem; +} + .patterns ul ul { margin-left: 0.75rem; } @@ -747,7 +754,7 @@ p:empty { a svg, button svg { height: 0.75em; width: auto; - margin-right: 0.125rem; + margin-right: 0.25em; } h1 svg { @@ -825,6 +832,10 @@ h1 svg { padding: 0.75rem 0; } + .patterns li:not(.pattern) { + margin-top: 0; + } + .patterns ul ul { margin: 0; } @@ -843,6 +854,7 @@ h1 svg { .pattern + .pattern { border-top: 1px solid; + margin-top: 0; } #menu-button { diff --git a/docs/index.xml b/docs/index.xml index 93ca29f..0dfa201 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -199,7 +199,7 @@ npm run serve This will serve your working library from localhost:1313 (the exac https://heydon.github.io/infusion/patterns/coding/tested/ When you’re an inclusive designer, it’s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. Infusion provided a tested shortcode that let’s you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs. -{{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: +{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: diff --git a/docs/patterns/coding/index.xml b/docs/patterns/coding/index.xml index e8db521..084b762 100644 --- a/docs/patterns/coding/index.xml +++ b/docs/patterns/coding/index.xml @@ -85,7 +85,7 @@ The file tree is described using a markdown nested list structure: https://heydon.github.io/infusion/patterns/coding/tested/ When you’re an inclusive designer, it’s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. Infusion provided a tested shortcode that let’s you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs. -{{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: +{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html index 6a2a350..3b545ec 100644 --- a/docs/patterns/coding/tested/index.html +++ b/docs/patterns/coding/tested/index.html @@ -284,7 +284,7 @@

Infusion provided a tested shortcode that let’s you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs.


-{{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}}
+{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
@@ -303,9 +303,9 @@ - - Firefox Android - with Talkback + + Firefox + with JAWS diff --git a/docs/service-worker.js b/docs/service-worker.js index bc02186..75b72a8 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 = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","47a129d8e02aa43ddde1db78819f9aed"],["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-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/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.png","0134d77c2c6b01eabb425990bab7ce9a"],["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/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","a9f0df2446345b37cd18fb383e307795"],["index.xml","121b9bc13bc34f4ff5880b1a0e6d7d6b"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","5cb0c36cd276e93a143f29d1784b94fc"],["patterns/coding/codepen-embedding/index.html","3208c781104212702f53cb337506472c"],["patterns/coding/color-palettes/index.html","5dfd51d787058344bb323e47c88bf18e"],["patterns/coding/command-line/index.html","3fce46ecdc7c9ab4de104386b18725dd"],["patterns/coding/file-trees/index.html","41de7c750622544c933698e372fbe7bc"],["patterns/coding/index.html","3bcc3aead18b042ca14966e598444625"],["patterns/coding/index.xml","f6299fa65e3ce14b1313f218f34d8142"],["patterns/coding/tested/index.html","553404d0c9b66be468dea5a98c3a2e16"],["patterns/coding/writing-inline-demos/index.html","5b2927bf7bf08dee3bc980f299e77f89"],["patterns/index.html","cf9947197a8c0ac41deeed0e3ebdf9bd"],["patterns/index.xml","bc8a085b70e56267a63fbab56f42f000"],["patterns/installation/index.html","4a425ad3a49613ec70a2d088f7bc62b0"],["patterns/library-setup/index.html","0982816f6a8b55d5776d50d4a266050d"],["patterns/media/including-images/index.html","d55996bdd6fd63fc95f302e645f4e3c2"],["patterns/media/including-videos/index.html","7e83fc1f38e5218bac67060d0aa21e82"],["patterns/media/index.html","6450913472378b79e329e0e9b06b85fd"],["patterns/media/index.xml","91130ea74bd16f6d51c959a00c3c6284"],["patterns/serving/index.html","68ee3092201e22dd3b6d57a4eedaeb04"],["patterns/writing/expandable-sections/index.html","801d569498e33fdee12fb4e8d2711316"],["patterns/writing/index.html","fc1b14937f141996b1ac405b066c5bcb"],["patterns/writing/index.xml","a68bf9da0d9106898c1e05942614e90c"],["patterns/writing/library-structure/index.html","5b18dff84f5bcffe4c346370edf83fa0"],["patterns/writing/markdown-and-metadata/index.html","a7cf208fad1b028ea15fa86517715e5f"],["patterns/writing/notes-and-warnings/index.html","d7ec1d32fea2ea8d0418b5433e17f1c9"],["patterns/writing/references/index.html","5b5a5ee98782ac2c3e1c077367dfeb93"],["patterns/writing/tables-of-contents/index.html","795186261c12fc5c24fffebc5d4b246d"],["sitemap.xml","00797c4835aa456be68376ae829f807d"],["tags/index.xml","2da03b20d2bd3a25593dbfe3a0c22b0b"],["tags/library/index.html","8ffd998fd68e63c7e984c6207498c9e6"],["tags/library/index.xml","b6a44a1a0a10135485e4f39d12fd322a"],["tags/structure/index.html","2958b3df35067ec73a316e0c0d403a84"],["tags/structure/index.xml","69b02d1c1393249cac54fc2734c9ef63"],["tags/stuff/index.html","2eb794a1a1161a6978044005dc425f7f"],["tags/stuff/index.xml","c3ade9b0a2f01caee9de105ded22695f"]]; +var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","994f214ab7efecc349c8c14995925998"],["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-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/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.png","0134d77c2c6b01eabb425990bab7ce9a"],["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/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","a9f0df2446345b37cd18fb383e307795"],["index.xml","a3a1af14ac64ada88e8b40ca75af17a3"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","5cb0c36cd276e93a143f29d1784b94fc"],["patterns/coding/codepen-embedding/index.html","3208c781104212702f53cb337506472c"],["patterns/coding/color-palettes/index.html","5dfd51d787058344bb323e47c88bf18e"],["patterns/coding/command-line/index.html","3fce46ecdc7c9ab4de104386b18725dd"],["patterns/coding/file-trees/index.html","41de7c750622544c933698e372fbe7bc"],["patterns/coding/index.html","3bcc3aead18b042ca14966e598444625"],["patterns/coding/index.xml","891070ae33a4f2eb5363c233eb588fb4"],["patterns/coding/tested/index.html","579d3b10530c77b09b5cb512dfcbb1a6"],["patterns/coding/writing-inline-demos/index.html","5b2927bf7bf08dee3bc980f299e77f89"],["patterns/index.html","cf9947197a8c0ac41deeed0e3ebdf9bd"],["patterns/index.xml","bc8a085b70e56267a63fbab56f42f000"],["patterns/installation/index.html","4a425ad3a49613ec70a2d088f7bc62b0"],["patterns/library-setup/index.html","0982816f6a8b55d5776d50d4a266050d"],["patterns/media/including-images/index.html","d55996bdd6fd63fc95f302e645f4e3c2"],["patterns/media/including-videos/index.html","7e83fc1f38e5218bac67060d0aa21e82"],["patterns/media/index.html","6450913472378b79e329e0e9b06b85fd"],["patterns/media/index.xml","91130ea74bd16f6d51c959a00c3c6284"],["patterns/serving/index.html","68ee3092201e22dd3b6d57a4eedaeb04"],["patterns/writing/expandable-sections/index.html","801d569498e33fdee12fb4e8d2711316"],["patterns/writing/index.html","fc1b14937f141996b1ac405b066c5bcb"],["patterns/writing/index.xml","a68bf9da0d9106898c1e05942614e90c"],["patterns/writing/library-structure/index.html","5b18dff84f5bcffe4c346370edf83fa0"],["patterns/writing/markdown-and-metadata/index.html","a7cf208fad1b028ea15fa86517715e5f"],["patterns/writing/notes-and-warnings/index.html","d7ec1d32fea2ea8d0418b5433e17f1c9"],["patterns/writing/references/index.html","5b5a5ee98782ac2c3e1c077367dfeb93"],["patterns/writing/tables-of-contents/index.html","795186261c12fc5c24fffebc5d4b246d"],["sitemap.xml","00797c4835aa456be68376ae829f807d"],["tags/index.xml","2da03b20d2bd3a25593dbfe3a0c22b0b"],["tags/library/index.html","8ffd998fd68e63c7e984c6207498c9e6"],["tags/library/index.xml","b6a44a1a0a10135485e4f39d12fd322a"],["tags/structure/index.html","2958b3df35067ec73a316e0c0d403a84"],["tags/structure/index.xml","69b02d1c1393249cac54fc2734c9ef63"],["tags/stuff/index.html","2eb794a1a1161a6978044005dc425f7f"],["tags/stuff/index.xml","c3ade9b0a2f01caee9de105ded22695f"]]; var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : ''); diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css index 00b4fc0..434c1d0 100644 --- a/themes/infusion/static/css/styles.css +++ b/themes/infusion/static/css/styles.css @@ -304,7 +304,7 @@ caption { .library-desc { font-style: italic; - margin-top: 0.25rem; + margin-top: 0.5rem; margin-left: auto; margin-right: auto; max-width: 30rem; @@ -330,7 +330,7 @@ caption { .patterns { overflow: auto; - margin-top: 1rem; + margin-top: 1.5rem; } .patterns * { @@ -341,12 +341,19 @@ caption { font-size: 1rem; } +.patterns h3 + ul { + margin-top: 0.75rem; +} + .patterns li { line-height: 1.125; - margin-top: 0.75rem; list-style: none; } +.patterns li + li { + margin-top: 0.75rem; +} + .patterns ul ul { margin-left: 0.75rem; } @@ -747,7 +754,7 @@ p:empty { a svg, button svg { height: 0.75em; width: auto; - margin-right: 0.125rem; + margin-right: 0.25em; } h1 svg { @@ -825,6 +832,10 @@ h1 svg { padding: 0.75rem 0; } + .patterns li:not(.pattern) { + margin-top: 0; + } + .patterns ul ul { margin: 0; } @@ -843,6 +854,7 @@ h1 svg { .pattern + .pattern { border-top: 1px solid; + margin-top: 0; } #menu-button {