changes tested examples

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.
 
 {{<codeBlock>}}
-&#x7b;{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}}
+&#x7b;{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
 {{</codeBlock>}}
 
 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:
 

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 {

docs/index.xml

@@ -199,7 +199,7 @@ npm run serve This will serve your working library from localhost:1313 (the exac
       <guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid>
       <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;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&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
-&amp;#x7b;{% tested using=&#34;Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge&#34; %}}  This outputs:</description>
+&amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}}  This outputs:</description>
     </item>
     
   </channel>

docs/patterns/coding/index.xml

@@ -85,7 +85,7 @@ The file tree is described using a markdown nested list structure:
       <guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid>
       <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;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&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
-&amp;#x7b;{% tested using=&#34;Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge&#34; %}}  This outputs:</description>
+&amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}}  This outputs:</description>
     </item>
     
   </channel>

docs/patterns/coding/tested/index.html

@@ -284,7 +284,7 @@
 <p><strong>Infusion</strong> provided a <code>tested</code> shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs.</p>
 
 <pre class=" "><code  data-codeblock-shortcode>
-&#x7b;{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}}
+&#x7b;{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
 </code></pre>
 
 
@@ -303,9 +303,9 @@
           
           
           
-          <img src="https://heydon.github.io/infusion/images/browser-Firefox-Android.svg" alt="">
-          <span><strong>Firefox Android</strong></span>
-          <span class="additional">with <strong>Talkback</strong></span>
+          <img src="https://heydon.github.io/infusion/images/browser-Firefox.svg" alt="">
+          <span><strong>Firefox</strong></span>
+          <span class="additional">with <strong>JAWS</strong></span>
         
       </td>
     

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 {