From 2e785331dd479f92cf976bd55bd0f4d58b32ef0f Mon Sep 17 00:00:00 2001 From: Femke Reunes Date: Wed, 16 Sep 2026 11:11:15 +0200 Subject: [PATCH] ARC-3981: add WCAG colors for transparent (equal to white) --- .../BlockDoubleBanner.test.tsx | 3 +++ .../BlockHetArchiefVideo.editorconfig.test.ts | 11 ++++------- .../BlockImageGrid/BlockImageGrid.test.tsx | 17 +++++++++++++++-- .../const/background-text-colors.test.ts | 5 ++--- .../const/background-text-colors.ts | 5 +++++ .../ContentPageLabelChip.test.tsx | 8 ++++++-- 6 files changed, 35 insertions(+), 14 deletions(-) diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.test.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.test.tsx index 88ecc942d..0feef76bd 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.test.tsx +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.test.tsx @@ -13,6 +13,9 @@ vi.mock('~shared/components/Icon/Icon', () => ({ Icon: ({ name, ...props }: { name: string; 'aria-hidden'?: boolean }) => ( ), + ContentPageIcon: ({ name, ...props }: { name: string; 'aria-hidden'?: boolean }) => ( + + ), })); vi.mock('~shared/components/SmartLink/SmartLink', () => ({ diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefVideo/BlockHetArchiefVideo.editorconfig.test.ts b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefVideo/BlockHetArchiefVideo.editorconfig.test.ts index a268b87af..6f3bf1441 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefVideo/BlockHetArchiefVideo.editorconfig.test.ts +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefVideo/BlockHetArchiefVideo.editorconfig.test.ts @@ -52,13 +52,10 @@ describe('HETARCHIEF_VIDEO_BLOCK_CONFIG', () => { expect(mediaItem.editorType).toEqual(ContentBlockEditor.ContentPicker); expect(mediaItem.editorProps.allowedTypes).toEqual([AvoCoreContentPickerType.IE_OBJECT]); - expect(mediaItem.editorProps.ieObjectFormats).toEqual([ - 'audio', - 'audiofragment', - 'film', - 'video', - 'videofragment', - ]); + // Order isn't meaningful, this is a set of allowed formats for filtering. + expect(new Set(mediaItem.editorProps.ieObjectFormats)).toEqual( + new Set(['audio', 'audiofragment', 'film', 'video', 'videofragment']) + ); }); it('should require an object', () => { diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.test.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.test.tsx index 5a01bd628..0192a7f08 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.test.tsx +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.test.tsx @@ -1,9 +1,22 @@ import { cleanup, render, screen } from '@testing-library/react'; import React from 'react'; -import { afterEach, describe, expect, it } from 'vitest'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { AdminConfigManager } from '~core/config/config.class'; +import { Locale } from '~modules/translations/translations.core.types'; import { BlockImageGrid } from './BlockImageGrid'; -afterEach(() => cleanup()); +beforeEach(() => { + vi.spyOn(AdminConfigManager, 'getConfig').mockReturnValue({ + locale: Locale.Nl, + services: { i18n: { tText: (key: string) => key } }, + // biome-ignore lint/suspicious/noExplicitAny: only the locale and i18n keys are read here + } as any); +}); + +afterEach(() => { + cleanup(); + vi.restoreAllMocks(); +}); const ELEMENT = { source: '/image.jpg', diff --git a/ui/src/react-admin/modules/content-page/const/background-text-colors.test.ts b/ui/src/react-admin/modules/content-page/const/background-text-colors.test.ts index c0b43ba7d..9524b4542 100644 --- a/ui/src/react-admin/modules/content-page/const/background-text-colors.test.ts +++ b/ui/src/react-admin/modules/content-page/const/background-text-colors.test.ts @@ -23,6 +23,7 @@ const EXPECTED_BACKGROUND_TEXT_COLORS: [string, Color, Color, Color, Color][] = // Merk ['Zwart', Color.Black, Color.White, Color.Zinc, Color.OceanGreen], ['Wit', Color.White, Color.Black, Color.Slate, Color.Jade], + ['Transparent', Color.Transparent, Color.Black, Color.Slate, Color.Jade], ['Teal', Color.OceanGreen, Color.Black, Color.Ink, Color.Black], // Functioneel ['Grafiet', Color.Graphite, Color.White, Color.Zinc, Color.OceanGreen], @@ -87,8 +88,7 @@ describe('getBackgroundTextColors()', () => { }); it('has a ruling for every selectable flat Archief background', () => { - const backgroundsWithoutOneTextColor = [ - Color.Transparent, + const backgroundsWithoutOneTextColor: (Color | GradientColor | CustomBackground)[] = [ GradientColor.BlackWhite, CustomBackground.MeemooLogo, ]; @@ -107,7 +107,6 @@ describe('getBackgroundTextColors()', () => { // Design specified nothing for these, so blocks keep whatever they inherit. In particular, // meemoo confirmed that BlackWhite must retain the existing per-block handling. it.each<[string, Color | GradientColor | CustomBackground | undefined]>([ - ['transparent', Color.Transparent], ['the separately handled black-white gradient', GradientColor.BlackWhite], ['the meemoo logo pattern', CustomBackground.MeemooLogo], ['an AVO-only color', Color.SoftBlue], diff --git a/ui/src/react-admin/modules/content-page/const/background-text-colors.ts b/ui/src/react-admin/modules/content-page/const/background-text-colors.ts index 8cd72b40f..93749c2da 100644 --- a/ui/src/react-admin/modules/content-page/const/background-text-colors.ts +++ b/ui/src/react-admin/modules/content-page/const/background-text-colors.ts @@ -41,6 +41,11 @@ export const BACKGROUND_TEXT_COLORS: Partial secondary: Color.Slate, hyperlink: Color.Jade, }, // Wit + [Color.Transparent]: { + primary: Color.Black, + secondary: Color.Slate, + hyperlink: Color.Jade, + }, // Transparent = Same as white [Color.OceanGreen]: { primary: Color.Black, secondary: Color.Ink, diff --git a/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.test.tsx b/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.test.tsx index a59583b54..0e9541749 100644 --- a/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.test.tsx +++ b/ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.test.tsx @@ -34,8 +34,12 @@ describe('', () => { expect(renderChip(Color.Black).style.color).toEqual('rgb(255, 255, 255)'); }); - it('keeps white text when the background has no WCAG mapping', () => { - expect(renderChip(CustomBackground.MeemooLogo).style.color).toEqual('rgb(255, 255, 255)'); + it('uses the transparent WCAG mapping for the meemoo logo pattern', () => { + // The component looks up Color.Transparent for the meemoo logo (it renders that background + // as transparent, see the test below). Since ARC-3981 gave Color.Transparent its own WCAG + // text mapping (same as White: black), that lookup now returns black instead of falling + // back to white. + expect(renderChip(CustomBackground.MeemooLogo).style.color).toEqual('rgb(0, 0, 0)'); }); it('renders the meemoo logo background as transparent, since a chip cannot show the pattern', () => {