From c73fbc78c69fb28293792632211e0635880d368d Mon Sep 17 00:00:00 2001 From: Thijn Date: Mon, 9 Feb 2026 13:34:32 +0100 Subject: [PATCH 1/6] updated logo to accept aria-label --- README.md | 1 + src/components/logo/Logo.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index da533a2..c004173 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 2.2.55: Updated Logo to accept aria-label for accessibility. - 2.2.54: Updated CardHeader to allow padding-block-end on title. - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms. - 2.2.52: Added hover filter to Logo component. diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index bd5a047..66c66a2 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -6,15 +6,18 @@ interface LogoProps { variant?: "header" | "footer" | "navbar"; onClick?: () => any; layoutClassName?: string; + "aria-label"?: string; } -export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header" }) => { +export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header", "aria-label": ariaLabel = "logo" }) => { return (
); From 0850e9532cda73ec331b4e93b533986d6b7bdda1 Mon Sep 17 00:00:00 2001 From: Thijn Date: Mon, 9 Feb 2026 13:38:42 +0100 Subject: [PATCH 2/6] fixed issue in DisplaySwitch where layoutClassName is always added --- README.md | 4 +++- src/components/displaySwitch/DisplaySwitch.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c004173..f3a94ab 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.55: Updated Logo to accept aria-label for accessibility. + - 2.2.55: + - Updated Logo to accept aria-label for accessibility. + - Fixed bug in DisplaySwitch where layoutClassName is added even when empty - 2.2.54: Updated CardHeader to allow padding-block-end on title. - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms. - 2.2.52: Added hover filter to Logo component. diff --git a/src/components/displaySwitch/DisplaySwitch.tsx b/src/components/displaySwitch/DisplaySwitch.tsx index 5e2cd2c..9c8894e 100644 --- a/src/components/displaySwitch/DisplaySwitch.tsx +++ b/src/components/displaySwitch/DisplaySwitch.tsx @@ -25,7 +25,7 @@ export declare type IDisplaySwitchButton = DisplaySwitchButtonProps; const DisplaySwitch: React.FC = ({ layoutClassName, buttons }) => { return ( - + {buttons.map((button, idx: number) => { // TODO: Once the Rotterdam design system supports the "pressed" state, // remove the `appereance` switch, and use the same appearance for each button. From c36e7f69b47e15c73f6ebdd6279163a7b6c9be06 Mon Sep 17 00:00:00 2001 From: Thijn Date: Mon, 9 Feb 2026 15:35:51 +0100 Subject: [PATCH 3/6] WOO-451 - fixed select dropdown icon color to be WCAG AA compliant --- README.md | 3 ++- src/components/formFields/select/select.tsx | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f3a94ab..0e88612 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,8 @@ - 2.2.55: - Updated Logo to accept aria-label for accessibility. - - Fixed bug in DisplaySwitch where layoutClassName is added even when empty + - Fixed bug in DisplaySwitch where layoutClassName is added even when empty. + - Fixed color of the Select dropdown icon to be WCAG-AA compliant. - 2.2.54: Updated CardHeader to allow padding-block-end on title. - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms. - 2.2.52: Added hover filter to Logo component. diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 75e17b0..06ac454 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -56,6 +56,13 @@ const selectStyles: StylesConfig = { fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`, color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`, }), + dropdownIndicator: (base) => ({ + ...base, + color: "#949494", + "&:hover": { + color: "#949494", + }, + }), }; const setAttributes = (): void => { From 625e1c497ea2a426b8fa9b453111ce648ccb7b36 Mon Sep 17 00:00:00 2001 From: Remko Date: Mon, 9 Feb 2026 16:00:45 +0100 Subject: [PATCH 4/6] Fixed WCAG errors --- src/components/formFields/select/select.tsx | 42 +++++++++++++++++++++ src/components/logo/Logo.tsx | 5 ++- 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 75e17b0..48f0440 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -68,9 +68,51 @@ const setAttributes = (): void => { }); }; + const updateIndicatorAttributes = (indicator: HTMLElement, isInteractive: boolean) => { + if (isInteractive) { + indicator.setAttribute("role", "button"); + indicator.setAttribute("tabindex", "0"); + indicator.setAttribute("aria-label", "Clear selection"); + } else { + indicator.setAttribute("role", "presentation"); + indicator.removeAttribute("tabindex"); + indicator.removeAttribute("aria-label"); + } + }; + + const setAriaLabelsForIndicators = () => { + document.querySelectorAll('[class*="control"]').forEach((control) => { + const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement; + if (!indicatorsParent) return; + + const indicators = indicatorsParent.querySelectorAll('[class*="indicatorContainer"]'); + const hasSelection = indicators.length === 2; + + indicators.forEach((indicator, index) => { + const isClearButton = hasSelection && index === 0; + updateIndicatorAttributes(indicator as HTMLElement, isClearButton); + }); + }); + }; + + // Initial static setup setRoleToPresentation('[id*="live-region"]', "presentation"); setRoleToPresentation('[class*="indicatorSeparator"]', "separator"); setRoleToPresentation('[class*="a11yText"]', "presentation"); + + // Dynamic setup after render + setTimeout(() => { + setAriaLabelsForIndicators(); + + const observer = new MutationObserver(setAriaLabelsForIndicators); + + document.querySelectorAll('[class*="control"]').forEach((control) => { + const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement; + if (indicatorsParent) { + observer.observe(indicatorsParent, { childList: true, subtree: false }); + } + }); + }, 100); }; export const SelectMultiple = ({ diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index bd5a047..c7c2ad1 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -6,15 +6,18 @@ interface LogoProps { variant?: "header" | "footer" | "navbar"; onClick?: () => any; layoutClassName?: string; + altText?: string; } -export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header" }) => { +export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header", altText }) => { return (
); From 86c0537fc3900a6ab91c7f99babd4b7a02beb142 Mon Sep 17 00:00:00 2001 From: Thijn Date: Mon, 9 Feb 2026 16:11:29 +0100 Subject: [PATCH 5/6] updated logo to use camelCase aria label --- src/components/logo/Logo.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index 66c66a2..45a7e42 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -6,10 +6,10 @@ interface LogoProps { variant?: "header" | "footer" | "navbar"; onClick?: () => any; layoutClassName?: string; - "aria-label"?: string; + ariaLabel?: string; } -export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header", "aria-label": ariaLabel = "logo" }) => { +export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => { return (
= ({ onClick, layoutClassName, variant = layoutClassName && layoutClassName, ])} role="img" - {...{ "aria-label": ariaLabel }} + aria-label={ariaLabel} {...{ onClick }} /> ); From d97938e487dcda68cc71274c5505f602373ae491 Mon Sep 17 00:00:00 2001 From: Thijn Date: Tue, 10 Feb 2026 09:58:31 +0100 Subject: [PATCH 6/6] updated package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f477105..217824b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.54", + "version": "2.2.55", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": {