Skip to content
This repository was archived by the owner on Apr 2, 2026. It is now read-only.

Commit b14c112

Browse files
jonathanpophamjonathanpopham
committed
Fix WCAG contrast issues flagged by CodeRabbit
- Use black text on accent-filled controls (skip-link, cta-button, pagination current, letter-active) for AA contrast on #71B9BC - Bump chart label gray from #505050 to #808080 for AA contrast on black
1 parent b7901ad commit b14c112

File tree

2 files changed

+22
-22
lines changed

2 files changed

+22
-22
lines changed

‎templates/_main.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,11 @@ window.addEventListener("load", function() {
7676

7777
var typeColors = {
7878
File: "#5C9699", Function: "#7CCE86", Class: "#D0A27D",
79-
Type: "#E589C6", Domain: "#71B9BC", Subdomain: "#8E8CE9", Directory: "#505050"
79+
Type: "#E589C6", Domain: "#71B9BC", Subdomain: "#8E8CE9", Directory: "#808080"
8080
};
8181
var edgeColors = {
8282
imports: "#5C9699", calls: "#7CCE86", defines: "#D0A27D",
83-
extends: "#E589C6", contains: "#505050", belongsTo: "#8E8CE9", partOf: "#71B9BC"
83+
extends: "#E589C6", contains: "#808080", belongsTo: "#8E8CE9", partOf: "#71B9BC"
8484
};
8585

8686
// Compute node radius from enriched lineCount data
@@ -102,7 +102,7 @@ window.addEventListener("load", function() {
102102
legendKeys.forEach(function(t) {
103103
svg.append("rect").attr("x", lgX).attr("y", 4).attr("width", 10).attr("height", 10).attr("rx", 2)
104104
.attr("fill", edgeColors[t] || "#202020");
105-
svg.append("text").attr("x", lgX + 14).attr("y", 12).attr("fill", "#505050").attr("font-size", "10px")
105+
svg.append("text").attr("x", lgX + 14).attr("y", 12).attr("fill", "#808080").attr("font-size", "10px")
106106
.attr("font-family", "Public Sans,system-ui,sans-serif").text(t);
107107
lgX += t.length * 6 + 26;
108108
});
@@ -133,7 +133,7 @@ window.addEventListener("load", function() {
133133

134134
node.append("circle")
135135
.attr("r", nodeR)
136-
.attr("fill", function(d) { return typeColors[d.type] || "#505050"; })
136+
.attr("fill", function(d) { return typeColors[d.type] || "#808080"; })
137137
.attr("stroke", function(d) { return d.slug === centerSlug ? "#fff" : "none"; })
138138
.attr("stroke-width", function(d) { return d.slug === centerSlug ? 2.5 : 0; })
139139
.attr("opacity", function(d) { return d.slug === centerSlug ? 1 : 0.85; });
@@ -210,7 +210,7 @@ window.addEventListener("load", function() {
210210
{ key: "fn", label: "Functions", color: "#A3A2ED" },
211211
{ key: "cl", label: "Classes", color: "#E589C6" },
212212
{ key: "tc", label: "Types", color: "#A98466" },
213-
{ key: "fc", label: "Files", color: "#505050" }
213+
{ key: "fc", label: "Files", color: "#808080" }
214214
];
215215
var metrics = metricDefs.filter(function(d) { return ep[d.key] > 0; })
216216
.map(function(d) { return { label: d.label, value: ep[d.key], color: d.color }; });
@@ -222,7 +222,7 @@ window.addEventListener("load", function() {
222222

223223
var epEdgeColors = {
224224
calls: "#5C9699", defines: "#7CCE86", belongsTo: "#8E8CE9",
225-
imports: "#D0A27D", extends: "#E589C6", contains: "#505050", partOf: "#71B9BC"
225+
imports: "#D0A27D", extends: "#E589C6", contains: "#808080", partOf: "#71B9BC"
226226
};
227227

228228
var hasMetrics = metrics.length > 0;
@@ -259,19 +259,19 @@ window.addEventListener("load", function() {
259259
var stackW = Math.min(epW - 130, 500);
260260
var stackScale = d3.scaleLinear().domain([0, totalEdgeCount]).range([0, stackW]);
261261
var sx = 100, sy = yOff + 6;
262-
svg.append("text").attr("x", 0).attr("y", sy + 2).attr("fill", "#505050").attr("font-size", "11px")
262+
svg.append("text").attr("x", 0).attr("y", sy + 2).attr("fill", "#808080").attr("font-size", "11px")
263263
.attr("font-weight", "600").attr("font-family", "Public Sans,system-ui,sans-serif").text("RELATIONSHIPS");
264264
var cx = sx;
265265
edgeTypes.forEach(function(e, i) {
266266
var w = Math.max(stackScale(e.count), 3);
267267
svg.append("rect").attr("x", cx).attr("y", sy - 6).attr("width", w).attr("height", 18)
268-
.attr("rx", i === 0 ? 3 : 0).attr("fill", epEdgeColors[e.type] || "#505050").attr("opacity", 0.85);
268+
.attr("rx", i === 0 ? 3 : 0).attr("fill", epEdgeColors[e.type] || "#808080").attr("opacity", 0.85);
269269
cx += w;
270270
});
271271
var ly = sy + 18, lx = sx;
272272
edgeTypes.forEach(function(e) {
273273
svg.append("rect").attr("x", lx).attr("y", ly).attr("width", 8).attr("height", 8).attr("rx", 2)
274-
.attr("fill", epEdgeColors[e.type] || "#505050");
274+
.attr("fill", epEdgeColors[e.type] || "#808080");
275275
svg.append("text").attr("x", lx + 12).attr("y", ly + 7).attr("fill", "#808080").attr("font-size", "10px")
276276
.attr("font-family", "Public Sans,system-ui,sans-serif").text(e.type + " " + e.count);
277277
lx += e.type.length * 6.5 + 36;
@@ -282,7 +282,7 @@ window.addEventListener("load", function() {
282282

283283
if (ep.sl > 0 && ep.el > 0) {
284284
var fy = yOff + 8, fw = Math.min(epW - 130, 500), fx = 100;
285-
svg.append("text").attr("x", 0).attr("y", fy + 2).attr("fill", "#505050").attr("font-size", "11px")
285+
svg.append("text").attr("x", 0).attr("y", fy + 2).attr("fill", "#808080").attr("font-size", "11px")
286286
.attr("font-weight", "600").attr("font-family", "Public Sans,system-ui,sans-serif").text("FILE POSITION");
287287
svg.append("rect").attr("x", fx).attr("y", fy - 5).attr("width", fw).attr("height", 14).attr("rx", 3)
288288
.attr("fill", "#161616").attr("stroke", "#202020").attr("stroke-width", 1);
@@ -338,7 +338,7 @@ window.addEventListener("load", function() {
338338

339339
aoNode.append("circle")
340340
.attr("r", function(d) { return d.type === "root" ? 24 : radiusScale(d.count); })
341-
.attr("fill", function(d) { return aoTypeColors[d.type] || "#505050"; })
341+
.attr("fill", function(d) { return aoTypeColors[d.type] || "#808080"; })
342342
.attr("opacity", 0.9)
343343
.attr("stroke", function(d) { return d.type === "root" ? "#8CC6C9" : "none"; })
344344
.attr("stroke-width", function(d) { return d.type === "root" ? 2 : 0; });
@@ -396,7 +396,7 @@ window.addEventListener("load", function() {
396396
if (hpDataEl && hpChartEl) {
397397
try {
398398
var hpData = JSON.parse(hpDataEl.textContent.trim());
399-
var hpColors = ["#71B9BC", "#5C9699", "#7CCE86", "#D0A27D", "#E589C6", "#8E8CE9", "#A3A2ED", "#505050"];
399+
var hpColors = ["#71B9BC", "#5C9699", "#7CCE86", "#D0A27D", "#E589C6", "#8E8CE9", "#A3A2ED", "#808080"];
400400
var children = (hpData.taxonomies || []).map(function(t) {
401401
return { name: t.name, value: t.count, slug: t.slug };
402402
}).sort(function(a, b) { return b.value - a.value; });
@@ -431,7 +431,7 @@ window.addEventListener("load", function() {
431431
try {
432432
var hubData = JSON.parse(hubDataEl.textContent.trim());
433433
var distributions = hubData.distributions || {};
434-
var hubColors = ["#71B9BC", "#5C9699", "#7CCE86", "#D0A27D", "#E589C6", "#8E8CE9", "#A3A2ED", "#505050"];
434+
var hubColors = ["#71B9BC", "#5C9699", "#7CCE86", "#D0A27D", "#E589C6", "#8E8CE9", "#A3A2ED", "#808080"];
435435
var dimLabels = { node_type: "Node Types", language: "Languages", domain: "Domains", extension: "File Extensions" };
436436
var dimOrder = ["node_type", "language", "domain", "extension"];
437437

@@ -460,7 +460,7 @@ window.addEventListener("load", function() {
460460
.on("click", function(event, d) { window.location.href = "/" + bestKey + "/" + toSlug(d.data.name) + ".html"; });
461461
arcs.append("title").text(function(d) { return d.data.name + ": " + d.data.count; });
462462
g.append("text").attr("text-anchor", "middle").attr("y", 6).attr("fill", "#FFFFFF").attr("font-size", "20px").attr("font-weight", "700").attr("font-family", "Public Sans,system-ui,sans-serif").text(hubData.totalEntities || "");
463-
svg.append("text").attr("x", cx).attr("y", hubH - 4).attr("text-anchor", "middle").attr("fill", "#505050").attr("font-size", "11px").attr("font-family", "Public Sans,system-ui,sans-serif").text(dimLabels[bestKey] || bestKey);
463+
svg.append("text").attr("x", cx).attr("y", hubH - 4).attr("text-anchor", "middle").attr("fill", "#808080").attr("font-size", "11px").attr("font-family", "Public Sans,system-ui,sans-serif").text(dimLabels[bestKey] || bestKey);
464464
var legendX = cx + radius + 20;
465465
dist.forEach(function(d, i) {
466466
if (i >= 8) return;
@@ -486,7 +486,7 @@ window.addEventListener("load", function() {
486486
var pbMax = d3.max(profileBars, function(d) { return d.count; }) || 1;
487487
var pbScale = d3.scaleLinear().domain([0, pbMax]).range([0, pbW - pbLabelW - 100]);
488488
var svg = d3.select(hubChartEl).append("svg").attr("width", pbW).attr("height", pbH);
489-
svg.append("text").attr("x", 0).attr("y", 14).attr("fill", "#505050").attr("font-size", "11px").attr("font-family", "Public Sans,system-ui,sans-serif").text(hubData.entryName + " — " + hubData.totalEntities + " entities");
489+
svg.append("text").attr("x", 0).attr("y", 14).attr("fill", "#808080").attr("font-size", "11px").attr("font-family", "Public Sans,system-ui,sans-serif").text(hubData.entryName + " — " + hubData.totalEntities + " entities");
490490
profileBars.forEach(function(d, i) {
491491
var y = 24 + i * (pbBarH + pbGap);
492492
svg.append("text").attr("x", pbLabelW - 6).attr("y", y + pbBarH / 2 + 4).attr("text-anchor", "end").attr("fill", "#808080").attr("font-size", "12px").attr("font-family", "Public Sans,system-ui,sans-serif").text(d.name);
@@ -509,7 +509,7 @@ window.addEventListener("load", function() {
509509
var typeColors = { Function: "#7CCE86", Class: "#D0A27D", File: "#5C9699", Type: "#E589C6", Domain: "#71B9BC", Subdomain: "#8E8CE9" };
510510

511511
var teSvg = d3.select(hubSecEl).append("svg").attr("width", teW).attr("height", teH);
512-
teSvg.append("text").attr("x", 0).attr("y", 12).attr("fill", "#505050").attr("font-size", "11px").attr("font-weight", "600")
512+
teSvg.append("text").attr("x", 0).attr("y", 12).attr("fill", "#808080").attr("font-size", "11px").attr("font-weight", "600")
513513
.attr("text-transform", "uppercase").attr("letter-spacing", "0.04em")
514514
.attr("font-family", "Public Sans,system-ui,sans-serif").text("LARGEST BY LINES OF CODE");
515515

@@ -524,7 +524,7 @@ window.addEventListener("load", function() {
524524
g.append("rect").attr("x", teLabelW).attr("y", y).attr("width", Math.max(teScale(d.lines), 3)).attr("height", teBarH)
525525
.attr("rx", 3).attr("fill", typeColors[d.type] || "#71B9BC").attr("opacity", 0.85);
526526
g.append("text").attr("x", teLabelW + Math.max(teScale(d.lines), 3) + 5).attr("y", y + teBarH / 2 + 4)
527-
.attr("fill", "#505050").attr("font-size", "10px").attr("font-family", "Public Sans,system-ui,sans-serif").text(d.lines);
527+
.attr("fill", "#808080").attr("font-size", "10px").attr("font-family", "Public Sans,system-ui,sans-serif").text(d.lines);
528528
g.append("title").text(d.name + " (" + d.type + ") — " + d.lines + " lines");
529529
});
530530
}
@@ -570,7 +570,7 @@ window.addEventListener("load", function() {
570570
if (types.length > 0) {
571571
var aeW = aeChartEl.clientWidth || 800;
572572
var aeH = 320;
573-
var aeColors = ["#71B9BC", "#5C9699", "#7CCE86", "#D0A27D", "#E589C6", "#8E8CE9", "#A3A2ED", "#505050"];
573+
var aeColors = ["#71B9BC", "#5C9699", "#7CCE86", "#D0A27D", "#E589C6", "#8E8CE9", "#A3A2ED", "#808080"];
574574
var root = d3.hierarchy({ children: types }).sum(function(d) { return d.count || 0; });
575575
d3.pack().size([aeW, aeH]).padding(4)(root);
576576
var svg = d3.select(aeChartEl).append("svg").attr("width", aeW).attr("height", aeH);

‎templates/_styles.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ a { color: var(--accent-light); text-decoration: none; }
3636
a:hover { text-decoration: underline; }
3737
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 2px; }
3838

39-
.skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 1001; font-size: 14px; font-weight: 600; }
39+
.skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent); color: #000; padding: 8px 16px; border-radius: 6px; z-index: 1001; font-size: 14px; font-weight: 600; }
4040
.skip-link:focus { top: 12px; }
4141

4242
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
@@ -373,7 +373,7 @@ a.pill:hover {
373373
}
374374
.pagination .current {
375375
background: var(--accent);
376-
color: white;
376+
color: #000;
377377
}
378378

379379
/* Taxonomy Index */
@@ -559,7 +559,7 @@ a.pill:hover {
559559
display: inline-block;
560560
padding: 12px 28px;
561561
background: var(--accent);
562-
color: #fff;
562+
color: #000;
563563
font-size: 15px;
564564
font-weight: 600;
565565
border-radius: 6px;
@@ -709,7 +709,7 @@ a.pill:hover {
709709
}
710710
.letter-active {
711711
background: var(--accent);
712-
color: #fff;
712+
color: #000;
713713
border-color: var(--accent);
714714
}
715715

0 commit comments

Comments
 (0)