note on kbd for code blocks

content/patterns/coding/code-blocks.md

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

docs/patterns/coding/code-blocks/index.html

@@ -411,6 +411,17 @@ toggle.addEventListener('click', (e) => {
 </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>
 
           <footer role="contentinfo">

docs/print-version/index.html

@@ -1558,6 +1558,17 @@ toggle.addEventListener('click', (e) => {
 </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 class="pattern-section">