Skip to content

Commit 0e96b0a

Browse files
pierrespierres
committed
Fix Bootstrap deprecations and improve accessibility
1 parent afae37e commit 0e96b0a

12 files changed

Lines changed: 38 additions & 51 deletions

File tree

‎internal/ui/compare/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ templ CompareContent(names []string, excessNames []string, data chartdata.Data)
1818
</a>
1919
</div>
2020
}
21-
<popularity-chart>
21+
<popularity-chart role="img" aria-label={ "Chart comparing popularity of " + strings.Join(names, ", ") + " over time" }>
2222
@templ.JSONScript("", data)
2323
</popularity-chart>
2424
<div class="mt-3">

‎internal/ui/components/popularity.templ‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@ package components
33
import "fmt"
44

55
templ PopularityBar(popularity float64) {
6-
<div class="progress bg-transparent progress-large" title={ fmt.Sprintf("%.2f%%", popularity) }>
6+
<div class="progress bg-transparent progress-large" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={ fmt.Sprintf("%.2f", popularity) } title={ fmt.Sprintf("%.2f%%", popularity) }>
77
<div
88
class="progress-bar"
9-
role="progressbar"
10-
aria-valuemin="0"
11-
aria-valuemax="100"
129
style={ fmt.Sprintf("width: %.2f%%", popularity) }
13-
aria-valuenow={ fmt.Sprintf("%.2f", popularity) }
1410
>
1511
if popularity > 5 {
1612
{ fmt.Sprintf("%.2f%%", popularity) }

‎internal/ui/countrypage/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "pkgstatsd/internal/countries"
55
templ CountriesContent(countryPopularities []countries.CountryPopularity) {
66
<h1 class="mb-4">Countries</h1>
77
<p>Explore the distribution of the submitted package statistics.</p>
8-
<country-map>
8+
<country-map role="img" aria-label="World map showing distribution of submitted package statistics by country">
99
@templ.JSONScript("", toSvgMapValues(countryPopularities))
1010
</country-map>
1111
}

‎internal/ui/fundetail/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ templ FunDetailCurrentContent(category string, topPkgs []packages.PackagePopular
2929
templ FunDetailHistoryContent(category string, data chartdata.Data, compareURL string) {
3030
<h1 class="mb-4">{ category } statistics</h1>
3131
@components.TabNav(funTabs(category, "history"))
32-
<popularity-chart>
32+
<popularity-chart role="img" aria-label={ category + " popularity over time" }>
3333
@templ.JSONScript("", data)
3434
</popularity-chart>
3535
@funCompareLink(compareURL)

‎internal/ui/gettingstarted/templates.templ‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,15 @@ templ GettingStartedContent() {
5353
<h1>Getting started</h1>
5454
</div>
5555
<div class="mb-4">
56-
<h4>Why contribute?</h4>
56+
<h2 class="h4">Why contribute?</h2>
5757
<p>
5858
By submitting anonymous usage data you help the Arch Linux community understand which packages,
5959
architectures, and mirrors are actually used. Maintainers rely on this data to prioritize
6060
their efforts.
6161
</p>
6262
</div>
6363
<div class="mb-4">
64-
<h4>Installation</h4>
64+
<h2 class="h4">Installation</h2>
6565
<pre><code>pacman -Syu <strong>pkgstats</strong></code></pre>
6666
<p>
6767
That's it. A weekly systemd timer is enabled automatically and will submit anonymous usage data
@@ -71,7 +71,7 @@ templ GettingStartedContent() {
7171
</p>
7272
</div>
7373
<div class="mb-4">
74-
<h4>Searching for packages</h4>
74+
<h2 class="h4">Searching for packages</h2>
7575
<p>The CLI client can be used to search for packages and show the most popular matches:</p>
7676
<pre>
7777
<code>
@@ -80,7 +80,7 @@ templ GettingStartedContent() {
8080
</pre>
8181
</div>
8282
<div class="mb-4">
83-
<h4>Comparing package statistics</h4>
83+
<h2 class="h4">Comparing package statistics</h2>
8484
<p>The popularity of one or more packages can be queried:</p>
8585
<pre>
8686
<code>
@@ -89,7 +89,7 @@ templ GettingStartedContent() {
8989
</pre>
9090
</div>
9191
<div class="mb-4">
92-
<h4>Inspecting submitted data</h4>
92+
<h2 class="h4">Inspecting submitted data</h2>
9393
<p>
9494
While the systemd timer automatically submits your data, you may want to inspect the data that are being
9595
sent:
@@ -108,12 +108,12 @@ templ GettingStartedContent() {
108108
</div>
109109
</div>
110110
<div class="col-12 col-xl-3">
111-
<h4>Documentation</h4>
111+
<h2 class="h4">Documentation</h2>
112112
<ul class="ps-4">
113113
<li><a href="https://wiki.archlinux.org/index.php/Pkgstats" rel="nofollow">Arch Linux Wiki</a></li>
114114
<li><a href="/api/doc">API documentation</a></li>
115115
</ul>
116-
<h4>Development</h4>
116+
<h2 class="h4">Development</h2>
117117
<ul class="ps-4">
118118
<li><a href="https://github.com/archlinux-de/pkgstats-cli" rel="nofollow">pkgstats CLI</a></li>
119119
<li><a href="https://github.com/archlinux-de/pkgstats.archlinux.de" rel="nofollow">pkgstats server</a></li>

‎internal/ui/layout/base.templ‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ templ Base(page Page, contents templ.Component) {
4343
}
4444
</head>
4545
<body>
46+
<a href="#content" class="visually-hidden-focusable">Skip to main content</a>
4647
<div id="page">
4748
@Navigation(page.Path)
4849
<main id="content" class="container">
@@ -68,7 +69,7 @@ templ JSTags(manifest *Manifest) {
6869
}
6970

7071
templ Navigation(path string) {
71-
<nav class="navbar navbar-expand-md navbar-dark navbar-border-brand bg-dark mb-4">
72+
<nav class="navbar navbar-expand-md navbar-border-brand bg-dark mb-4" data-bs-theme="dark">
7273
<div class="container-fluid">
7374
<a class="navbar-brand" href="/">
7475
<img alt="Arch Linux" height="40" width="190" src="/static/archlogo.svg" class="d-inline-block align-text-top"/>
@@ -101,7 +102,7 @@ templ navLink(currentPath, href, label string) {
101102

102103
templ Footer() {
103104
<footer id="footer">
104-
<nav class="nav justify-content-end mt-4">
105+
<nav class="nav justify-content-end mt-4" aria-label="Footer">
105106
<a class="nav-link" href="/api/doc">API</a>
106107
<a class="nav-link" href="/privacy-policy">Privacy policy</a>
107108
<a class="nav-link" href="/impressum">Impressum</a>

‎internal/ui/legal/templates.templ‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,22 @@ package legal
22

33
templ ImpressumContent() {
44
<h1 class="mb-4">Impressum</h1>
5-
<div class="d-inline-flex">
6-
<table class="table table-sm">
7-
<tbody>
8-
<tr>
9-
<th></th>
10-
<td>Pierre Schmitz</td>
11-
</tr>
12-
<tr>
13-
<th>Address</th>
14-
<td>
15-
Saarstr. 1
16-
<br/>
17-
53175 Bonn
18-
<br/>
19-
Germany
20-
</td>
21-
</tr>
22-
<tr>
23-
<th>Phone</th>
24-
<td>+49 228 9716608</td>
25-
</tr>
26-
<tr>
27-
<th>E-Mail</th>
28-
<td><a href="mailto:pierre@archlinux.de">pierre@archlinux.de</a></td>
29-
</tr>
30-
</tbody>
31-
</table>
32-
</div>
5+
<dl>
6+
<dt>Name</dt>
7+
<dd>Pierre Schmitz</dd>
8+
<dt>Address</dt>
9+
<dd>
10+
Saarstr. 1
11+
<br/>
12+
53175 Bonn
13+
<br/>
14+
Germany
15+
</dd>
16+
<dt>Phone</dt>
17+
<dd>+49 228 9716608</dd>
18+
<dt>E-Mail</dt>
19+
<dd><a href="mailto:pierre@archlinux.de">pierre@archlinux.de</a></dd>
20+
</dl>
3321
}
3422

3523
templ PrivacyPolicyContent() {

‎internal/ui/operatingsystems/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "pkgstatsd/internal/chartdata"
55
templ CompareContent(data chartdata.Data) {
66
<h1 class="mb-3">Compare Operating Systems</h1>
77
<p class="mb-3">Relative usage of operating system distributions</p>
8-
<popularity-chart>
8+
<popularity-chart role="img" aria-label="Chart showing relative usage of operating system distributions over time">
99
@templ.JSONScript("", data)
1010
</popularity-chart>
1111
}

‎internal/ui/packagedetail/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "pkgstatsd/internal/chartdata"
55
templ PackageDetailContent(name string, data chartdata.Data) {
66
<h1 class="mb-3">{ name }</h1>
77
<p class="mb-3">Relative usage of <strong>{ name }</strong></p>
8-
<popularity-chart>
8+
<popularity-chart role="img" aria-label={ "Chart showing popularity of " + name + " over time" }>
99
@templ.JSONScript("", data)
1010
</popularity-chart>
1111
}

‎internal/ui/packagepage/templates.templ‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@ templ PackagesContent(list *packages.PackagePopularityList, query string, curren
4949
<h2>Package Search</h2>
5050
<form method="GET" action="/packages" class="mb-4">
5151
<div class="input-group">
52-
<span class="input-group-text" id="package-search-label">Package name</span>
52+
<label class="input-group-text" for="package-search">Package name</label>
5353
<input
54+
id="package-search"
5455
class="form-control"
5556
type="search"
5657
name="query"
5758
placeholder="Search packages"
58-
aria-describedby="package-search-label"
5959
value={ query }
6060
/>
6161
if compare != "" {
@@ -100,6 +100,7 @@ templ CompareTable(pkgs []packages.PackagePopularity, query string, offset int,
100100
class="text-danger"
101101
href={ toggleURL(query, offset, limit, compare, pkg.Name) }
102102
title={ "Remove " + pkg.Name }
103+
aria-label={ "Remove " + pkg.Name }
103104
>
104105
@templ.Raw(iconTrash)
105106
</a>
@@ -134,6 +135,7 @@ templ PackageTable(pkgs []packages.PackagePopularity, query string, offset int,
134135
class="text-danger"
135136
href={ toggleURL(query, offset, limit, compare, pkg.Name) }
136137
title={ "Remove " + pkg.Name }
138+
aria-label={ "Remove " + pkg.Name }
137139
>
138140
@templ.Raw(iconTrash)
139141
</a>
@@ -142,6 +144,7 @@ templ PackageTable(pkgs []packages.PackagePopularity, query string, offset int,
142144
class="text-primary"
143145
href={ toggleURL(query, offset, limit, compare, pkg.Name) }
144146
title={ "Add " + pkg.Name }
147+
aria-label={ "Add " + pkg.Name }
145148
>
146149
@templ.Raw(iconPlus)
147150
</a>

0 commit comments

Comments
 (0)