Skip to content

Commit d7bbf2b

Browse files
svilenmarkovsvilenmarkov
committed
Accessibility improvements
1 parent b8df343 commit d7bbf2b

File tree

7 files changed

+47
-26
lines changed

7 files changed

+47
-26
lines changed

‎internal/glance/glance.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ func newApplication(config *config) (*application, error) {
6868

6969
for w := range column.Widgets {
7070
widget := column.Widgets[w]
71-
app.widgetByID[widget.id()] = widget
71+
app.widgetByID[widget.GetID()] = widget
7272

7373
widget.setProviders(providers)
7474
}

‎internal/glance/static/js/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,9 @@ function setupGroups() {
284284

285285
for (let i = 0; i < titles.length; i++) {
286286
titles[i].classList.remove("widget-group-title-current");
287+
titles[i].setAttribute("aria-selected", "false");
287288
tabs[i].classList.remove("widget-group-content-current");
289+
tabs[i].setAttribute("aria-hidden", "true");
288290
}
289291

290292
if (current < t) {
@@ -296,7 +298,9 @@ function setupGroups() {
296298
current = t;
297299

298300
title.classList.add("widget-group-title-current");
301+
title.setAttribute("aria-selected", "true");
299302
tabs[t].classList.add("widget-group-content-current");
303+
tabs[t].setAttribute("aria-hidden", "false");
300304
});
301305
}
302306
}
@@ -670,6 +674,7 @@ async function setupPage() {
670674
setupLazyImages();
671675
} finally {
672676
pageElement.classList.add("content-ready");
677+
pageElement.setAttribute("aria-busy", "false");
673678

674679
for (let i = 0; i < contentReadyCallbacks.length; i++) {
675680
contentReadyCallbacks[i]();

‎internal/glance/static/main.css‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
.visited-indicator:not(.text-truncate)::after,
111111
.visited-indicator.text-truncate::before,
112112
.bookmarks-link:not(.bookmarks-link-no-arrow)::after {
113-
content: '↗';
113+
content: '↗' / "";
114114
margin-left: 0.5em;
115115
display: inline-block;
116116
position: relative;
@@ -189,7 +189,7 @@
189189
}
190190

191191
.expand-toggle-button-icon::before {
192-
content: '';
192+
content: '' / "";
193193
font-size: 0.8rem;
194194
transform: rotate(90deg);
195195
line-height: 1;
@@ -341,6 +341,19 @@ html, body, .body-content {
341341
height: 100%;
342342
}
343343

344+
h1, h2, h3, h4, h5 {
345+
font: inherit;
346+
}
347+
348+
.visually-hidden {
349+
clip-path: inset(50%);
350+
height: 1px;
351+
overflow: hidden;
352+
position: absolute;
353+
white-space: nowrap;
354+
width: 1px;
355+
}
356+
344357
a {
345358
text-decoration: none;
346359
color: inherit;
@@ -563,7 +576,7 @@ kbd:active {
563576
}
564577

565578
.summary::after {
566-
content: "◀";
579+
content: "◀" / "";
567580
font-size: 1.2em;
568581
position: absolute;
569582
top: 0;
@@ -822,7 +835,7 @@ details[open] .summary::after {
822835
}
823836

824837
.list-horizontal-text > *:not(:last-child)::after {
825-
content: '•';
838+
content: '•' / "";
826839
color: var(--color-text-subdue);
827840
margin: 0 0.4rem;
828841
position: relative;

‎internal/glance/templates/group.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@
44

55
{{ define "widget-content" }}
66
<div class="widget-group-header">
7-
<div class="widget-header gap-20">
8-
{{ range $i, $widget := .Widgets }}
9-
<button class="widget-group-title{{ if eq $i 0 }} widget-group-title-current{{ end }}"{{ if ne "" .TitleURL }} data-title-url="{{ .TitleURL }}"{{ end }}>{{ $widget.Title }}</button>
10-
{{ end }}
7+
<div class="widget-header gap-20" role="tablist">
8+
{{- range $i, $widget := .Widgets }}
9+
<button class="widget-group-title{{ if eq $i 0 }} widget-group-title-current{{ end }}"{{ if ne "" .TitleURL }} data-title-url="{{ .TitleURL }}"{{ end }} aria-selected="{{ if eq $i 0 }}true{{ else }}false{{ end }}" arial-level="2" role="tab" aria-controls="widget-{{ .GetID }}-tabpanel-{{ $i }}" id="widget-{{ .GetID }}-tab-{{ $i }}">{{ $widget.Title }}</button>
10+
{{- end }}
1111
</div>
1212
</div>
1313

1414
<div class="widget-group-contents">
15-
{{ range $i, $widget := .Widgets }}
16-
<div class="widget-group-content{{ if eq $i 0 }} widget-group-content-current{{ end }}">{{ .Render }}</div>
17-
{{ end }}
15+
{{- range $i, $widget := .Widgets }}
16+
<div class="widget-group-content{{ if eq $i 0 }} widget-group-content-current{{ end }}" id="widget-{{ .GetID }}-tabpanel-{{ $i }}" role="tabpanel" aria-labelledby="widget-{{ .GetID }}-tab-{{ $i }}" aria-hidden="{{ if eq $i 0 }}false{{ else }}true{{ end }}">
17+
{{- .Render -}}
18+
</div>
19+
{{- end }}
1820
</div>
19-
2021
{{ end }}

‎internal/glance/templates/page.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
{{ define "navigation-links" }}
2727
{{ range .App.Config.Pages }}
28-
<a href="{{ $.App.Config.Server.BaseURL }}/{{ .Slug }}" class="nav-item{{ if eq .Slug $.Page.Slug }} nav-item-current{{ end }}">{{ .Title }}</a>
28+
<a href="{{ $.App.Config.Server.BaseURL }}/{{ .Slug }}" class="nav-item{{ if eq .Slug $.Page.Slug }} nav-item-current{{ end }}"{{ if eq .Slug $.Page.Slug }} aria-current="page"{{ end }}>{{ .Title }}</a>
2929
{{ end }}
3030
{{ end }}
3131

@@ -35,10 +35,10 @@
3535
<div class="header-container content-bounds">
3636
<div class="header flex padding-inline-widget widget-content-frame">
3737
<!-- TODO: Replace G with actual logo, first need an actual logo -->
38-
<div class="logo">{{ if ne "" .App.Config.Branding.LogoURL }}<img src="{{ .App.Config.Branding.LogoURL }}" alt="">{{ else if ne "" .App.Config.Branding.LogoText }}{{ .App.Config.Branding.LogoText }}{{ else }}G{{ end }}</div>
39-
<div class="nav flex grow">
38+
<div class="logo" aria-hidden="true">{{ if ne "" .App.Config.Branding.LogoURL }}<img src="{{ .App.Config.Branding.LogoURL }}" alt="">{{ else if ne "" .App.Config.Branding.LogoText }}{{ .App.Config.Branding.LogoText }}{{ else }}G{{ end }}</div>
39+
<nav class="nav flex grow">
4040
{{ template "navigation-links" . }}
41-
</div>
41+
</nav>
4242
</div>
4343
</div>
4444
{{ end }}
@@ -57,25 +57,27 @@
5757
</div>
5858

5959
<div class="content-bounds grow">
60-
<div class="page" id="page">
60+
<main class="page" id="page" aria-live="polite" aria-busy="true">
61+
<h1 class="visually-hidden">{{ .Page.Title }}</h1>
6162
<div class="page-content" id="page-content"></div>
6263
<div class="page-loading-container">
6364
<!-- TODO: add a bigger/better loading indicator -->
64-
<div class="loading-icon"></div>
65+
<div class="visually-hidden">Loading</div>
66+
<div class="loading-icon" aria-hidden="true"></div>
6567
</div>
66-
</div>
68+
</main>
6769
</div>
6870

6971
{{ if not .App.Config.Branding.HideFooter }}
70-
<div class="footer flex items-center flex-column">
72+
<footer class="footer flex items-center flex-column">
7173
{{ if eq "" .App.Config.Branding.CustomFooter }}
7274
<div>
7375
<a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
7476
</div>
7577
{{ else }}
7678
{{ .App.Config.Branding.CustomFooter }}
7779
{{ end }}
78-
</div>
80+
</footer>
7981
{{ end }}
8082

8183
<div class="mobile-navigation-offset"></div>

‎internal/glance/templates/widget-base.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
{{- if not .HideHeader}}
33
<div class="widget-header">
44
{{- if ne "" .TitleURL }}
5-
<a href="{{ .TitleURL | safeURL }}" target="_blank" rel="noreferrer" class="uppercase">{{ .Title }}</a>
5+
<h2><a href="{{ .TitleURL | safeURL }}" target="_blank" rel="noreferrer" class="uppercase">{{ .Title }}</a></h2>
66
{{- else }}
7-
<div class="uppercase">{{ .Title }}</div>
7+
<h2 class="uppercase">{{ .Title }}</h2>
88
{{- end }}
99
{{- if .IsWIP }}
1010
<div data-popover-type="html" data-popover-position="above">

‎internal/glance/widget.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,13 +121,13 @@ type widget interface {
121121
// These need to be exported because they get called in templates
122122
Render() template.HTML
123123
GetType() string
124+
GetID() uint64
124125

125126
initialize() error
126127
requiresUpdate(*time.Time) bool
127128
setProviders(*widgetProviders)
128129
update(context.Context)
129130
setID(uint64)
130-
id() uint64
131131
handleRequest(w http.ResponseWriter, r *http.Request)
132132
setHideHeader(bool)
133133
}
@@ -184,7 +184,7 @@ func (w *widgetBase) update(ctx context.Context) {
184184

185185
}
186186

187-
func (w *widgetBase) id() uint64 {
187+
func (w *widgetBase) GetID() uint64 {
188188
return w.ID
189189
}
190190

0 commit comments

Comments
 (0)