Home Explore Help
Register Sign In
wang2365
/
cupper-hugo-theme
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

numbered highlights explanation

Heydon Pickering 8 years ago
parent
df320adcf5
commit
fff72dff15
9 changed files with 228 additions and 86 deletions
Unified View Show Diff Stats
  1. 52 7
      content/patterns/coding/code-blocks.md
  2. 25 30
      docs/css/styles.css
  3. 1 1
      docs/js/dom-scripts.js
  4. 61 8
      docs/patterns/coding/code-blocks/index.html
  5. 61 8
      docs/print-version/index.html
  6. 0 0
      docs/service-worker.js
  7. 2 1
      themes/infusion/layouts/shortcodes/html.html
  8. 25 30
      themes/infusion/static/css/styles.css
  9. 1 1
      themes/infusion/static/js/dom-scripts.js

+ 52 - 7
content/patterns/coding/code-blocks.md
View File 

@@ -25,13 +25,58 @@ Note that the syntax highlighting uses a greyscale theme. **Infusion** is carefu
 
 To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An `aria-label` is provided to identify the code block to screen reader users.
 
 To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An `aria-label` is provided to identify the code block to screen reader users.
 
 {{% /note %}}
 
 {{% /note %}}
 
 
 
-## Annotated
 
+## Annotated HTML
 
+
 
+Since the structure of HTML is critical to interoperable web interfaces, **Infusion** offers the ability to highlight and annotate specific HTML elements and attributes using the `html` shortcode.
 
+
 
+Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:
 
 
 
 {{<html>}}
 
 {{<html>}}
 
-<ul>
 
-  <li>Here's a thing</li>
 
-  <li ((role="separator"))>Here's a thing</li>
 
-  <li>Here's a ((thing))</li>
 
-  <li>Here's a thing <span ((aria-hidden="true"))></span></li>
 
-</ul>
 
+<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  <button ((aria-label="close"))>x</button>
 
+  <h2 ((id="dialog-heading"))>Confirmation</h2>
 
+  <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
 
+  <button>Okay</button>
 
+  <button>Cancel</button>
 
+</div>
 
 {{</html>}}
 
 {{</html>}}
 
+
 
+You mark out the highlighted areas with double parentheses like so:
 
+
 
+{{<codeBlock>}}
 
+&#x7b;{&lt;html>}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+{{</codeBlock>}}
 
+
 
+Better still, if you include `numbered="true"`, each highlight is enumberated so you can reference it directly in the ensuing text.
 
+
 
+{{<html numbered="true">}}
 
+<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  <button ((aria-label="close"))>x</button>
 
+  <h2 ((id="dialog-heading"))>Confirmation</h2>
 
+  <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
 
+  <button>Okay</button>
 
+  <button>Cancel</button>
 
+</div>
 
+{{</html>}}
 
+
 
+You just include `numbered="true"` on the opening shortcode tag:
 
+
 
+{{<codeBlock>}}
 
+&#x7b;{&lt;html numbered="true">}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+{{</codeBlock>}}

+ 25 - 30
docs/css/styles.css
View File 

@@ -65,8 +65,10 @@ figure p img {
 
 [data-expands]:focus svg,
 
 [data-expands]:focus svg,
 
 .patterns a:focus .text,
 
 .patterns a:focus .text,
 
 [for="themer"] :focus + [aria-hidden] {
 
 [for="themer"] :focus + [aria-hidden] {
 
-    outline: 3px solid #888;
 
-    outline-offset: 2px;
 
+    outline: 4px solid #999;
 
+}
 
+a {
 
+  outline-offset: 2px;
 
 }
 
 }
 
 /* fix for IE :( */
 
 /* fix for IE :( */
 
 
 
@@ -382,7 +384,7 @@ caption {
 
 }
 
 }
 
 #menu-button:focus {
 
 #menu-button:focus {
 
     outline: none;
 
     outline: none;
 
-    box-shadow: inset 0 0 0 0.25rem #888;
 
+    box-shadow: inset 0 0 0 0.25rem #999;
 
 }
 
 }
 
 /* Tables of contents */
 
 /* Tables of contents */
 
 
 
@@ -522,37 +524,30 @@ pre[class*=language-] code * {
 
     margin-top: -1rem;
 
     margin-top: -1rem;
 
 }
 
 }
 
 .html-annotated {
 
 .html-annotated {
 
-  overflow-y: hidden;
 
-  overflow-x: auto;
 
-  padding: 1.5rem;
 
-  border: 1px solid;
 
-  white-space: pre;
 
-  counter-reset: annotation;
 
+    overflow-y: hidden;
 
+    overflow-x: auto;
 
+    padding: 1.5rem;
 
+    border: 1px solid;
 
+    white-space: pre;
 
+    counter-reset: annotation;
 
 }
 
 }
 
 .highlight {
 
 .highlight {
 
-  background: #ddd;
 
-  padding: 0.25rem 0.5rem;
 
-  border-radius: 0.5rem;
 
+    background: #ddd;
 
+    padding: 0.0625rem 0.33rem;
 
+    border-radius: 0.5rem;
 
 }
 
 }
 
