Skip to content

Commit ec81207

Browse files
nginx-jacknginx-jack
committed
Sidebar: Add a11y to skip entire sidebar or toc
1 parent 670c10d commit ec81207

File tree

5 files changed

+70
-23
lines changed

5 files changed

+70
-23
lines changed

‎assets/css/v2/style.css‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -817,6 +817,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
817817

818818
.sidebar__content {
819819
padding: 0.5rem 0 0.4rem 0;
820+
margin-right: 0.25rem;
820821
}
821822

822823
.sidebar__ul {
@@ -837,7 +838,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
837838
width: 100%;
838839
text-align: left;
839840
padding: 0.25rem 0.5rem;
840-
border-radius: 5px 0 5px 0;
841+
border-radius: 5px 0 0 5px;
841842
font-weight: 500;
842843
color: var(--color-foreground);
843844

@@ -874,7 +875,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
874875
display: block;
875876
padding: 0.25rem 0.75rem;
876877
margin: 2px 0 2px 0;
877-
border-radius: 5px 0 5px 0;
878+
border-radius: 5px 0 0 5px;
878879
color: oklch(0 0 0 / 0.75);
879880
text-decoration: none;
880881
transition: background-color 0.2s ease, color 0.2s ease;
@@ -908,7 +909,6 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
908909
}
909910

910911
a {
911-
color: oklch(0 0 0 / 0.75);
912912
text-decoration: none;
913913
}
914914

@@ -1606,6 +1606,31 @@ hr {
16061606
margin: 0;
16071607
}
16081608

1609+
/* MARK: Accessibility
1610+
*/
1611+
1612+
.skip-link {
1613+
position: fixed;
1614+
top: 0;
1615+
left: 0;
1616+
background-color: var(--color-background);
1617+
color: var(--color-foreground);
1618+
padding: 1rem 1rem;
1619+
font-size: 1rem;
1620+
border: 2px solid var(--color-foreground);
1621+
z-index: 1000;
1622+
text-decoration: none;
1623+
border-radius: 0;
1624+
box-shadow: 3px 3px 0px var(--color-shadow);
1625+
opacity: 0;
1626+
pointer-events: none;
1627+
}
1628+
1629+
.skip-link:focus {
1630+
opacity: 1;
1631+
pointer-events: auto;
1632+
}
1633+
16091634
/* FILTHY HACKS BEGIN */
16101635

16111636
/* Override logo with black text version */

‎layouts/_default/docs.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
</nav>
7575
</div>
7676

77-
<section class="content-layout">
77+
<section id="maincontent" class="content-layout">
7878
<div data-cms-edit="content" class="text-content">
7979
<section class="breadcrumb-layout" data-mf="true" style="display: none;">
8080
{{ if not .IsHome }}

‎layouts/_default/list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</nav>
1919
</div>
2020

21-
<section class="content-layout" data-mf="true" style="display: none">
21+
<section id="maincontent" class="content-layout" data-mf="true" style="display: none">
2222
<div data-cms-edit="content" class="text-content list-page">
2323
<section class="breadcrumb-layout">
2424
{{ if not .IsHome }}

‎layouts/partials/sidebar-list.html‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
11
{{ $currentUrl := .currentUrl }}
2-
{{ $firstSection := .firstSection }}
32
{{ $currentPage := .currentPage }}
3+
{{ $firstSection := .firstSection }}
4+
{{ $idPrefix := .idPrefix }}
45

56
{{ with $firstSection }}
67
<ul class="sidebar__ul">
7-
{{ range .Pages.ByWeight }}
8-
{{- $onPage := eq $currentUrl .Permalink -}}
9-
{{- $isAncestor := .IsAncestor $currentPage -}}
8+
{{ $pages := .Pages.ByWeight }}
9+
{{ range $index, $p := $pages }}
10+
{{- $onPage := eq $currentUrl $p.Permalink -}}
11+
{{- $isAncestor := $p.IsAncestor $currentPage -}}
1012
{{- $shouldExpand := or $onPage $isAncestor -}}
11-
{{- $sectionID := printf "section-%s" (urlize .Permalink) -}}
13+
{{/* These variables are used to create a unique id to be attached to every link
14+
that accessibility users can correctly "Skip Table Of Contents" */}}
15+
{{- $sectionID := printf "%ssection-%s" $idPrefix (urlize $p.Permalink) -}}
16+
{{- $linkID := printf "%slink-%s" $idPrefix (urlize $p.Permalink) -}}
17+
{{- $nextIndex := add $index 1 -}}
18+
{{- $nextLink := index $pages $nextIndex -}}
1219

