[OCaml] Mobile-friendly clone of cgit.

style WCAG accessibility improvements for commit list and views

Commit
993f41495aca46bd67cff7c0efac6d6bf264c6dd
Author
Claude Sonnet 4 <agent@anthropic.com>
Author date
Committer
Claude Sonnet 4 <agent@anthropic.com>
Committer date
Changed files
.kiro/steering/agents.md
index e70317bb..2909dcbe 100644..100644
@@ -64,3 +64,15 @@
64 64
65 65 - Modifications to the code SHALL be followed by running regression tests.
66 66 - When attempting to compile this project, agents SHALL use a non-default Dream server listening port, so that agent test builds won't clash with an existing Dream server.
67 Added:
68 Added: ## Accessibility
69 Added:
70 Added: - All rendered HTML SHALL conform to WCAG 2.1 AA.
71 Added: - Text and interactive elements SHALL meet a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (>=18.66px bold or >=24px).
72 Added: - Interactive targets (links, buttons) SHALL have a minimum target size of 44×44 CSS pixels, or sufficient spacing to compensate per WCAG 2.5.8.
73 Added: - Focus indicators SHALL be visible on all interactive elements (`:focus-visible` outline).
74 Added: - Semantic HTML elements SHALL be preferred over `div`/`span` where an appropriate element exists (e.g. `nav`, `header`, `main`, `footer`, `time`).
75 Added: - Images SHALL have descriptive `alt` text; decorative images SHALL use `alt=""` with `role="presentation"`.
76 Added: - Skip navigation links SHALL be provided.
77 Added: - ARIA landmarks and labels SHALL be used where native semantics are insufficient.
78 Added: - When adding or modifying UI components, agents SHOULD verify contrast ratios against the page background and component background using computed values rather than assumptions.
AGENTS.org
index 985edd05..77ef861f 100644..100644
@@ -80,3 +80,26 @@
80 80 - When attempting to compile this project, agents SHALL use a
81 81 non-default Dream server listening port, so that agent test builds
82 82 won't clash with an existing Dream server.
83 Added:
84 Added: * Accessibility
85 Added:
86 Added: - All rendered HTML SHALL conform to WCAG 2.1 AA.
87 Added: - Text and interactive elements SHALL meet a minimum contrast ratio of
88 Added: 4.5:1 for normal text and 3:1 for large text (>=18.66px bold or
89 Added: >=24px).
90 Added: - Interactive targets (links, buttons) SHALL have a minimum target
91 Added: size of 44×44 CSS pixels, or sufficient spacing to compensate per
92 Added: WCAG 2.5.8.
93 Added: - Focus indicators SHALL be visible on all interactive elements
94 Added: (=:focus-visible= outline).
95 Added: - Semantic HTML elements SHALL be preferred over =div=/=span= where an
96 Added: appropriate element exists (e.g. =nav=, =header=, =main=, =footer=,
97 Added: =time=).
98 Added: - Images SHALL have descriptive =alt= text; decorative images SHALL
99 Added: use =alt=""= with =role="presentation"=.
100 Added: - Skip navigation links SHALL be provided.
101 Added: - ARIA landmarks and labels SHALL be used where native semantics are
102 Added: insufficient.
103 Added: - When adding or modifying UI components, agents SHOULD verify
104 Added: contrast ratios against the page background and component background
105 Added: using computed values rather than assumptions.
lib/static/styles.css
index c66f5a9b..7400865a 100644..100644
@@ -183,6 +183,8 @@
183 183 border: none;
184 184 }
185 185
186 Added: /* File/branch/tag list items (still use li > a wrapping pattern) */
187 Added:
186 188 div#main ul li > a {
187 189 display: flex;
188 190 align-items: center;
@@ -195,109 +197,154 @@
195 197 box-sizing: border-box;
196 198 }
197 199
198 Removed: div#main a:hover {
200 Added: div#main ul li > a:hover {
199 201 background-color: white;
200 202 color: black;
201 203 text-decoration: revert;
202 204 }
203 205
206 Added: /* Commit list items — anchors live inside pill and title spans */
207 Added:
208 Added: div#main ul li:has(.commit-left) {
209 Added: display: flex;
210 Added: align-items: center;
211 Added: justify-content: space-between;
212 Added: line-height: 1.5rem;
213 Added: padding: 0.5em 0.75em;
214 Added: min-height: 44px;
215 Added: box-sizing: border-box;
216 Added: gap: 1em;
217 Added: }
218 Added:
204 219 .commit-left {
220 Added: display: flex;
221 Added: align-items: center;
222 Added: gap: 0.5em;
205 223 flex: 1;
206 224 min-width: 0;
207 225 overflow: hidden;
208 Removed: text-overflow: ellipsis;
209 Removed: white-space: nowrap;
210 226 }
211 227
228 Added: .commit-left a {
229 Added: color: white;
230 Added: text-decoration: none;
231 Added: border-radius: 0.25rem;
232 Added: line-height: 1.5rem;
233 Added: }
234 Added:
235 Added: .commit-left a:hover {
236 Added: background-color: white;
237 Added: color: black;
238 Added: text-decoration: underline;
239 Added: }
240 Added:
212 241 .commit-ago {
213 242 flex-shrink: 0;
214 243 font-size: 0.85em;
215 Removed: color: #999;
244 Added: color: #b0b0b0;
216 245 white-space: nowrap;
217 246 }
218 247
219 Removed: div#main a:hover .commit-ago {
220 Removed: color: #555;
221 Removed: }
222 Removed:
223 248 .commit-pill {
224 Removed: display: inline-block;
225 Removed: padding: 0.15em 0.4em;
249 Added: display: inline-flex;
250 Added: align-items: center;
251 Added: flex-shrink: 0;
252 Added: padding: 0.2em 0.55em;
226 253 border-radius: 0.75em;
227 Removed: font-size: 0.7em;
254 Added: font-size: 0.8em;
228 255 font-weight: 600;
229 256 text-transform: uppercase;
230 Removed: margin-right: 0.4em;
231 257 vertical-align: middle;
232 258 }
233 259
260 Added: .commit-pill a {
261 Added: color: inherit;
262 Added: padding: 0.1em 0;
263 Added: }
264 Added:
265 Added: .commit-pill a:hover {
266 Added: background-color: transparent;
267 Added: color: inherit;
268 Added: text-decoration: underline;
269 Added: }
270 Added:
271 Added: .commit-title {
272 Added: flex: 1;
273 Added: min-width: 0;
274 Added: overflow: hidden;
275 Added: text-overflow: ellipsis;
276 Added: white-space: nowrap;
277 Added: }
278 Added:
279 Added: .commit-title a {
280 Added: display: inline;
281 Added: }
282 Added:
283 Added: /* Pill color variants — WCAG AA contrast against their backgrounds */
284 Added:
234 285 .commit-pill-feat {
235 286 background-color: #1a4d2e;
236 Removed: color: #6ee7a0;
287 Added: color: #86efac;
237 288 }
238 289
239 290 .commit-pill-fix {
240 291 background-color: #4d1a1a;
241 Removed: color: #f87171;
292 Added: color: #fca5a5;
242 293 }
243 294
244 295 .commit-pill-docs {
245 296 background-color: #1a3a4d;
246 Removed: color: #7dd3fc;
297 Added: color: #93dbfd;
247 298 }
248 299
249 300 .commit-pill-style {
250 301 background-color: #3d1a4d;
251 Removed: color: #d8b4fe;
302 Added: color: #e0c4ff;
252 303 }
253 304
254 305 .commit-pill-refactor {
255 306 background-color: #4d3a1a;
256 Removed: color: #fbbf24;
307 Added: color: #fcd34d;
257 308 }
258 309
259 310 .commit-pill-perf {
260 311 background-color: #4d2d1a;
261 Removed: color: #fb923c;
312 Added: color: #fdba74;
262 313 }
263 314
264 315 .commit-pill-test {
265 316 background-color: #1a2e4d;
266 Removed: color: #93c5fd;
317 Added: color: #a5d0fe;
267 318 }
268 319
269 320 .commit-pill-build {
270 321 background-color: #2d2d2d;
271 Removed: color: #a3a3a3;
322 Added: color: #c0c0c0;
272 323 }
273 324
274 325 .commit-pill-ci {
275 326 background-color: #2d2d2d;
276 Removed: color: #a3a3a3;
327 Added: color: #c0c0c0;
277 328 }
278 329
279 330 .commit-pill-chore {
280 331 background-color: #2d2d2d;
281 Removed: color: #a3a3a3;
332 Added: color: #c0c0c0;
282 333 }
283 334
284 335 .commit-pill-revert {
285 336 background-color: #4d1a3a;
286 Removed: color: #f9a8d4;
337 Added: color: #fbb6d0;
287 338 }
288 339
289 Removed: .commit-title {
290 Removed: overflow: hidden;
291 Removed: text-overflow: ellipsis;
292 Removed: white-space: nowrap;
293 Removed: }
294 Removed:
295 340 h1 {
296 341 padding: 0;
297 342 }
298 343
299 344 .timestamp {
300 345 font-family: monospace;
346 Added: color: #b0b0b0;
347 Added: font-size: 0.85em;
301 348 }
302 349
303 350 #blob {
@@ -310,7 +357,7 @@
310 357 }
311 358
312 359 #blob a.line-anchor {
313 Removed: color: #999;
360 Added: color: #b0b0b0;
314 361 text-decoration: none;
315 362 text-align: right;
316 363 }
@@ -482,7 +529,7 @@
482 529
483 530 .diff-line .line-number {
484 531 padding-right: 0.6em;
485 Removed: color: #999;
532 Added: color: #b0b0b0;
486 533 text-align: right;
487 534 user-select: none;
488 535 border-right: 1px solid #3a3a3a;