A paste's code block is a labelled region in the tab order, so keyboard users can reach and scroll it (axe scrollable-region-focusable) (#145)

OP OpenVibers committed 17 days ago · 937b011320 · 3 files, +5 −1

Changes

ddiff --git a/public/css/community.css b/public/css/community.css
iindex bdaefe6..0db4017 100644
---- a/public/css/community.css
++++ b/public/css/community.css
@@@ -108,6 +108,7 @@ a.badge:hover { border-color: var(--accent); text-decoration: none; color: var(-
  .summary i { color: var(--accent-light); margin-right: 6px; }
  .actions, .share { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
  .code-wrap { display: grid; grid-template-columns: auto 1fr; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; margin: 12px 0 18px; max-height: 80vh; }
++.code-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .code-wrap pre { margin: 0; font: 13px/1.55 var(--mono); tab-size: 4; }
  .gutter { padding: 14px 10px 14px 14px; text-align: right; color: var(--text-muted); user-select: none; border-right: 1px solid var(--border); position: sticky; left: 0; background: var(--bg-input); }
  .code { padding: 14px 16px; }
ddiff --git a/server/render/pages.js b/server/render/pages.js
iindex f68de49..d86c478 100644
---- a/server/render/pages.js
++++ b/server/render/pages.js
@@@ -364,7 +364,9 @@ function pastePage({ paste: p, related, user, comments = null, commentSort = 'ne
    </figure>`;
      } else {
          const gutter = Array.from({ length: hl.lines }, (_, i) => i + 1).join('\n');
--        bodyBlock = `<div class="code-wrap" data-code>
++        // It scrolls (long lines, long pastes), so keyboard users must be able to reach and scroll it: a labelled region
++        // in the tab order (axe scrollable-region-focusable, the browser check of 2026-10-27 on /p/icy-moon-90).
++        bodyBlock = `<div class="code-wrap" data-code tabindex="0" role="region" aria-label="Paste content">
      <pre class="gutter" aria-hidden="true">${gutter}</pre>
      <pre class="code"><code class="hljs language-${esc(hl.language)}" id="paste-content">${hl.html}</code></pre>
    </div>`;
ddiff --git a/test/ssr-community.test.js b/test/ssr-community.test.js
iindex e6c7c8a..9cb3b72 100644
---- a/test/ssr-community.test.js
++++ b/test/ssr-community.test.js
@@@ -39,6 +39,7 @@ const { boot, check, done } = require('./helpers/app');
          assert.strictEqual(r.status, 200);
          has(r.text, '<title>Hello world in JavaScript · OpenVibe.Community</title>');
          has(r.text, 'class="hljs-keyword">const</span>');
++        has(r.text, '<div class="code-wrap" data-code tabindex="0" role="region" aria-label="Paste content">');
          const ld = r.text.match(/<script type="application\/ld\+json">(.*?)<\/script>/g).map((s) => JSON.parse(s.replace(/<script[^>]*>|<\/script>/g, '')));
          assert.strictEqual(ld.find((o) => o['@type'] === 'Article').author.name, 'Alex');
          has(r.text, 'https://openvibe.media/avatars/alex.png');

diff --git a/public/css/community.css b/public/css/community.css

index bdaefe6..0db4017 100644

--- a/public/css/community.css

+++ b/public/css/community.css

@@ -108,6 +108,7 @@ a.badge:hover { border-color: var(--accent); text-decoration: none; color: var(-

.summary i { color: var(--accent-light); margin-right: 6px; }

.actions, .share { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.code-wrap { display: grid; grid-template-columns: auto 1fr; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; margin: 12px 0 18px; max-height: 80vh; }

+.code-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.code-wrap pre { margin: 0; font: 13px/1.55 var(--mono); tab-size: 4; }

.gutter { padding: 14px 10px 14px 14px; text-align: right; color: var(--text-muted); user-select: none; border-right: 1px solid var(--border); position: sticky; left: 0; background: var(--bg-input); }

.code { padding: 14px 16px; }

diff --git a/server/render/pages.js b/server/render/pages.js

index f68de49..d86c478 100644

--- a/server/render/pages.js

+++ b/server/render/pages.js

@@ -364,7 +364,9 @@ function pastePage({ paste: p, related, user, comments = null, commentSort = 'ne

</figure>`;

} else {

const gutter = Array.from({ length: hl.lines }, (_, i) => i + 1).join('\n');

- bodyBlock = `<div class="code-wrap" data-code>

+ // It scrolls (long lines, long pastes), so keyboard users must be able to reach and scroll it: a labelled region

+ // in the tab order (axe scrollable-region-focusable, the browser check of 2026-10-27 on /p/icy-moon-90).

+ bodyBlock = `<div class="code-wrap" data-code tabindex="0" role="region" aria-label="Paste content">

<pre class="gutter" aria-hidden="true">${gutter}</pre>

</div>`;

diff --git a/test/ssr-community.test.js b/test/ssr-community.test.js

index e6c7c8a..9cb3b72 100644

--- a/test/ssr-community.test.js

+++ b/test/ssr-community.test.js

@@ -39,6 +39,7 @@ const { boot, check, done } = require('./helpers/app');

assert.strictEqual(r.status, 200);

has(r.text, '<title>Hello world in JavaScript · OpenVibe.Community</title>');

has(r.text, 'class="hljs-keyword">const</span>');

+ has(r.text, '<div class="code-wrap" data-code tabindex="0" role="region" aria-label="Paste content">');

const ld = r.text.match(/<script type="application\/ld\+json">(.*?)<\/script>/g).map((s) => JSON.parse(s.replace(/<script[^>]*>|<\/script>/g, '')));

assert.strictEqual(ld.find((o) => o['@type'] === 'Article').author.name, 'Alex');

has(r.text, 'https://openvibe.media/avatars/alex.png');