1
0
Fork 0
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:
Gaël Poupard 2020-03-23 15:23:37 +01:00 committed by GitHub
parent 25d2eac45b
commit 9eccb3a230
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 16 deletions

View file

@ -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;
}

View file

@ -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>

View file

@ -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) -}}

View file

@ -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 }}">

View file

@ -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 }}