note on kbd for code blocks

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

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 %}}

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

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

File diff suppressed because one or more lines are too long