hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

note on kbd for code blocks

Browse Source
This commit is contained in:
Heydon Pickering 2017-08-15 09:55:30 +01:00
parent 2ec57b5376
commit 9b063fcf25
4 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
content/patterns/coding/code-blocks.md
View File

@ -46,3 +46,7 @@ toggle.addEventListener('click', (e) => {
e.target.setAttribute('aria-pressed', !pressed); e.target.setAttribute('aria-pressed', !pressed);
}); });
{{</codeBlock>}} {{</codeBlock>}}
{{% 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 %}}

11
docs/patterns/coding/code-blocks/index.html
View File

@ -411,6 +411,17 @@ toggle.addEventListener('click', (e) => {
</code></pre> </code></pre>
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An <code>aria-label</code> is provided to identify the code block to screen reader users.</p>
</div>
</aside>
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">

11
docs/print-version/index.html
View File

@ -1558,6 +1558,17 @@ toggle.addEventListener('click', (e) => {
</code></pre> </code></pre>
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An <code>aria-label</code> is provided to identify the code block to screen reader users.</p>
</div>
</aside>
</div> </div>
<div class="pattern-section"> <div class="pattern-section">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long