diff --git a/ui/all-translations-het-archief.json b/ui/all-translations-het-archief.json index 7f5330d30..ef20b9dd0 100644 --- a/ui/all-translations-het-archief.json +++ b/ui/all-translations-het-archief.json @@ -1724,9 +1724,9 @@ "app": "HET_ARCHIEF", "component": "ADMIN_CORE", "location": "modules/content-page/const/content-block", - "key": "poederblauw", + "key": "babyblauw", "language": "nl", - "value": "Poederblauw", + "value": "Baby blauw", "value_type": "TEXT" }, { @@ -1734,9 +1734,9 @@ "app": "HET_ARCHIEF", "component": "ADMIN_CORE", "location": "modules/content-page/const/content-block", - "key": "poederblauw", + "key": "babyblauw", "language": "en", - "value": "Poederblauw", + "value": "Baby blauw", "value_type": "TEXT" }, { diff --git a/ui/all-translations-het-archief.sql b/ui/all-translations-het-archief.sql index 91f4ab272..513f428b4 100644 --- a/ui/all-translations-het-archief.sql +++ b/ui/all-translations-het-archief.sql @@ -1691,6 +1691,8 @@ INSERT INTO app.translations ("component", "location", "key", "value", "value_ty INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/components/date-picker/date-picker', 'datum-input-aria-label', 'Specify the date here', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Specify the date here', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/components/object-metadata/object-metadata', 'bekijk-volledig-fragment', 'Bekijk volledig fragment', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Bekijk volledig fragment', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/components/object-metadata/object-metadata', 'bekijk-volledig-fragment', 'Bekijk volledig fragment', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Bekijk volledig fragment', value_type = 'TEXT'; +INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'babyblauw', 'Baby blauw', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Baby blauw', value_type = 'TEXT'; +INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'babyblauw', 'Baby blauw', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Baby blauw', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'bloesem-roze', 'Bloesem roze', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Bloesem roze', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'bloesem-roze', 'Bloesem roze', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Bloesem roze', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'honing-geel', 'Honing geel', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Honing geel', value_type = 'TEXT'; @@ -1711,8 +1713,6 @@ INSERT INTO app.translations ("component", "location", "key", "value", "value_ty INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'pistache-groen', 'Pistache groen', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Pistache groen', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'platinum', 'Platinum', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Platinum', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'platinum', 'Platinum', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Platinum', value_type = 'TEXT'; -INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'poederblauw', 'Poederblauw', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Poederblauw', value_type = 'TEXT'; -INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'poederblauw', 'Poederblauw', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Poederblauw', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'salie-groen', 'Salie groen', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Salie groen', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'salie-groen', 'Salie groen', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Salie groen', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('ADMIN_CORE', 'modules/content-page/const/content-block', 'sky-blauw', 'Sky blauw', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Sky blauw', value_type = 'TEXT'; @@ -5998,4 +5998,4 @@ INSERT INTO app.translations ("component", "location", "key", "value", "value_ty INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('FRONTEND', 'pages/zoeken/index', 'zoek-pagina-seo-omschrijving', 'Je kan op deze website centraal en online zoeken doorheen beschrijvingen van materiaal van meer dan 140 aanbieders, zonder dat je je hoeft te verplaatsen.', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Je kan op deze website centraal en online zoeken doorheen beschrijvingen van materiaal van meer dan 140 aanbieders, zonder dat je je hoeft te verplaatsen.', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('FRONTEND', 'pages/zoeken/index', 'zoek-pagina-seo-omschrijving', 'You can search centrally and online throughout descriptions of materials from more than 140 organisations without having to move.', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'You can search centrally and online throughout descriptions of materials from more than 140 organisations without having to move.', value_type = 'TEXT'; INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('FRONTEND', 'pages/zoeken/index', 'zoeken-pagina-titel', 'Search', 'TEXT', 'en') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Search', value_type = 'TEXT'; -INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('FRONTEND', 'pages/zoeken/index', 'zoeken-pagina-titel', 'Zoeken', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Zoeken', value_type = 'TEXT'; \ No newline at end of file +INSERT INTO app.translations ("component", "location", "key", "value", "value_type", "language") VALUES ('FRONTEND', 'pages/zoeken/index', 'zoeken-pagina-titel', 'Zoeken', 'TEXT', 'nl') ON CONFLICT (component, location, key, language) DO UPDATE SET value = 'Zoeken', value_type = 'TEXT'; diff --git a/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.scss b/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.scss index 20d1dd077..fa9aead2a 100644 --- a/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.scss +++ b/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.scss @@ -1,4 +1,5 @@ @use "../../../shared/styles/settings/colors" as colors; +@use "../../../shared/styles/utilities/background-text" as background-text; @use "../../../shared/styles/settings/variables" as variables; .c-content-page-overview-block__header { @@ -102,3 +103,19 @@ } } } + +/* -------------------------------------------------------------------------- + WCAG text colors on a content block's background color + + ContentBlockRenderer sets --bg-text-primary / --bg-text-secondary / --bg-text-hyperlink from + the design record. The wrapper applies primary text by inheritance; elements that have their own + color rule are tagged explicitly with one of the role classes below. Rich-text containers use + u-background-text-links because their generated anchors cannot receive a React class directly. + https://meemoo.atlassian.net/browse/ARC-3848 + + ContentBlockRenderer emits the shared mixin in client.css; the utility index emits it separately + in admin.css. All role rules are scoped to u-background-text-colors, so AVO remains untouched. + Secondary and link roles fall back to primary when the design specifies no separate role color. + -------------------------------------------------------------------------- */ + +@include background-text.background-text-roles; diff --git a/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.tsx b/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.tsx index ff2f6efd7..57cc6aba7 100644 --- a/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.tsx +++ b/ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.tsx @@ -2,7 +2,7 @@ import { Container, Spacer } from '@viaa/avo2-components'; import clsx from 'clsx'; import { kebabCase, noop, omit } from 'es-toolkit'; -import type { FunctionComponent, KeyboardEvent, RefObject } from 'react'; +import type { CSSProperties, FunctionComponent, KeyboardEvent, RefObject } from 'react'; import React, { useCallback, useEffect, useRef } from 'react'; import type { BlockBreadcrumbsProps } from '~content-blocks/BlockBreadcrumbs/BlockBreadcrumbs.types'; import { AdminConfigManager } from '~core/config/config.class'; @@ -11,7 +11,8 @@ import { GENERATED_CONTENT_BLOCK_ANCHOR_PREFIX } from '~modules/content-page/con import type { ContentPageInfo } from '~modules/content-page/types/content-pages.types'; import { ContentPageWidth } from '~modules/content-page/types/content-pages.types'; import { generateSmartLink } from '~shared/components/SmartLink/SmartLink'; -import { GET_DARK_BACKGROUND_COLOR_OPTIONS } from '../../const/get-color-options'; +import { getBackgroundTextColorVariables } from '../../const/background-text-colors'; +import { hasDarkBackground } from '../../const/get-color-options'; import { Color, type ContentBlockConfig, @@ -126,9 +127,15 @@ const ContentBlockRenderer: FunctionComponent = ({ }; } - const hasDarkBg = GET_DARK_BACKGROUND_COLOR_OPTIONS().includes( - blockState?.backgroundColor || ('' as unknown as Color) - ); + const hasDarkBg = hasDarkBackground(blockState?.backgroundColor); + // The Archief text colors specified for this background, published as css variables so text + // inside the block can take the primary, secondary or hyperlink role. On AVO this helper returns + // no variables, preserving AVO's own brand-book behavior. + // https://meemoo.atlassian.net/browse/ARC-3848 + const textColorVariables = getBackgroundTextColorVariables( + blockState?.backgroundColor + ) as CSSProperties; + const hasBackgroundTextColors = Object.keys(textColorVariables).length > 0; const anchor = blockState?.anchor?.replaceAll(' ', '-') || GENERATED_CONTENT_BLOCK_ANCHOR_PREFIX + contentBlockConfig.id; @@ -164,6 +171,7 @@ const ContentBlockRenderer: FunctionComponent = ({ ? Color.Transparent : blockState?.backgroundColor, zIndex: getZIndex(), + ...textColorVariables, }} data-anchor={anchor} ref={blockRef} @@ -183,7 +191,9 @@ const ContentBlockRenderer: FunctionComponent = ({ = ({ // biome-ignore lint/suspicious/noExplicitAny: todo return (labelObj as any).link_to ? (