numbered highlights explanation
This commit is contained in:
Heydon Pickering
parent
df320adcf5
commit
fff72dff15
|
|
@ -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.
|
||||
{{% /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>}}
|
||||
<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>}}
|
||||
|
||||
You mark out the highlighted areas with double parentheses like so:
|
||||
|
||||
{{<codeBlock>}}
|
||||
{{<html>}}
|
||||
<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>}}
|
||||
{{</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>}}
|
||||
{{<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>}}
|
||||
{{</codeBlock>}}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ figure p img {
|
|||
[data-expands]:focus svg,
|
||||
.patterns a:focus .text,
|
||||
[for="themer"] :focus + [aria-hidden] {
|
||||
outline: 3px solid #888;
|
||||
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 */
|
||||
|
||||
|
|
@ -531,28 +533,21 @@ pre[class*=language-] code * {
|
|||
}
|
||||
.highlight {
|
||||
background: #ddd;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.0625rem 0.33rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.highlight::after {
|
||||
.numbered .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;
|
||||
padding: 0.125em 0.5em;
|
||||
vertical-align: 0.33em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*main {
|
||||
display: block;
|
||||
counter-reset: fig;
|
||||
|
|
|
|||
|
|
@ -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')) {
|
||||
|
|
|
|||
|
|
@ -425,21 +425,74 @@
|
|||
</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>
|
||||
<ul>
|
||||
<li>Here's a thing</li>
|
||||
<li <span class='highlight'>role="separator"</span>>Here's a thing</li>
|
||||
<li>Here's a <span class='highlight'>thing</span></li>
|
||||
<li>Here's a thing <span <span class='highlight'>aria-hidden="true"</span>></span></li>
|
||||
</ul>
|
||||
|
||||
<div class="html-annotated "><code>
|
||||
<div <span class='highlight'>role="dialog"</span> <span class='highlight'>aria-labelledby="dialog-heading"</span>>
|
||||
<button <span class='highlight'>aria-label="close"</span>>x</button>
|
||||
<h2 <span class='highlight'>id="dialog-heading"</span>>Confirmation</h2>
|
||||
<p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
|
||||
<button>Okay</button>
|
||||
<button>Cancel</button>
|
||||
</div>
|
||||
</code></div>
|
||||
|
||||
|
||||
<p>You mark out the highlighted areas with double parentheses like so:</p>
|
||||
|
||||
<pre class=""><code data-codeblock-shortcode>
|
||||
{{<html>}}
|
||||
<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>}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>Better still, if you include <code>numbered="true"</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="html-annotated numbered"><code>
|
||||
<div <span class='highlight'>role="dialog"</span> <span class='highlight'>aria-labelledby="dialog-heading"</span>>
|
||||
<button <span class='highlight'>aria-label="close"</span>>x</button>
|
||||
<h2 <span class='highlight'>id="dialog-heading"</span>>Confirmation</h2>
|
||||
<p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
|
||||
<button>Okay</button>
|
||||
<button>Cancel</button>
|
||||
</div>
|
||||
</code></div>
|
||||
|
||||
|
||||
<p>You just include <code>numbered="true"</code> on the opening shortcode tag:</p>
|
||||
|
||||
<pre class=""><code data-codeblock-shortcode>
|
||||
{{<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>}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
|
|
|
|||
|
|
@ -1709,21 +1709,74 @@ toc = false
|
|||
</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>
|
||||
<ul>
|
||||
<li>Here's a thing</li>
|
||||
<li <span class='highlight'>role="separator"</span>>Here's a thing</li>
|
||||
<li>Here's a <span class='highlight'>thing</span></li>
|
||||
<li>Here's a thing <span <span class='highlight'>aria-hidden="true"</span>></span></li>
|
||||
</ul>
|
||||
|
||||
<div class="html-annotated "><code>
|
||||
<div <span class='highlight'>role="dialog"</span> <span class='highlight'>aria-labelledby="dialog-heading"</span>>
|
||||
<button <span class='highlight'>aria-label="close"</span>>x</button>
|
||||
<h2 <span class='highlight'>id="dialog-heading"</span>>Confirmation</h2>
|
||||
<p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
|
||||
<button>Okay</button>
|
||||
<button>Cancel</button>
|
||||
</div>
|
||||
</code></div>
|
||||
|
||||
|
||||
<p>You mark out the highlighted areas with double parentheses like so:</p>
|
||||
|
||||
<pre class=""><code data-codeblock-shortcode>
|
||||
{{<html>}}
|
||||
<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>}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>Better still, if you include <code>numbered="true"</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="html-annotated numbered"><code>
|
||||
<div <span class='highlight'>role="dialog"</span> <span class='highlight'>aria-labelledby="dialog-heading"</span>>
|
||||
<button <span class='highlight'>aria-label="close"</span>>x</button>
|
||||
<h2 <span class='highlight'>id="dialog-heading"</span>>Confirmation</h2>
|
||||
<p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
|
||||
<button>Okay</button>
|
||||
<button>Cancel</button>
|
||||
</div>
|
||||
</code></div>
|
||||
|
||||
|
||||
<p>You just include <code>numbered="true"</code> on the opening shortcode tag:</p>
|
||||
|
||||
<pre class=""><code data-codeblock-shortcode>
|
||||
{{<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>}}
|
||||
</code></pre>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pattern-section">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,5 @@
|
|||
{{ $html := .Inner | htmlEscape }}
|
||||
{{ $html := replace $html "((" "<span class='highlight'>" }}
|
||||
{{ $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>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ figure p img {
|
|||
[data-expands]:focus svg,
|
||||
.patterns a:focus .text,
|
||||
[for="themer"] :focus + [aria-hidden] {
|
||||
outline: 3px solid #888;
|
||||
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 */
|
||||
|
||||
|
|
@ -531,28 +533,21 @@ pre[class*=language-] code * {
|
|||
}
|
||||
.highlight {
|
||||
background: #ddd;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.0625rem 0.33rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.highlight::after {
|
||||
.numbered .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;
|
||||
padding: 0.125em 0.5em;
|
||||
vertical-align: 0.33em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*main {
|
||||
display: block;
|
||||
counter-reset: fig;
|
||||
|
|
|
|||
|
|
@ -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')) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user