Skip to content

Commit 3d8d1e4

Browse files
marijnhmarijnh
committed
Improve accessibility of chapters
1 parent bb4ae56 commit 3d8d1e4

8 files changed

Lines changed: 138 additions & 140 deletions

File tree

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ all: html book.pdf book_mobile.pdf book.epub book.mobi
77
html: $(foreach CHAP,$(CHAPTERS),html/$(CHAP).html) html/ejs.js \
88
code/skillsharing.zip code/solutions/20_3_a_public_space_on_the_web.zip html/code/chapter_info.js
99

10-
html/%.html: %.md
10+
html/%.html: %.md src/render_html.mjs src/chapter.html
1111
node src/render_html.mjs $< > $@
1212
node src/build_code.mjs $<
1313

‎code/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h1>Code Sandbox<div style="font-size: 70%"><a class="subtlelink" href="../index
3838

3939
<div class="editor-wrap">
4040
<div id="editor"></div>
41-
<div class="sandbox-output" id="output"></div>
41+
<div class="sandbox-output" id="output" aria-live=polite></div>
4242
</div>
4343

4444
<div id="runLocally">

‎html/css/ejs.css‎

Lines changed: 43 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,36 @@ nav a {
4545
text-decoration: none !important;
4646
}
4747

48+
nav button {
49+
background: transparent;
50+
color: #aaa;
51+
border: none;
52+
cursor: pointer;
53+
}
54+
55+
nav button.help {
56+
display: none;
57+
}
58+
59+
div.popup {
60+
position: fixed;
61+
left: 0; right: 0; top: 50px;
62+
max-width: min(35rem, 90%);
63+
margin: auto;
64+
border: 1px solid #4ab;
65+
padding: 0 1em 1em;
66+
background: white;
67+
max-height: 80%;
68+
overflow-y: auto;
69+
overflow-x: hidden;
70+
}
71+
72+
div.popup kbd {
73+
font-weight: bold;
74+
font-family: 'PT Mono', monospace;
75+
font-size: 18px;
76+
}
77+
4878
a.subtlelink {
4979
color: black !important;
5080
text-decoration: none !important;
@@ -82,7 +112,7 @@ p:hover a.p_ident:after, pre:hover a.c_ident:after, h2:hover a.h_ident:after, h3
82112
}
83113

84114