-.highlight::after {
 
-  counter-increment: annotation;
 
-  content: counter(annotation);
 
-  font-weight: bold;
 
-  font-size: 0.5rem;
 
-  background: #111;
 
-  color: #fefefe;
 
-  display: inline-block;
 
-  width: 0.75rem;
 
-  height: 0.75rem;
 
-  line-height: 0.75rem;
 
-  text-align: center;
 
-  border-radius: 1rem;
 
-  vertical-align: middle;
 
-  margin-left: 0.25rem;
 
+.numbered .highlight::after {
 
+    counter-increment: annotation;
 
+    content: counter(annotation);
 
+    font-weight: bold;
 
+    font-size: 0.5rem;
 
+    background: #111;
 
+    color: #fefefe;
 
+    border-radius: 1rem;
 
+    margin-left: 0.25rem;
 
+    padding: 0.125em 0.5em;
 
+    vertical-align: 0.33em;
 
 }
 
 }
 
-
 
-
 
-
 
 /*main {
 
 /*main {
 
     display: block;
 
     display: block;
 
     counter-reset: fig;
 
     counter-reset: fig;

+ 1 - 1
docs/js/dom-scripts.js
View File 

@@ -82,7 +82,7 @@
 
 
 
 /* Enable scrolling by keyboard of code samples */
 
 /* Enable scrolling by keyboard of code samples */
 
 (function () {
 
 (function () {
 
-  var codeBlocks = document.querySelectorAll('pre');
 
+  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {
 
     if (block.querySelector('code')) {

+ 61 - 8
docs/patterns/coding/code-blocks/index.html
View File 

@@ -425,21 +425,74 @@
 
 </aside>
 
 </aside>
 
 
 
 
 
-<h2 id="annotated">Annotated</h2>
 
+<h2 id="annotated-html">Annotated HTML</h2>
 
 
 
+<p>Since the structure of HTML is critical to interoperable web interfaces, <strong>Infusion</strong> offers the ability to highlight and annotate specific HTML elements and attributes using the <code>html</code> shortcode.</p>
 
 
 
+<p>Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
 
 
-<div class="html-annotated"><code>
 
-&lt;ul&gt;
 
-  &lt;li&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li <span class='highlight'>role=&#34;separator&#34;</span>&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a <span class='highlight'>thing</span>&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a thing &lt;span <span class='highlight'>aria-hidden=&#34;true&#34;</span>&gt;&lt;/span&gt;&lt;/li&gt;
 
-&lt;/ul&gt;
 
+
 
+
 
+
 
+<div class="html-annotated "><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
 </code></div>
 
 </code></div>
 
 
 
 
 
+<p>You mark out the highlighted areas with double parentheses like so:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html>}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
+<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
 
+
 
+
 
+
 
+
 
+
 
+<div class="html-annotated numbered"><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
+</code></div>
 
+
 
+
 
+<p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html numbered="true">}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
   </main>
 
   </main>
 
 
 
           <footer role="contentinfo">
 
           <footer role="contentinfo">

+ 61 - 8
docs/print-version/index.html
View File 

@@ -1709,21 +1709,74 @@ toc = false
 
 </aside>
 
 </aside>
 
 
 
 
 
-<h2 id="annotated">Annotated</h2>
 
+<h2 id="annotated-html">Annotated HTML</h2>
 
 
 
+<p>Since the structure of HTML is critical to interoperable web interfaces, <strong>Infusion</strong> offers the ability to highlight and annotate specific HTML elements and attributes using the <code>html</code> shortcode.</p>
 
 
 
+<p>Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
 
 
-<div class="html-annotated"><code>
 
-&lt;ul&gt;
 
-  &lt;li&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li <span class='highlight'>role=&#34;separator&#34;</span>&gt;Here&#39;s a thing&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a <span class='highlight'>thing</span>&lt;/li&gt;
 
-  &lt;li&gt;Here&#39;s a thing &lt;span <span class='highlight'>aria-hidden=&#34;true&#34;</span>&gt;&lt;/span&gt;&lt;/li&gt;
 
-&lt;/ul&gt;
 
+
 
+
 
+
 
+<div class="html-annotated "><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
 </code></div>
 
 </code></div>
 
 
 
 
 
+<p>You mark out the highlighted areas with double parentheses like so:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html>}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
+<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
 
+
 
+
 
+
 
+
 
+
 
+<div class="html-annotated numbered"><code>
 
+&lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
+  &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
+  &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
+  &lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
 
+  &lt;button&gt;Okay&lt;/button&gt;
 
+  &lt;button&gt;Cancel&lt;/button&gt;
 
+&lt;/div&gt;
 
+</code></div>
 
+
 
+
 
+<p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
+
 
+<pre class=""><code  data-codeblock-shortcode>
 
+&#x7b;{&lt;html numbered="true">}}
 
+&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
+  &lt;button ((aria-label="close"))>x&lt;/button>
 
+  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+  &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
+  &lt;button>Okay&lt;/button>
 
+  &lt;button>Cancel&lt;/button>
 
+&lt;/div>
 
+&#x7b;{&lt;/html>}}
 
+</code></pre>
 
+
 
+
 
           </div>
 
           </div>
 
         
         
           <div class="pattern-section">
 
           <div class="pattern-section">

File diff suppressed because it is too large
+ 0 - 0
docs/service-worker.js


+ 2 - 1
themes/infusion/layouts/shortcodes/html.html
View File 

@@ -1,4 +1,5 @@
 
 {{ $html := .Inner | htmlEscape }}
 
 {{ $html := .Inner | htmlEscape }}
 
 {{ $html := replace $html "((" "<span class='highlight'>" }}
 
 {{ $html := replace $html "((" "<span class='highlight'>" }}
 
 {{ $html := replace $html "))" "</span>" }}
 
 {{ $html := replace $html "))" "</span>" }}
 
-<div class="html-annotated"><code>{{ $html | safeHTML }}</code></div>
 
+{{ $numbered := .Get "numbered" }}
 
+<div class="html-annotated {{ if and ($numbered) (ne $numbered "false") }}numbered{{ end }}"><code>{{ $html | safeHTML }}</code></div>

+ 25 - 30
themes/infusion/static/css/styles.css
View File 

@@ -65,8 +65,10 @@ figure p img {
 
 [data-expands]:focus svg,
 
 [data-expands]:focus svg,
 
 .patterns a:focus .text,
 
 .patterns a:focus .text,
 
 [for="themer"] :focus + [aria-hidden] {
 
 [for="themer"] :focus + [aria-hidden] {
 
-    outline: 3px solid #888;
 
-    outline-offset: 2px;
 
+    outline: 4px solid #999;
 
+}
 
+a {
 
+  outline-offset: 2px;
 
 }
 
 }
 
 /* fix for IE :( */
 
 /* fix for IE :( */
 
 
 
@@ -382,7 +384,7 @@ caption {
 
 }
 
 }
 
 #menu-button:focus {
 
 #menu-button:focus {
 
     outline: none;
 
     outline: none;
 
-    box-shadow: inset 0 0 0 0.25rem #888;
 
+    box-shadow: inset 0 0 0 0.25rem #999;
 
 }
 
 }
 
 /* Tables of contents */
 
 /* Tables of contents */
 
 
 
@@ -522,37 +524,30 @@ pre[class*=language-] code * {
 
     margin-top: -1rem;
 
     margin-top: -1rem;
 
 }
 
 }
 
 .html-annotated {
 
 .html-annotated {
 
-  overflow-y: hidden;
 
-  overflow-x: auto;
 
-  padding: 1.5rem;
 
-  border: 1px solid;
 
-  white-space: pre;
 
-  counter-reset: annotation;
 
+    overflow-y: hidden;
 
+    overflow-x: auto;
 
+    padding: 1.5rem;
 
+    border: 1px solid;
 
+    white-space: pre;
 
+    counter-reset: annotation;
 
 }
 
 }
 
 .highlight {
 
 .highlight {
 
-  background: #ddd;
 
-  padding: 0.25rem 0.5rem;
 
-  border-radius: 0.5rem;
 
+    background: #ddd;
 
+    padding: 0.0625rem 0.33rem;
 
+    border-radius: 0.5rem;
 
 }
 
 }
 
