Scrollable content

Ordinary Markdown tables become horizontally scrollable at narrow widths. When JavaScript is available, DevLab adds a keyboard stop to a table only while it overflows. A visible focus ring identifies the focused area; arrow keys can then scroll it. Resizing the page or revealing hidden content updates that stop. Existing authored tabindex values are preserved.

Some browsers provide this behavior natively. Others need the enhancement. For a table that must be keyboard-scrollable without JavaScript, use a named devlab.scroll_region instead of relying on the browser's native table behavior.

Named scrolling region

{% <devlab.scroll_region label="Package formats"> %}
| Format | Filename | Purpose |
| --- | --- | --- |
| Source | project-source-and-verification-files.tar.gz | Source and verification files. |
| Portable | project-portable-build-for-aarch64.tar.gz | Portable application. |
{% </devlab.scroll_region> %}

The required, non-empty label names the region for assistive technology. Write it in the content's language. Its body accepts Markdown, including the table's own headings and caption text. The wrapper retains ordinary table semantics inside it; it does not turn the cells into a different widget.

Without JavaScript, the named region remains a keyboard stop even when its contents fit. With JavaScript, DevLab removes that automatic stop when there is no horizontal overflow. The wrapper owns the scroll area, so its table does not receive a second automatic stop. Custom HTML can provide its own labeled region and authored tabindex when different behavior is needed.

Diagrams and loading failures

A wide diagram can be focused and scrolled with the keyboard. Fitting diagrams do not add an automatic stop after initialization. If rendering fails, the caption and description remain associated with the fallback region and its source text can be reached and scrolled too.

Without JavaScript, a diagram's caption and description remain available; the browser cannot render the Mermaid source. See Diagrams for the component's content and host policy requirements.