85-
code, pre, .cm-editor {
115+
code, pre, .cm-editor .cm-content, .cm-editor {
86116
font-size: 18px;
87117
font-family: 'PT Mono', monospace;
88118
}
@@ -108,13 +138,13 @@ h3 {
108138
font-size: 100%;
109139
}
110140

111-
pre.cm-s-default, p, h2, h3 {
141+
pre.snippet, p, h2, h3 {
112142
margin-right: -30px;
113143
padding-right: 30px;
114144
}
115145

116146
@media screen and (max-width: 800px) {
117-
pre.cm-s-default, p, h2, h3 {
147+
pre.snippet, p, h2, h3 {
118148
margin-right: 0;
119149
padding-right: 0;
120150
}
@@ -204,12 +234,8 @@ blockquote footer:before {
204234
}
205235

206236
.editor-wrap {
207-
margin: 1rem 0;
237+
margin: 1rem 0 1rem -18px;
208238
position: relative;
209-
-moz-transition: margin-left .5s ease-out, margin-right .5s ease-out;
210-
-webkit-transition: margin-left .5s ease-out, margin-right .5s ease-out;
211-
-o-transition: margin-left .5s ease-out, margin-right .5s ease-out;
212-
transition: margin-left .5s ease-out, margin-right .5s ease-out;
213239
border-bottom: 1px solid #4ab;
214240
}
215241

@@ -274,42 +300,6 @@ blockquote footer:before {
274300
text-align: right;
275301
}
276302

277-
.sandbox-menu {
278-
position: absolute;
279-
z-index: 19;
280-
right: -13px; top: -1px;
281-
cursor: pointer;
282-
font-size: 80%;
283-
overflow: hidden;
284-
width: 10px;
285-
border-top: 2px solid #4ab;
286-
height: 2px;
287-
border-bottom: 6px double #4ab;
288-
}
289-
290-
.sandbox-open-menu {
291-
font-family: tahoma, arial, sans-serif;
292-
position: absolute;
293-
background: white;
294-
border: 1px solid #aaa;
295-
box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
296-
padding: 0;
297-
font-size: 75%;
298-
color: black;
299-
line-height: 1.3;
300-
right: -9px; top: 5px;
301-
z-index: 20;
302-
}
303-
304-
.sandbox-open-menu div {
305-
cursor: pointer;
306-
padding: 5px 10px;
307-
}
308-
309-
.sandbox-open-menu div:hover {
310-
background: #bdd;
311-
}
312-
313303
/* Toned-down CodeMirror style */
314304

315305
.tok-keyword, .sandbox-output-null, .sandbox-output-fun {color: #506}
@@ -326,10 +316,15 @@ blockquote footer:before {
326316

327317
.cm-editor {
328318
height: auto;
329-
line-height: 1.35;
330319
border-top: 1px solid #4ab;
331320
overflow-wrap: normal;
332321
}
322+
.cm-editor .cm-scroller {
323+
line-height: 1.35;
324+
}
325+
.cm-editor.cm-focused {
326+
outline: none;
327+
}
333328
.cm-scroller {
334329
max-height: 500px;
335330
}
@@ -342,7 +337,7 @@ blockquote footer:before {
342337
}
343338
.cm-editor .cm-lineNumbers {
344339
padding: .5em 3px 0 0;
345-
min-width: 12px;
340+
min-width: 20px;
346341
color: #4ab;
347342
font-size: 60%;
348343
}
@@ -412,30 +407,11 @@ figure img {
412407
max-width: 100%;
413408
}
414409

415-
div.solution:before {
416-
content: "» Display hints...";
417-
}
418-
419-
div.solution {
410+
details.solution {
420411
color: #156;
421-
cursor: pointer;
422-
}
423-
424-
div.solution-text {
425-
display: none;
426412
}
427413

428-
div.solution.open:before {
429-
content: "";
430-
}
431-
432-
div.solution.open {
433-
cursor: default;
434-
}
435-
436-
div.solution.open div.solution-text {
437-
display: block;
438-
}
414+
details[open] summary { display: none }
439415

440416
td {
441417
vertical-align: top;

‎src/chapter.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,30 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
<title><<t $in.title>> :: Eloquent JavaScript</title>
66
<link rel=stylesheet href="css/ejs.css">
7-
<<if $in.chap_num || $in.load_files>>
8-
<script>
9-
<<if $in.page>>var page = <<h JSON.stringify($in.page)>><</if>>
10-
</script>
7+
<<if $in.page>>
8+
<script>
9+
var page = <<h JSON.stringify($in.page)>>
10+
</script>
1111
<</if>>
1212
</head>
1313

1414
<article>
1515
<nav>
16-
<<if $in.prev_link>><a href="<<t $in.prev_link>>.html" title="previous chapter">◀</a> <</if>>
17-
<a href="index.html" title="cover">◆</a>
18-
<<if $in.next_link>> <a href="<<t $in.next_link>>.html" title="next chapter">▶</a><</if>>
16+
<<if $in.prev_link>><a href="<<t $in.prev_link>>.html" title="previous chapter" aria-label="previous chapter">◂</a> <</if>>
17+
<a href="index.html" title="cover" aria-label="cover">●</a>
18+
<<if $in.next_link>> <a href="<<t $in.next_link>>.html" title="next chapter" aria-label="next chapter">▸</a><</if>>
19+
&nbsp;<button class=help title="help" aria-label="help">❓&#xFE0E;</button>
1920
</nav>
2021

2122
<h1<<if $in.id>> id="<<t $in.id>>"<</if>>><<if $in.chap_num>><span class=chap_num>Chapter <<t $in.chap_num>></span><</if>><<t $in.title>></h1>
2223

2324
<<h $in.content>>
2425

2526
<nav>
26-
<<if $in.prev_link>><a href="<<t $in.prev_link>>.html" title="previous chapter">◀</a> <</if>>
27-
<a href="index.html" title="cover">◆</a>
28-
<<if $in.next_link>> <a href="<<t $in.next_link>>.html" title="next chapter">▶</a><</if>>
27+
<<if $in.prev_link>><a href="<<t $in.prev_link>>.html" title="previous chapter" aria-label="previous chapter">◂</a> <</if>>
28+
<a href="index.html" title="cover" aria-label="cover">●</a>
29+
<<if $in.next_link>> <a href="<<t $in.next_link>>.html" title="next chapter" aria-label="next chapter">▸</a><</if>>
30+
&nbsp;<button class=help title="help" aria-label="help">❓&#xFE0E;</button>
2931
</nav>
3032
</article>
3133

‎src/client/editor.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export function createState(code, mode, extensions = []) {
1717
minimalSetup,
1818
syntaxHighlighting(classHighlighter),
1919
bracketMatching(),
20-
lineNumbers()
20+
lineNumbers(),
21+
EditorView.contentAttributes.of({"aria-label": "Code editor"})
2122
]
2223
})
2324
}

0 commit comments

Comments
 (0)