test+fix(stammbaum): enlarge marriage-line midpoint dot to r=6 (#361)

Once the dot starts stacking to disambiguate multiple marriages on
multi-spouse rows it carries meaning, so it's no longer decorative —
WCAG 1.4.11 (3:1) applies. r=6 (12 px diameter) covers the contrast
gap; the existing brand-navy fill against the gutter and surface
backgrounds satisfies the ratio without a hue change.

Impl-ref table in stammbaum-tree-spec.html updated to match (r=6 /
12 px dia / Informational), with the WCAG reference noted.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-28 20:20:51 +02:00
parent 652100a9c2
commit 0c5f56e9d1
3 changed files with 33 additions and 4 deletions

View File

@@ -319,7 +319,7 @@ const parentLinks = $derived.by<ParentLinks>(() => {
<circle
cx={(aCenter.x + bCenter.x) / 2}
cy={(aCenter.y + bCenter.y) / 2}
r="4.5"
r="6"
fill="var(--c-primary)"
/>
{/if}

View File

@@ -315,6 +315,35 @@ describe('StammbaumTree viewBox', () => {
expect(slanted).toHaveLength(0);
});
it('renders the marriage-line midpoint dot at r=6 for WCAG 1.4.11 informational contrast (#361)', async () => {
// Once the dot stacks to disambiguate multiple marriages it carries
// meaning, so it moves from "decorative" to "informational" and the
// 3:1 contrast rule requires the larger 12 px diameter.
render(StammbaumTree, {
nodes: [
{ id: ID_A, displayName: 'Anna', familyMember: true },
{ id: ID_B, displayName: 'Bertha', familyMember: true }
],
edges: [
{
id: 'e1',
personId: ID_A,
relatedPersonId: ID_B,
personDisplayName: 'Anna',
relatedPersonDisplayName: 'Bertha',
relationType: 'SPOUSE_OF'
}
],
selectedId: null,
zoom: 1,
onSelect: () => {}
});
const dot = document.querySelector('svg circle');
expect(dot).not.toBeNull();
expect(dot!.getAttribute('r')).toBe('6');
});
it('centers two spouse nodes within the minimum viewBox', async () => {
render(StammbaumTree, {
nodes: [