openvibers/openvibe.live Commits
Chat page: its one heading (visually hidden, for screen readers and search engines); /chat had no <h1> (#360)
Changes
@@@ -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; }@@@ -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@@@ -22,7 +22,7 @@ for (const url of ['/', '/@someone', '/updates', '/content', '/clips', '/momentsassert.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`);}
@@ -364,3 +364,6 @@
@@ -364,3 +364,6 @@
/* Without JavaScript (the server inlines this fragment for a direct visit): what needs it, and where to go instead. */
/* 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; }
.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; }
@@ -1,4 +1,5 @@
@@ -1,4 +1,5 @@
<!-- #page-chat markup, loaded on first visit to the route (public/features.json). The server inlines it for direct visits. -->
<!-- #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">
<noscript><div class="chat-noscript">
<h2>OpenVibe.Live chat</h2>
<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
<p>The chat room and its voice channels need JavaScript, which is turned off in this browser: messages arrive live
@@ -22,7 +22,7 @@ for (const url of ['/', '/@someone', '/updates', '/content', '/clips', '/moments
@@ -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.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`);
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`);
assert.strictEqual(h1s(assets.renderRoute(doc, url)), 1, `${url}: its page's <h1> is there from the first paint`);
}
}