# Make code blocks keyboard focusable

**URL:** <https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861>\
**Category:** Feature requests\
**Created:** [September 16, 2025, 9:33am UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861 "2025-09-16T09:33:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fl4nn](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/fl4nn/32/1532_2.png) [@fl4nn](https://zola.discourse.group/u/fl4nn)\
**Post date:** [September 16, 2025, 9:33am UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861/1 "2025-09-16T09:33:22Z")

</div>

It would be nice if the code blocks would be keyboard focusable so they can be scrolled without mouse interaction.

This could be achieved for example by adding `tabindex="0"` to the `<pre>` element.

[Keyboard accessible - Interactive elements must be focusable](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Keyboard#interactive_elements_must_be_focusable)

For now I’m working around this with a custom pre shortcode:

```html
<pre tabindex="0"><code>{{body}}
</code></pre>

```

but this has the downside of loosing the option of automatic syntax highlighting.

---

<div class="post-metadata">

**Author:** ![yashi](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/yashi/32/1508_2.png) [@yashi](https://zola.discourse.group/u/yashi)\
**Post date:** [September 26, 2025, 5:41am UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861/2 "2025-09-26T05:41:44Z")

</div>

There is no way to do that except enhancing Zola itself I suppose. Check [mod.rs](https://github.com/getzola/zola/blob/master/components/markdown/src/codeblock/mod.rs) and [fence.rs](https://github.com/getzola/zola/blob/master/components/markdown/src/codeblock/fence.rs).

BTW, are code blocks interactive elements?

---

<div class="post-metadata">

**Author:** ![fl4nn](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/fl4nn/32/1532_2.png) [@fl4nn](https://zola.discourse.group/u/fl4nn)\
**Post date:** [September 26, 2025, 8:14am UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861/3 "2025-09-26T08:14:09Z")

</div>

> [@yashi](#):
>
> BTW, are code blocks interactive elements?

They become interactive when overflow scrollbars appear, I guess an alternative workaround would be to disable overflow in CSS.

---

<div class="post-metadata">

**Author:** ![yashi](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/yashi/32/1508_2.png) [@yashi](https://zola.discourse.group/u/yashi)\
**Post date:** [September 26, 2025, 1:44pm UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861/4 "2025-09-26T13:44:17Z")

</div>

I see. Do you think `<pre>` should have `tabindex=”0”` unconditionally? That’d be easy.

```diff
diff --git a/components/markdown/src/codeblock/mod.rs b/components/markdown/src/codeblock/mod.rs
index 2a632b6d..d8b25ab4 100644
--- a/components/markdown/src/codeblock/mod.rs
+++ b/components/markdown/src/codeblock/mod.rs
@@ -19,7 +19,7 @@ fn opening_html(
     line_numbers: bool,
     enable_copy: bool,
 ) -> String {
- let mut html = String::from("<pre");
+ let mut html = String::from("<pre tabindex=\"0\"");
     if line_numbers {
         html.push_str(" data-linenos");
     }

```

---

<div class="post-metadata">

**Author:** ![mrec](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/mrec/32/1485_2.png) [@mrec](https://zola.discourse.group/u/mrec)\
**Post date:** [September 26, 2025, 10:41pm UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861/5 "2025-09-26T22:41:12Z")

</div>

> [@yashi](#):
>
> There is no way to do that except enhancing Zola itself

Well, you could just do a

```javascript
Array.from(document.getElementsByTagName("pre")).forEach(e => e.tabIndex = "0");

```

at page load. Not ideal, but gets the job done, and it’s a fairly marginal requirement.

---

<div class="post-metadata">

**Author:** ![fl4nn](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/fl4nn/32/1532_2.png) [@fl4nn](https://zola.discourse.group/u/fl4nn)\
**Post date:** [September 27, 2025, 8:48pm UTC](https://zola.discourse.group/t/make-code-blocks-keyboard-focusable/2861/6 "2025-09-27T20:48:29Z")

</div>

> [@yashi](#):
>
> Do you think `<pre>` should have `tabindex=”0”` unconditionally?

Personally I’d say yes, whether that would be acceptable for the maintainers I do not know.