Skip to content

Commit 0789bc5

Browse files
mbostockmbostock
authored
title toggle keyboard shortcut (#592)
1 parent 384db59 commit 0789bc5

31 files changed

+45
-32
lines changed

‎src/client/sidebar.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,18 @@ if (toggle) {
2020
event.preventDefault();
2121
}
2222
});
23+
const title = `Toggle sidebar ${
24+
/Mac|iPhone/.test(navigator.platform)
25+
? /Firefox/.test(navigator.userAgent)
26+
? "⌥" // option symbol for mac firefox
27+
: "⌘" // command symbol for mac other
28+
: "Alt-" // for other os or browser
29+
}B`;
30+
for (const label of document.querySelectorAll(
31+
"#observablehq-sidebar-toggle, label[for='observablehq-sidebar-toggle']"
32+
)) {
33+
label.title = title;
34+
}
2335
}
2436

2537
// Prevent double-clicking the summary toggle from selecting text.

‎src/render.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,8 @@ async function renderSidebar(title = "Home", pages: (Page | Section)[], path: st
104104
return html`<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
105105
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
106106
<nav id="observablehq-sidebar">
107-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
108107
<ol>
108+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
109109
<li class="observablehq-link${
110110
normalizePath(path) === "/index" ? " observablehq-link-active" : ""
111111
}"><a href="${relativeUrl(path, "/")}">${title}</a></li>

‎src/style/layout.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
border-bottom: solid 1px var(--theme-foreground-faintest);
111111
}
112112

113-
#observablehq-sidebar > ol:first-of-type {
113+
#observablehq-sidebar > ol:first-child {
114114
position: sticky;
115115
top: 0;
116116
z-index: 1;
@@ -179,14 +179,15 @@
179179
}
180180

181181
#observablehq-sidebar-close {
182-
position: fixed;
182+
position: absolute;
183183
top: 1rem;
184-
left: calc(272px - 2.7rem);
184+
right: 0;
185185
width: 2rem;
186186
height: 2.2rem;
187187
display: flex;
188188
align-items: center;
189189
justify-content: center;
190+
color: var(--theme-foreground-muted);
190191
cursor: w-resize;
191192
z-index: 2;
192193
}

‎test/output/build/archives/tar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
6161
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
6262
<nav id="observablehq-sidebar">
63-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
6463
<ol>
64+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
6565
<li class="observablehq-link"><a href="./">Home</a></li>
6666
</ol>
6767
<ol>

‎test/output/build/archives/zip.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
4747
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
4848
<nav id="observablehq-sidebar">
49-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
5049
<ol>
50+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
5151
<li class="observablehq-link"><a href="./">Home</a></li>
5252
</ol>
5353
<ol>

‎test/output/build/config/closed/page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/config/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link observablehq-link-active"><a href="./">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/config/one.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="./">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/config/sub/two.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/config/toc-override.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="./">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/config/toc.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="./">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/fetches/foo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
2828
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2929
<nav id="observablehq-sidebar">
30-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3130
<ol>
31+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3232
<li class="observablehq-link"><a href="./">Home</a></li>
3333
</ol>
3434
<ol>

‎test/output/build/fetches/top.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
3131
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
3232
<nav id="observablehq-sidebar">
33-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3433
<ol>
34+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3535
<li class="observablehq-link"><a href="./">Home</a></li>
3636
</ol>
3737
<ol>

‎test/output/build/files/files.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
3030
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
3131
<nav id="observablehq-sidebar">
32-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3332
<ol>
33+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3434
<li class="observablehq-link"><a href="./">Home</a></li>
3535
</ol>
3636
<ol>

‎test/output/build/files/subsection/subfiles.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
3030
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
3131
<nav id="observablehq-sidebar">
32-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3332
<ol>
33+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3434
<li class="observablehq-link"><a href="../">Home</a></li>
3535
</ol>
3636
<ol>

‎test/output/build/imports/foo/foo.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
3333
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
3434
<nav id="observablehq-sidebar">
35-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3635
<ol>
36+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3737
<li class="observablehq-link"><a href="../">Home</a></li>
3838
</ol>
3939
<ol>

‎test/output/build/multi/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
3535
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
3636
<nav id="observablehq-sidebar">
37-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3837
<ol>
38+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3939
<li class="observablehq-link observablehq-link-active"><a href="./">Home</a></li>
4040
</ol>
4141
<ol>

‎test/output/build/multi/subsection/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link observablehq-link-active"><a href="./">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page0.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page1..10.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page1.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page2.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page3.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page4.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page5.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page6.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page7.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/pager/sub/page8.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
1919
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2020
<nav id="observablehq-sidebar">
21-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2221
<ol>
22+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
2323
<li class="observablehq-link"><a href="../">Home</a></li>
2424
</ol>
2525
<ol>

‎test/output/build/simple/simple.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
2828
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
2929
<nav id="observablehq-sidebar">
30-
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3130
<ol>
31+
<label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
3232
<li class="observablehq-link"><a href="./">Home</a></li>
3333
</ol>
3434
<ol>

0 commit comments

Comments
 (0)