marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(stammbaum): raise dimmed opacity to 0.45 and bind tests to the constant (#703)

Browse Source 
Bump DIMMED_OPACITY 0.4 -> 0.45 so dimmed outlines/labels stay legible
against bg-surface in both themes (dark mode dims already-light mint, the
riskier case). Import the constant into StammbaumTree.svelte.test.ts so the
node-opacity assertions track it instead of a hard-coded '0.4'.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-31 19:13:49 +02:00
parent 9c12f62345
commit 10249c33be
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts
View File

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
import { render } from 'vitest-browser-svelte'; import { render } from 'vitest-browser-svelte';
import StammbaumTree from './StammbaumTree.svelte'; import StammbaumTree from './StammbaumTree.svelte';
import type { PanZoomState } from './panZoom'; import type { PanZoomState } from './panZoom';
import { DIMMED_OPACITY } from './layout/highlightLineage';
const ID_A = '00000000-0000-0000-0000-000000000001'; const ID_A = '00000000-0000-0000-0000-000000000001';
const ID_B = '00000000-0000-0000-0000-000000000002'; const ID_B = '00000000-0000-0000-0000-000000000002';
@@ -962,7 +963,7 @@ describe('StammbaumTree lineage highlight (#703)', () => {
if (!fill) throw new Error(`No card-fill rect rendered for ${displayName}`); if (!fill) throw new Error(`No card-fill rect rendered for ${displayName}`);
return fill.getAttribute('opacity') === null && fill.getAttribute('fill-opacity') === null; return fill.getAttribute('opacity') === null && fill.getAttribute('fill-opacity') === null;
} }
const DIM = '0.4'; const DIM = String(DIMMED_OPACITY);
it('renders every node at full strength when nothing is selected (AC1)', () => { it('renders every node at full strength when nothing is selected (AC1)', () => {
render(StammbaumTree, { render(StammbaumTree, {

10
frontend/src/lib/person/genealogy/layout/highlightLineage.ts
View File

@@ -16,11 +16,13 @@ import type { components } from '$lib/generated/api';
type RelationshipDTO = components['schemas']['RelationshipDTO']; type RelationshipDTO = components['schemas']['RelationshipDTO'];
/** /**
* Opacity applied to dimmed nodes and connectors. ~0.4 keeps names legible while * Opacity applied to dimmed node outlines/labels and connectors. 0.45 keeps names
* clearly de-emphasised, and works as a lightness cue in both themes (the colour * legible against bg-surface in both themes (dark mode dims already-light mint, the
* tokens are theme-aware) so the cue does not rely on hue (WCAG 1.4.1 / NFR-A11Y-001). * riskier case) while clearly de-emphasised, and works as a lightness cue so the cue
* does not rely on hue (WCAG 1.4.1 / NFR-A11Y-001). The dim is applied to the node's
* outline + labels only — the card fill stays opaque, see StammbaumNode.svelte.
*/ */
export const DIMMED_OPACITY = 0.4; export const DIMMED_OPACITY = 0.45;
/** Adjacency index over the family graph, built once per edge set. */ /** Adjacency index over the family graph, built once per edge set. */
export type LineageIndex = { export type LineageIndex = {