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:
@@ -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}
|
||||
|
||||
@@ -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: [
|
||||
|
||||
Reference in New Issue
Block a user