mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Documentation skip links (#30073)
* docs(skip-links): add a skip to main navigation skip link * docs(skip-links): revamp skip-links pattern * docs(navs): use aria-label on navs * docs(navs): use 'docs navigation' label in sidebar nav
This commit is contained in:
parent
25d2eac45b
commit
9eccb3a230
5 changed files with 14 additions and 16 deletions
|
@ -1,17 +1,13 @@
|
|||
.skippy {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
position: fixed;
|
||||
top: .5rem;
|
||||
left: .5rem;
|
||||
z-index: $zindex-fixed;
|
||||
padding: .5rem;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
background-color: $bd-purple;
|
||||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.skippy-text {
|
||||
padding: .5em;
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<header class="navbar navbar-expand navbar-dark bd-navbar">
|
||||
<div class="container-xl flex-wrap flex-md-nowrap">
|
||||
<nav class="container-xl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||||
<a class="navbar-brand mr-2" href="/" aria-label="Bootstrap">
|
||||
{{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
|
||||
</a>
|
||||
|
@ -54,5 +54,5 @@
|
|||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
|
||||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
|
||||
{{- $url := split .Permalink "/" -}}
|
||||
{{- $page_slug := index $url (sub (len $url) 2) -}}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
|
||||
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2" aria-label="Secondary navigation">
|
||||
<div class="container-xl d-flex align-items-md-center flex-wrap">
|
||||
<form class="bd-search mb-2 mb-md-0 mr-auto">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
<a class="skippy sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<a class="skippy sr-only-focusable" href="#content">Skip to main content</a>
|
||||
|
||||
{{ if (eq .Page.Layout "docs") }}
|
||||
<a class="skippy sr-only-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
|
||||
{{- end }}
|
||||
|
|
Loading…
Reference in a new issue