Skip to content

Bugfix/arc 3981 wcag colors transparent #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reunefe merged 2 commits into from
Sep 17, 2026
Merged

Bugfix/arc 3981 wcag colors transparent #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e78533
ARC-3981: add WCAG colors for transparent (equal to white)
reunefe Sep 16, 2026
d5a2dac
Merge branch 'main' into bugfix/ARC-3981_WCAG-colors-transparent
reunefe Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions ui/src/react-admin/modules/content-page/const/background-text-colors.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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,
];
Expand All @@ -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],
Expand Down
5 changes: 5 additions & 0 deletions ui/src/react-admin/modules/content-page/const/background-text-colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ export const BACKGROUND_TEXT_COLORS: Partial<Record<Color, BackgroundTextColors>
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,
Expand Down
8 changes: 6 additions & 2 deletions .../react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,12 @@ describe('<ContentPageLabelChip />', () => {
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', () => {
Expand Down