tools: add "skip to content" link for screan reader and tui browsers (#12571)
parent
11d70624af
commit
fb3a793a27
|
@ -37,6 +37,7 @@ const (
|
||||||
{{ head_assets }}
|
{{ head_assets }}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div><a id="skip-to-content-link" href="#main-content">Skip to content</a></div>
|
||||||
<div id="page">
|
<div id="page">
|
||||||
<header class="doc-nav hidden">
|
<header class="doc-nav hidden">
|
||||||
<div class="heading-container">
|
<div class="heading-container">
|
||||||
|
@ -59,7 +60,7 @@ const (
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<div class="doc-scrollview">
|
<div class="doc-scrollview" id="main-content">
|
||||||
<div class="doc-container">
|
<div class="doc-container">
|
||||||
<div class="doc-content">
|
<div class="doc-content">
|
||||||
{{ contents }}
|
{{ contents }}
|
||||||
|
|
|
@ -730,3 +730,19 @@ pre {
|
||||||
top: 0;
|
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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue