kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Documentation skip links (#30073)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
site/assets/scss/_skippy.scss
View file

@ -1,17 +1,13 @@
.skippy { .skippy {
display: block; position: fixed;
padding: 1em; top: .5rem;
left: .5rem;
z-index: $zindex-fixed;
padding: .5rem;
color: $white; color: $white;
text-align: center;
background-color: $bd-purple; background-color: $bd-purple;
outline: 0;
&:hover { &:hover {
color: $white; color: $white;
} }
} }
.skippy-text {
padding: .5em;
outline: 1px dotted;
}

4
site/layouts/partials/docs-navbar.html
View file

@ -1,5 +1,5 @@
<header class="navbar navbar-expand navbar-dark bd-navbar"> <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"> <a class="navbar-brand mr-2" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }} {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
</a> </a>
@ -54,5 +54,5 @@
</ul> </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> <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> </header>

2
site/layouts/partials/docs-sidebar.html
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 "/" -}} {{- $url := split .Permalink "/" -}}
{{- $page_slug := index $url (sub (len $url) 2) -}} {{- $page_slug := index $url (sub (len $url) 2) -}}

2
site/layouts/partials/docs-subnav.html
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"> <div class="container-xl d-flex align-items-md-center flex-wrap">
<form class="bd-search mb-2 mb-md-0 mr-auto"> <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 }}"> <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 }}">

8
site/layouts/partials/skippy.html
View file

@ -1,3 +1,5 @@
<a class="skippy sr-only-focusable" href="#content"> <a class="skippy sr-only-focusable" href="#content">Skip to main content</a>
<span class="skippy-text">Skip to main content</span>
</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 }}