[OCaml] Mobile-friendly clone of cgit.
Improve accessibility for blob and diff views
- Add aria-label to line number anchors in blob view ("Line N") - Add aria-hidden to diff markers (+/-) and sr-only labels for screen readers - Make site logo decorative (alt="", role=presentation) - Add .sr-only utility class for visually-hidden text
Changed files
lib/static/styles.css
@@ -37,6 +37,18 @@
37
37
outline-offset: 2px;
38
38
}
39
39
40
Added:
.sr-only {
41
Added:
position: absolute;
42
Added:
width: 1px;
43
Added:
height: 1px;
44
Added:
padding: 0;
45
Added:
margin: -1px;
46
Added:
overflow: hidden;
47
Added:
clip: rect(0, 0, 0, 0);
48
Added:
white-space: nowrap;
49
Added:
border: 0;
50
Added:
}
51
Added:
40
52
#index-link {
41
53
color: skyblue;
42
54
text-decoration: none;
lib/views.ml
@@ -48,7 +48,13 @@
48
48
header
49
49
[ id "page-header" ]
50
50
[
51
Removed:
img [ src "/static/git_icon.svg"; alt "git"; class_ "site-logo" ];
51
Added:
img
52
Added:
[
53
Added:
src "/static/git_icon.svg";
54
Added:
alt "";
55
Added:
role `presentation;
56
Added:
class_ "site-logo";
57
Added:
];
52
58
div [] [ h1 [] [ txt "%s" header1 ]; h2 [] [ txt "%s" header2 ] ];
53
59
])
54
60
@@ -273,7 +279,14 @@
273
279
let n = number + 1 in
274
280
HTML.
275
281
[
276
Removed:
a [ id "%d" n; class_ "line-anchor"; href "#%d" n ] [ txt "%d" n ];
282
Added:
a
283
Added:
[
284
Added:
id "%d" n;
285
Added:
class_ "line-anchor";
286
Added:
href "#%d" n;
287
Added:
Aria.label "Line %d" n;
288
Added:
]
289
Added:
[ txt "%d" n ];
277
290
span [ class_ "line" ] [ txt "\t%s\n" line ];
278
291
]
279
292
in
@@ -297,11 +310,11 @@
297
310
let commit_body_text = commit_body commit.message in
298
311
let number = function Some number -> string_of_int number | None -> "" in
299
312
let line (line : Resolvers.Diff.line) =
300
Removed:
let class_name, marker =
313
Added:
let class_name, marker, sr_label =
301
314
match line.kind with
302
Removed:
| Resolvers.Diff.Context -> ("context", " ")
303
Removed:
| Resolvers.Diff.Addition -> ("addition", "+")
304
Removed:
| Resolvers.Diff.Deletion -> ("deletion", "-")
315
Added:
| Resolvers.Diff.Context -> ("context", " ", "")
316
Added:
| Resolvers.Diff.Addition -> ("addition", "+", "Added: ")
317
Added:
| Resolvers.Diff.Deletion -> ("deletion", "-", "Removed: ")
305
318
in
306
319
HTML.(
307
320
div
@@ -309,7 +322,8 @@
309
322
[
310
323
span [ class_ "line-number" ] [ txt "%s" (number line.old_number) ];
311
324
span [ class_ "line-number" ] [ txt "%s" (number line.new_number) ];
312
Removed:
span [ class_ "diff-marker" ] [ txt "%s" marker ];
325
Added:
span [ class_ "diff-marker"; Aria.hidden true ] [ txt "%s" marker ];
326
Added:
span [ class_ "sr-only" ] [ txt "%s" sr_label ];
313
327
span [ class_ "diff-text" ] [ txt "%s" line.text ];
314
328
])
315
329
in