openvibers/openvibe.live Commits

Chat page: its one heading (visually hidden, for screen readers and search engines); /chat had no <h1> (#360)

OP OpenVibers committed 19 days ago · 58b75e48b1 · 3 files, +5 −1

Changes

ddiff --git a/public/css/features/chatpage.css b/public/css/features/chatpage.css
iindex 68cf2a6e..5ea80d39 100644
---- a/public/css/features/chatpage.css
++++ b/public/css/features/chatpage.css
@@@ -364,3 +364,6 @@
/* Without JavaScript (the server inlines this fragment for a direct visit): what needs it, and where to go instead. */
.chat-noscript { max-width: 720px; margin: 24px auto; padding: 0 16px; line-height: 1.6; }
++
++/* The page's one heading, for screen readers and search engines (the layout shows the channel names instead). */
++.chat-page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
ddiff --git a/public/fragments/chat.html b/public/fragments/chat.html
iindex 950c6988..d4b016b5 100644
---- a/public/fragments/chat.html
++++ b/public/fragments/chat.html
@@@ -1,4 +1,5 @@
<!-- #page-chat markup, loaded on first visit to the route (public/features.json). The server inlines it for direct visits. -->
++ <h1 class="chat-page-title">Chat and voice channels</h1>
<noscript><div class="chat-noscript">
<h2>OpenVibe.Live chat</h2>
<p>The chat room and its voice channels need JavaScript, which is turned off in this browser: messages arrive live
ddiff --git a/test/shell-one-h1.test.js b/test/shell-one-h1.test.js
iindex 655b26bd..32a7d420 100644
---- a/test/shell-one-h1.test.js
++++ b/test/shell-one-h1.test.js
@@@ -22,7 +22,7 @@ for (const url of ['/', '/@someone', '/updates', '/content', '/clips', '/moments
assert.ok(h1s(html) <= 1, `${url}: at most one <h1> (${h1s(html)})`);
assert.strictEqual(html.includes('class="hero-tagline"'), url === '/', `${url}: the home hero ${url === '/' ? 'is' : 'is not'} in the page`);
}
--for (const url of ['/', '/updates', '/content', '/moments', '/search', '/@someone']) {
++for (const url of ['/', '/updates', '/content', '/moments', '/search', '/@someone', '/chat']) {
assert.strictEqual(h1s(assets.renderRoute(doc, url)), 1, `${url}: its page's <h1> is there from the first paint`);
}