diff --git a/content/patterns/coding/code-blocks.md b/content/patterns/coding/code-blocks.md index 98abc2a..eaffc19 100644 --- a/content/patterns/coding/code-blocks.md +++ b/content/patterns/coding/code-blocks.md @@ -24,3 +24,59 @@ Note that the syntax highlighting uses a greyscale theme. **Infusion** is carefu {{% note %}} 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 %}} + +## 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: + +{{}} +
+ +

Confirmation

+

Press Okay to confirm or Cancel

+ + +
+{{}} + +You mark out the highlighted areas with double parentheses like so: + +{{}} +{{<html>}} +<div ((role="dialog")) ((aria-labelledby="dialog-heading"))> + <button ((aria-label="close"))>x</button> + <h2 ((id="dialog-heading"))>Confirmation</h2> + <p>Press Okay to confirm or Cancel</p> + <button>Okay</button> + <button>Cancel</button> +</div> +{{</html>}} +{{}} + +Better still, if you include `numbered="true"`, each highlight is enumberated so you can reference it directly in the ensuing text. + +{{}} +
+ +

Confirmation

+

Press Okay to confirm or Cancel

+ + +
+{{}} + +You just include `numbered="true"` on the opening shortcode tag: + +{{}} +{{<html numbered="true">}} +<div ((role="dialog")) ((aria-labelledby="dialog-heading"))> + <button ((aria-label="close"))>x</button> + <h2 ((id="dialog-heading"))>Confirmation</h2> + <p>Press Okay to confirm or Cancel</p> + <button>Okay</button> + <button>Cancel</button> +</div> +{{</html>}} +{{}} diff --git a/docs/css/styles.css b/docs/css/styles.css index b0560ea..26d7090 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -65,8 +65,10 @@ figure p img { [data-expands]:focus svg, .patterns a:focus .text, [for="themer"] :focus + [aria-hidden] { - outline: 3px solid #888; - outline-offset: 2px; + outline: 4px solid #999; +} +a { + outline-offset: 2px; } /* fix for IE :( */ @@ -382,7 +384,7 @@ caption { } #menu-button:focus { outline: none; - box-shadow: inset 0 0 0 0.25rem #888; + box-shadow: inset 0 0 0 0.25rem #999; } /* Tables of contents */ @@ -517,10 +519,45 @@ pre[class*=language-][data-line] { pre[class*=language-] code * { margin-top: 0 !important; } -[data-codeblock-shortcode] { +[data-codeblock-shortcode], .html-annotated code { display: inline-block; margin-top: -1rem; } +.html-annotated { + overflow-y: hidden; + overflow-x: auto; + padding: 1.5rem; + border: 1px solid; + white-space: pre; + counter-reset: annotation; +} +.highlight { + background: #ddd; + padding: 0.0625rem 0.33rem; + border-radius: 0.5rem; +} +.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 { + display: block; + counter-reset: fig; + min-height: 100vh; +} +figcaption::before { + counter-increment: fig; + content: 'Figure ' counter(fig) ':\0020'; + font-weight: bold; +}*/ /* file tree lists */ .file-tree { overflow-x: auto; diff --git a/docs/js/dom-scripts.js b/docs/js/dom-scripts.js index 1c89251..0c69d4a 100644 --- a/docs/js/dom-scripts.js +++ b/docs/js/dom-scripts.js @@ -82,7 +82,7 @@ /* Enable scrolling by keyboard of code samples */ (function () { - var codeBlocks = document.querySelectorAll('pre'); + var codeBlocks = document.querySelectorAll('pre, .html-annotated'); Array.prototype.forEach.call(codeBlocks, function (block) { if (block.querySelector('code')) { diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index 11fdf18..bca7d21 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -394,7 +394,9 @@ -

Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.

+ + +

Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.

So, this…

@@ -423,6 +425,74 @@ +

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:

+ + + + + +
+<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> +
+ + +

You mark out the highlighted areas with double parentheses like so:

+ +

+{{<html>}}
+<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
+  <button ((aria-label="close"))>x</button>
+  <h2 ((id="dialog-heading"))>Confirmation</h2>
+  <p>Press Okay to confirm or Cancel</p>
+  <button>Okay</button>
+  <button>Cancel</button>
+</div>
+{{</html>}}
+
+ + +

Better still, if you include numbered="true", each highlight is enumberated so you can reference it directly in the ensuing text.

+ + + + + +
+<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> +
+ + +

You just include numbered="true" on the opening shortcode tag:

+ +

+{{<html numbered="true">}}
+<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
+  <button ((aria-label="close"))>x</button>
+  <h2 ((id="dialog-heading"))>Confirmation</h2>
+  <p>Press Okay to confirm or Cancel</p>
+  <button>Okay</button>
+  <button>Cancel</button>
+</div>
+{{</html>}}
+
+ +