From fff26a1f3f1696436249a1d27514d372746f016c Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Sat, 8 Jul 2017 12:21:43 +0100 Subject: [PATCH] tested shortcode and docs --- content/patterns/coding/tested.md | 27 ++ content/patterns/writing/references.md | 6 +- docs/css/styles.css | 43 ++- docs/index.html | 7 + docs/index.xml | 11 + docs/patterns/coding/code-blocks/index.html | 7 + .../coding/codepen-embedding/index.html | 7 + .../patterns/coding/color-palettes/index.html | 7 + docs/patterns/coding/index.html | 17 + docs/patterns/coding/index.xml | 11 + docs/patterns/coding/tested/index.html | 318 ++++++++++++++++++ .../coding/writing-inline-demos/index.html | 7 + docs/patterns/index.html | 7 + docs/patterns/installation/index.html | 7 + docs/patterns/library-setup/index.html | 7 + docs/patterns/serving/index.html | 7 + .../writing/expandable-sections/index.html | 7 + .../writing/including-images/index.html | 7 + docs/patterns/writing/index.html | 7 + .../writing/library-structure/index.html | 7 + .../writing/markdown-and-metadata/index.html | 7 + .../writing/notes-and-warnings/index.html | 7 + docs/patterns/writing/references/index.html | 20 ++ docs/sitemap.xml | 4 + .../layouts/shortcodes/principles.html | 4 +- .../infusion/layouts/shortcodes/tested.html | 24 ++ themes/infusion/layouts/shortcodes/wcag.html | 3 +- themes/infusion/static/css/styles.css | 43 ++- 28 files changed, 622 insertions(+), 14 deletions(-) create mode 100644 content/patterns/coding/tested.md create mode 100644 docs/patterns/coding/tested/index.html create mode 100644 themes/infusion/layouts/shortcodes/tested.html diff --git a/content/patterns/coding/tested.md b/content/patterns/coding/tested.md new file mode 100644 index 0000000..ee68522 --- /dev/null +++ b/content/patterns/coding/tested.md @@ -0,0 +1,27 @@ ++++ +title = "Tested using..." ++++ + +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 Android + Talkback, 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: + +* Firefox +* Chrome +* Safari +* IE +* Edge +* Opera +* Chrome Android +* Firefox Android +* Safari iOS diff --git a/content/patterns/writing/references.md b/content/patterns/writing/references.md index c97dd32..5be23bd 100644 --- a/content/patterns/writing/references.md +++ b/content/patterns/writing/references.md @@ -30,6 +30,10 @@ This generates a list of references that includes the names of each criterion an {{% wcag include="2.1.1, 4.1.2" %}} +{{% note %}} +You don't have to leave spaces after the comma separators. They are optional. +{{% /note %}} + ### Full descriptions Sometimes, you'll want to include the full descriptions of the success criteria inline. This is possible by setting `descriptions` to `true`: @@ -52,4 +56,4 @@ Some inclusive design concepts are not reducible to success or fail criteria. Th Here's the output with `descriptions="true"`: -{{% principles include="Add value, Be consistent" descriptions="true" %}} +{{% principles include="Add value,Be consistent" descriptions="true" %}} diff --git a/docs/css/styles.css b/docs/css/styles.css index 94a828e..c8e284c 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -190,20 +190,53 @@ table { th, td { border: 2px solid; padding: 0.5rem; - line-height: 1; + line-height: 1.25; margin: 0; } +th { + font-weight: bold; +} + +th:empty { + border: 0; +} + +/* Tested using... table */ + +.tested { + text-align: center; +} + +.tested td { + vertical-align: top; +} + +.tested th { + background-color: #111; + border-color: #111; + color: #fff; +} + +.tested img { + max-width: 3rem; +} + +.tested span { + display: block; + margin: 0; +} + +.tested .additional { + font-size: 0.85rem; +} + caption { font-size: 1.125rem; padding-bottom: 0.25rem; font-style: italic; } -th:empty { - border: 0; -} - /* Page structure */ .wrapper { diff --git a/docs/index.html b/docs/index.html index 4212546..a6eec44 100644 --- a/docs/index.html +++ b/docs/index.html @@ -207,6 +207,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/index.xml b/docs/index.xml index f7dcb54..270ec37 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -147,5 +147,16 @@ I can reference the {{% pattern "Notes & warnings" %}} patt npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what’s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library’s files, the site will automatically rebuild. + + Tested using... + https://heydon.github.io/infusion/patterns/coding/tested/ + Mon, 01 Jan 0001 00:00:00 +0000 + + 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: + + \ No newline at end of file diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index c52308f..77d1bc2 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/coding/codepen-embedding/index.html b/docs/patterns/coding/codepen-embedding/index.html index 9185a91..4351956 100644 --- a/docs/patterns/coding/codepen-embedding/index.html +++ b/docs/patterns/coding/codepen-embedding/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html index 045fc50..62435f0 100644 --- a/docs/patterns/coding/color-palettes/index.html +++ b/docs/patterns/coding/color-palettes/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html index cb78947..83329e5 100644 --- a/docs/patterns/coding/index.html +++ b/docs/patterns/coding/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + @@ -263,6 +270,16 @@ +
  • +

    + + + Tested using... + +

    +
    • + + diff --git a/docs/patterns/coding/index.xml b/docs/patterns/coding/index.xml index aa91279..ec1de72 100644 --- a/docs/patterns/coding/index.xml +++ b/docs/patterns/coding/index.xml @@ -53,5 +53,16 @@ Infusion offers another option: a special demo shortcode that allows you to writ {{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale: + + Tested using... + https://heydon.github.io/infusion/patterns/coding/tested/ + Mon, 01 Jan 0001 00:00:00 +0000 + + 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: + + \ No newline at end of file diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html new file mode 100644 index 0000000..f7d8982 --- /dev/null +++ b/docs/patterns/coding/tested/index.html @@ -0,0 +1,318 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Tested using... | Infusion + + + + + skip to content + + + + + + + + + W3C + SVG + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + +
    +

    Tested using...

    + +

    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 Android + with Talkback + + + + + + Chrome + + + + + + + + Safari iOS + with 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:

    + +
      +
    • Firefox
      • +
    • Chrome
      • +
    • Safari
      • +
    • IE
      • +
    • Edge
      • +
    • Opera
      • +
    • Chrome Android
      • +
    • Firefox Android
      • +
    • Safari iOS
      • +
    + +
    + +
    + Powered by Infusion, a The Paciello Group project
    + For general enquiries, contact us on info@paciellogroup.com +
    +
    +
    +
    + + + + + + diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html index bec7a1c..347ec2b 100644 --- a/docs/patterns/coding/writing-inline-demos/index.html +++ b/docs/patterns/coding/writing-inline-demos/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/index.html b/docs/patterns/index.html index e71a77e..549db65 100644 --- a/docs/patterns/index.html +++ b/docs/patterns/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html index c345fde..fec7c2f 100644 --- a/docs/patterns/installation/index.html +++ b/docs/patterns/installation/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html index 4796d47..052645e 100644 --- a/docs/patterns/library-setup/index.html +++ b/docs/patterns/library-setup/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html index 2aca318..d2531b1 100644 --- a/docs/patterns/serving/index.html +++ b/docs/patterns/serving/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html index c6ce79a..28c81c2 100644 --- a/docs/patterns/writing/expandable-sections/index.html +++ b/docs/patterns/writing/expandable-sections/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/including-images/index.html b/docs/patterns/writing/including-images/index.html index dfac459..a37e624 100644 --- a/docs/patterns/writing/including-images/index.html +++ b/docs/patterns/writing/including-images/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html index f2da81a..b685c44 100644 --- a/docs/patterns/writing/index.html +++ b/docs/patterns/writing/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html index fd1606c..d1995ac 100644 --- a/docs/patterns/writing/library-structure/index.html +++ b/docs/patterns/writing/library-structure/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html index 70b1e40..6ee95ad 100644 --- a/docs/patterns/writing/markdown-and-metadata/index.html +++ b/docs/patterns/writing/markdown-and-metadata/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html index e6d3a60..b97d4de 100644 --- a/docs/patterns/writing/notes-and-warnings/index.html +++ b/docs/patterns/writing/notes-and-warnings/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html index b73a302..b3ed97c 100644 --- a/docs/patterns/writing/references/index.html +++ b/docs/patterns/writing/references/index.html @@ -206,6 +206,13 @@ +
  • + + + Tested using... + +
    • + @@ -260,6 +267,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. + + + +

    Full descriptions

    Sometimes, you’ll want to include the full descriptions of the success criteria inline. This is possible by setting descriptions to true:

    @@ -417,6 +436,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. +