fix(stammbaum): WCAG text-[10px] → text-xs in PersonRelationshipsCard chip labels
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -37,7 +37,7 @@ function otherId(rel: RelationshipDTO): string {
|
|||||||
{#each relationships as rel (rel.id)}
|
{#each relationships as rel (rel.id)}
|
||||||
<li class="flex items-center gap-2">
|
<li class="flex items-center gap-2">
|
||||||
<span
|
<span
|
||||||
class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink uppercase"
|
class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
|
||||||
>
|
>
|
||||||
{chipLabel(rel, personId)}
|
{chipLabel(rel, personId)}
|
||||||
</span>
|
</span>
|
||||||
@@ -57,7 +57,7 @@ function otherId(rel: RelationshipDTO): string {
|
|||||||
{#each topDerived as derived (derived.person.id)}
|
{#each topDerived as derived (derived.person.id)}
|
||||||
<li class="flex items-center gap-2">
|
<li class="flex items-center gap-2">
|
||||||
<span
|
<span
|
||||||
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-[10px] font-bold tracking-widest text-ink-2 uppercase"
|
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted/50 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
|
||||||
>
|
>
|
||||||
{inferredRelationshipLabel(derived.label)}
|
{inferredRelationshipLabel(derived.label)}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -74,6 +74,35 @@ describe('PersonRelationshipsCard', () => {
|
|||||||
await expect.element(page.getByText('Elternteil von')).toBeInTheDocument();
|
await expect.element(page.getByText('Elternteil von')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('chip labels use text-xs (≥12px) not text-[10px] — WCAG readable font size', async () => {
|
||||||
|
render(PersonRelationshipsCard, {
|
||||||
|
personId: PERSON_ID,
|
||||||
|
relationships: [
|
||||||
|
{
|
||||||
|
id: 'r1',
|
||||||
|
personId: PERSON_ID,
|
||||||
|
relatedPersonId: SPOUSE_ID,
|
||||||
|
personDisplayName: 'Anna',
|
||||||
|
relatedPersonDisplayName: 'Bertha',
|
||||||
|
relationType: 'SPOUSE_OF'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
inferredRelationships: [
|
||||||
|
{
|
||||||
|
person: { id: PARENT_ID, displayName: 'Großmutter', familyMember: true },
|
||||||
|
label: 'Großmutter',
|
||||||
|
hops: 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
const chips = document.querySelectorAll<HTMLElement>('li span.rounded-full');
|
||||||
|
expect(chips.length).toBeGreaterThan(0);
|
||||||
|
chips.forEach((chip) => {
|
||||||
|
expect(chip.classList.contains('text-xs')).toBe(true);
|
||||||
|
expect(chip.classList.contains('text-[10px]')).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
it('shows Kind-von chip when personId is the PARENT_OF object', async () => {
|
it('shows Kind-von chip when personId is the PARENT_OF object', async () => {
|
||||||
render(PersonRelationshipsCard, {
|
render(PersonRelationshipsCard, {
|
||||||
personId: PERSON_ID,
|
personId: PERSON_ID,
|
||||||
|
|||||||
Reference in New Issue
Block a user