Fossil SCM

Applied the header and footer improvements from the [wcag-2.1] branch. Changes generic divs with class labels into semantic elements that a browser can then treat specially, given their meaning.

wyoung 2024-02-10 08:55 inskinerator-modern-backport
Commit b48e48366762d32a844d3c0408d39f8ee714d0d14101755392d6537f0eaad905
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -71,11 +71,11 @@
7171
.mainmenu a.active,
7272
.mainmenu a:hover {
7373
color: #000;
7474
border-bottom: 2px solid #D26911;
7575
}
76
-div#hbdrop {
76
+nav#hbdrop {
7777
background-color: white;
7878
border: 1px solid black;
7979
border-top: white;
8080
border-radius: 0 0 0.5em 0.5em;
8181
display: none;
@@ -153,11 +153,11 @@
153153
}
154154
155155
156156
/* Page footer */
157157
158
-.footer {
158
+footer {
159159
border-top: 1px solid #ccc;
160160
padding: 10px;
161161
font-size: 0.8em;
162162
margin-top: 10px;
163163
color: #ccc;
164164
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -71,11 +71,11 @@
71 .mainmenu a.active,
72 .mainmenu a:hover {
73 color: #000;
74 border-bottom: 2px solid #D26911;
75 }
76 div#hbdrop {
77 background-color: white;
78 border: 1px solid black;
79 border-top: white;
80 border-radius: 0 0 0.5em 0.5em;
81 display: none;
@@ -153,11 +153,11 @@
153 }
154
155
156 /* Page footer */
157
158 .footer {
159 border-top: 1px solid #ccc;
160 padding: 10px;
161 font-size: 0.8em;
162 margin-top: 10px;
163 color: #ccc;
164
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -71,11 +71,11 @@
71 .mainmenu a.active,
72 .mainmenu a:hover {
73 color: #000;
74 border-bottom: 2px solid #D26911;
75 }
76 nav#hbdrop {
77 background-color: white;
78 border: 1px solid black;
79 border-top: white;
80 border-radius: 0 0 0.5em 0.5em;
81 display: none;
@@ -153,11 +153,11 @@
153 }
154
155
156 /* Page footer */
157
158 footer {
159 border-top: 1px solid #ccc;
160 padding: 10px;
161 font-size: 0.8em;
162 margin-top: 10px;
163 color: #ccc;
164
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -1,5 +1,5 @@
1
-<div class="footer">
1
+<footer>
22
This page was generated in about
33
<th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
44
Fossil $release_version $manifest_version $manifest_date
5
-</div>
5
+</footer>
66
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -1,5 +1,5 @@
1 <div class="footer">
2 This page was generated in about
3 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
4 Fossil $release_version $manifest_version $manifest_date
5 </div>
6
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -1,5 +1,5 @@
1 <footer>
2 This page was generated in about
3 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
4 Fossil $release_version $manifest_version $manifest_date
5 </footer>
6
--- skins/default/header.txt
+++ skins/default/header.txt
@@ -1,6 +1,6 @@
1
-<div class="header">
1
+<header>
22
<div class="logo">
33
<th1>
44
## See skins/original/header.txt for commentary; not repeated here.
55
proc getLogoUrl { baseurl } {
66
set idx(first) [string first // $baseurl]
@@ -42,12 +42,12 @@
4242
html "<a href='$home/login'>$login</a>\n"
4343
} else {
4444
html "<a href='$home/login'>Login</a>\n"
4545
}
4646
</th1></div>
47
-</div>
48
-<div class="mainmenu">
47
+</header>
48
+<nav class="mainmenu" title="Main Menu">
4949
<th1>
5050
html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
5151
builtin_request_js hbmenu.js
5252
foreach {name url expr class} $mainmenu {
5353
if {![capexpr $expr]} continue
@@ -57,8 +57,8 @@
5757
}
5858
set url $home$url
5959
}
6060
html "<a href='$url' class='$class'>$name</a>\n"
6161
}
62
-</th1></div>
63
-<div id='hbdrop'></div>
62
+</th1></nav>
63
+<nav id="hbdrop" title="sitemap"></nav>
6464
<h1 class="page-title">$<title></h1>
6565
--- skins/default/header.txt
+++ skins/default/header.txt
@@ -1,6 +1,6 @@
1 <div class="header">
2 <div class="logo">
3 <th1>
4 ## See skins/original/header.txt for commentary; not repeated here.
5 proc getLogoUrl { baseurl } {
6 set idx(first) [string first // $baseurl]
@@ -42,12 +42,12 @@
42 html "<a href='$home/login'>$login</a>\n"
43 } else {
44 html "<a href='$home/login'>Login</a>\n"
45 }
46 </th1></div>
47 </div>
48 <div class="mainmenu">
49 <th1>
50 html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
51 builtin_request_js hbmenu.js
52 foreach {name url expr class} $mainmenu {
53 if {![capexpr $expr]} continue
@@ -57,8 +57,8 @@
57 }
58 set url $home$url
59 }
60 html "<a href='$url' class='$class'>$name</a>\n"
61 }
62 </th1></div>
63 <div id='hbdrop'></div>
64 <h1 class="page-title">$<title></h1>
65
--- skins/default/header.txt
+++ skins/default/header.txt
@@ -1,6 +1,6 @@
1 <header>
2 <div class="logo">
3 <th1>
4 ## See skins/original/header.txt for commentary; not repeated here.
5 proc getLogoUrl { baseurl } {
6 set idx(first) [string first // $baseurl]
@@ -42,12 +42,12 @@
42 html "<a href='$home/login'>$login</a>\n"
43 } else {
44 html "<a href='$home/login'>Login</a>\n"
45 }
46 </th1></div>
47 </header>
48 <nav class="mainmenu" title="Main Menu">
49 <th1>
50 html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
51 builtin_request_js hbmenu.js
52 foreach {name url expr class} $mainmenu {
53 if {![capexpr $expr]} continue
@@ -57,8 +57,8 @@
57 }
58 set url $home$url
59 }
60 html "<a href='$url' class='$class'>$name</a>\n"
61 }
62 </th1></nav>
63 <nav id="hbdrop" title="sitemap"></nav>
64 <h1 class="page-title">$<title></h1>
65
+2 -2
--- src/hbmenu.js
+++ src/hbmenu.js
@@ -21,14 +21,14 @@
2121
** moved into src/hbmenu.js so that it could be more easily reused by other skins
2222
** using the "builtin_request_js" TH1 command.
2323
**
2424
** Operation:
2525
**
26
-** This script request that the HTML contain two elements:
26
+** This script expects the HTML to contain two elements:
2727
**
2828
** <a id="hbbtn"> <--- The hamburger menu button
29
-** <div id="hbdrop"> <--- Container for the hamburger menu
29
+** <nav id="hbdrop"> <--- Container for the hamburger menu
3030
**
3131
** Bindings are made on hbbtn so that when it is clicked, the following
3232
** happens:
3333
**
3434
** 1. An XHR is made to /sitemap?popup to fetch the HTML for the
3535
--- src/hbmenu.js
+++ src/hbmenu.js
@@ -21,14 +21,14 @@
21 ** moved into src/hbmenu.js so that it could be more easily reused by other skins
22 ** using the "builtin_request_js" TH1 command.
23 **
24 ** Operation:
25 **
26 ** This script request that the HTML contain two elements:
27 **
28 ** <a id="hbbtn"> <--- The hamburger menu button
29 ** <div id="hbdrop"> <--- Container for the hamburger menu
30 **
31 ** Bindings are made on hbbtn so that when it is clicked, the following
32 ** happens:
33 **
34 ** 1. An XHR is made to /sitemap?popup to fetch the HTML for the
35
--- src/hbmenu.js
+++ src/hbmenu.js
@@ -21,14 +21,14 @@
21 ** moved into src/hbmenu.js so that it could be more easily reused by other skins
22 ** using the "builtin_request_js" TH1 command.
23 **
24 ** Operation:
25 **
26 ** This script expects the HTML to contain two elements:
27 **
28 ** <a id="hbbtn"> <--- The hamburger menu button
29 ** <nav id="hbdrop"> <--- Container for the hamburger menu
30 **
31 ** Bindings are made on hbbtn so that when it is clicked, the following
32 ** happens:
33 **
34 ** 1. An XHR is made to /sitemap?popup to fetch the HTML for the
35

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button