-.highlight::after {
 
-  counter-increment: annotation;
 
-  content: counter(annotation);
 
-  font-weight: bold;
 
-  font-size: 0.5rem;
 
-  background: #111;
 
-  color: #fefefe;
 
-  display: inline-block;
 
-  width: 0.75rem;
 
-  height: 0.75rem;
 
-  line-height: 0.75rem;
 
-  text-align: center;
 
-  border-radius: 1rem;
 
-  vertical-align: middle;
 
-  margin-left: 0.25rem;
 
+.numbered .highlight::after {
 
+    counter-increment: annotation;
 
+    content: counter(annotation);
 
+    font-weight: bold;
 
+    font-size: 0.5rem;
 
+    background: #111;
 
+    color: #fefefe;
 
+    border-radius: 1rem;
 
+    margin-left: 0.25rem;
 
+    padding: 0.125em 0.5em;
 
+    vertical-align: 0.33em;
 
 }
 
 }
 
-
 
-
 
-
 
 /*main {
 
 /*main {
 
     display: block;
 
     display: block;
 
     counter-reset: fig;
 
     counter-reset: fig;

+ 1 - 1
themes/infusion/static/js/dom-scripts.js
View File 

@@ -82,7 +82,7 @@
 
 
 
 /* Enable scrolling by keyboard of code samples */
 
 /* Enable scrolling by keyboard of code samples */
 
 (function () {
 
 (function () {
 
-  var codeBlocks = document.querySelectorAll('pre');
 
+  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {
 
     if (block.querySelector('code')) {

Some files were not shown because too many files changed in this diff