tools: add "skip to content" link for screan reader and tui browsers (#12571)

Eragonfr · web-flow · commit fb3a793a2733 · 2021-11-25T02:53:02.000+02:00
diff --git a/cmd/tools/vdoc/html.v b/cmd/tools/vdoc/html.v
@@ -37,6 +37,7 @@ const (
 		{{ head_assets }}
 	</head>
 	<body>
+		<div><a id="skip-to-content-link" href="#main-content">Skip to content</a></div>
 		<div id="page">
 			<header class="doc-nav hidden">
 				<div class="heading-container">
@@ -59,7 +60,7 @@ const (
 					</ul>
 				</nav>
 			</header>
-			<div class="doc-scrollview">
+			<div class="doc-scrollview" id="main-content">
 				<div class="doc-container">
 					<div class="doc-content">
 {{ contents }}
diff --git a/cmd/tools/vdoc/resources/doc.css b/cmd/tools/vdoc/resources/doc.css
@@ -730,3 +730,19 @@ pre {
     top: 0;
   }
 }
+
+#skip-to-content-link {
+  height: 30px;
+  left: 50%;
+  padding: 8px;
+  position: absolute;
+  transform: translateY(-100%);
+  transition: transform 0.3s;
+  background: var(--links);
+  color: var(--warn-text);
+  border-radius: 1px;
+}
+#skip-to-content-link:focus {
+  transform: translateY(0%);
+  z-index: 1000;
+}
