[OCaml] Mobile-friendly clone of cgit.
Improve semantic HTML and keyboard navigation
- Add lang="en" to <html> element - Add aria-label to nav elements (repo nav, breadcrumbs) - Replace id="active" with aria-current="page" for active tab - Add visually-hidden skip-to-content link - Add :focus-visible outline for keyboard navigation
Changed files
lib/static/styles.css
@@ -16,6 +16,27 @@
16
16
padding: 0.5em 0;
17
17
}
18
18
19
Added:
.skip-link {
20
Added:
position: absolute;
21
Added:
top: -100%;
22
Added:
left: 0;
23
Added:
padding: 0.5em 1em;
24
Added:
background: white;
25
Added:
color: black;
26
Added:
z-index: 100;
27
Added:
text-decoration: none;
28
Added:
font-weight: bold;
29
Added:
}
30
Added:
31
Added:
.skip-link:focus {
32
Added:
top: 0;
33
Added:
}
34
Added:
35
Added:
:focus-visible {
36
Added:
outline: 2px solid skyblue;
37
Added:
outline-offset: 2px;
38
Added:
}
39
Added:
19
40
#index-link {
20
41
color: skyblue;
21
42
text-decoration: none;
@@ -65,12 +86,12 @@
65
86
color: black;
66
87
}
67
88
68
Removed:
nav#top ul li#active {
89
Added:
nav#top ul li[aria-current="page"] {
69
90
border-radius: 0.25rem;
70
91
background-color: rgb(194, 79, 30);
71
92
}
72
93
73
Removed:
nav#top ul li#active a:hover {
94
Added:
nav#top ul li[aria-current="page"] a:hover {
74
95
border-radius: 0.25rem;
75
96
background-color: rgb(132, 40, 0);
76
97
color: white;
lib/views.ml
@@ -29,10 +29,13 @@
29
29
in
30
30
let li_of_item (route, text, path) =
31
31
let is_active = path = active in
32
Removed:
let attrs = if is_active then [ HTML.id "active" ] else [] in
32
Added:
let attrs = if is_active then [ Aria.current `page ] else [] in
33
33
HTML.li attrs [ Routes.link_to route (txt "%s" text) ]
34
34
in
35
Removed:
HTML.(nav [ id "top" ] [ ul [] @@ List.map li_of_item nav_items ])
35
Added:
HTML.(
36
Added:
nav
37
Added:
[ id "top"; Aria.label "Repository navigation" ]
38
Added:
[ ul [] @@ List.map li_of_item nav_items ])
36
39
end
37
40
38
41
module Page = struct
@@ -69,6 +72,7 @@
69
72
let open HTML in
70
73
body []
71
74
[
75
Added:
a [ href "#main"; class_ "skip-link" ] [ txt "Skip to content" ];
72
76
(match bd.repo with
73
77
| None -> null []
74
78
| Some _ ->
@@ -82,7 +86,7 @@
82
86
]
83
87
84
88
let render ?(page_title = "Ogit") body_data =
85
Removed:
HTML.html [] [ head page_title; body body_data ]
89
Added:
HTML.html [ HTML.lang "en" ] [ head page_title; body body_data ]
86
90
end
87
91
88
92
let error_page message =
@@ -243,7 +247,10 @@
243
247
| [ x ] -> [ x ]
244
248
| x :: rest -> x :: separator :: interleave rest
245
249
in
246
Removed:
HTML.(nav [ class_ "breadcrumbs" ] (interleave (root_link :: crumbs)))
250
Added:
HTML.(
251
Added:
nav
252
Added:
[ class_ "breadcrumbs"; Aria.label "File path" ]
253
Added:
(interleave (root_link :: crumbs)))
247
254
248
255
let files repo trail (tree : Resolvers.Tree.t) =
249
256
respond