13-
{{ if eq .Kind "section" }}
20+
{{ if eq $p.Kind "section" }}
1421
<li class="sidebar__section">
1522
<button
23+
id="{{ $linkID }}"
1624
class="sidebar__toggle {{ if $isAncestor }}sidebar__toggle--ancestor{{ end }}"
1725
aria-expanded="{{ $shouldExpand }}"
1826
aria-controls="{{ $sectionID }}"
1927
>
20-
<span class="sidebar__toggle-text">{{ .Title }}</span>
28+
<span class="sidebar__toggle-text">{{ $p.Title }}</span>
2129
<span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}">
2230
{{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
2331
</span>
@@ -28,45 +36,57 @@
2836
{{ if not $shouldExpand }}hidden{{ end }}
2937
>
3038
{{ partial "sidebar-list.html" (dict
31-
"firstSection" . "currentUrl" $currentUrl "currentPage" $currentPage)
32-
}}
39+
"firstSection" $p
40+
"currentUrl" $currentUrl
41+
"currentPage" $currentPage
42+
"idPrefix" (printf "%s%s-" $idPrefix (urlize $p.Title))
43+
) }}
3344
</div>
3445
</li>
3546

36-
{{ else if eq .Kind "page" }}
47+
{{ else if eq $p.Kind "page" }}
48+
{{- $tocHasItems := (in $p.TableOfContents "<li>") -}}
49+
{{- $pageHasTOC := (and $onPage $tocHasItems $p.Params.toc) -}}
50+
{{- $tocID := printf "%stoc-%s" $idPrefix (urlize $p.Permalink) -}}
3751
<li class="sidebar__page">
38-
{{- $pageHasTOC := (and $onPage .TableOfContents) -}}
39-
{{- $tocID := printf "toc-%s" (urlize .Permalink) -}}
40-
{{- if $pageHasTOC }}
52+
{{ if $pageHasTOC }}
4153
<button
4254
class="sidebar__toggle sidebar__link sidebar__link--current"
4355
aria-expanded="true"
4456
aria-controls="{{ $tocID }}"
57+
id="{{ $linkID }}"
4558
>
46-
<span>{{ .Title }}</span>
59+
<span>{{ $p.Title }}</span>
4760
<span class="sidebar__chevron sidebar__chevron--open">
4861
{{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
4962
</span>
5063
</button>
5164
<div id="{{ $tocID }}" class="sidebar__toc">
52-
{{ .TableOfContents }}
65+
{{ if $nextLink }}
66+
{{- $nextLinkID := printf "%slink-%s" $idPrefix (urlize $nextLink.Permalink) -}}
67+
<a class="skip-link" href="#{{ $nextLinkID }}">Skip Table of Contents</a>
68+
{{ else }}
69+
<a class="skip-link" href="#maincontent">Skip Table of Contents</a>
70+
{{ end }}
71+
{{ $p.TableOfContents }}
5372
</div>
5473
{{ else }}
5574
<a
56-
href="{{ .Permalink }}"
75+
href="{{ $p.Permalink }}"
76+
id="{{ $linkID }}"
5777
class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
5878
{{ if $onPage }}aria-current="page"{{ end }}
5979
>
60-
{{ .Title }}
80+
{{ $p.Title }}
6181
</a>
6282
{{ end }}
6383
</li>
6484
{{ end }}
85+
6586
{{ end }}
6687
</ul>
6788
{{ end }}
6889

69-
7090
{{/* {{ if gt (.WordCount) 0 }}
7191
<ul>
7292
<li>

‎layouts/partials/sidebar-v2.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@
2323

2424
<div class="sidebar__container">
2525
<div class="sidebar__content">
26+
<a class="skip-link" href="#maincontent">Skip Navigation</a>
2627
{{ partial "sidebar-list.html" (dict
2728
"firstSection" .FirstSection
2829
"currentUrl" .Permalink
2930
"currentPage" .
31+
"idPrefix" ""
3032
) }}
3133
</div>
3234
</div>

0 commit comments

Comments
 (0)