From b6b37b49de6a5bdc474adaf604e2957f813db80d Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 22 Oct 2026 09:47:43 +0200 Subject: [PATCH 1/7] change secondary to stronger token --- packages/lib/src/button/utils.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index bf8c0e627..e497d42e0 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -86,7 +86,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | case "default": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger); color: var(--color-fg-primary-strong);`; - hover = `background-color: var(--color-bg-primary-strong); + hover = `background-color: var(--color-bg-primary-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-primary-stronger); color: var(--color-fg-neutral-bright);`; @@ -96,7 +96,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | case "error": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-error-medium); color: var(--color-fg-error-medium);`; - hover = `background-color: var(--color-bg-error-strong); + hover = `background-color: var(--color-bg-error-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-error-stronger); color: var(--color-fg-neutral-bright);`; @@ -108,7 +108,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-warning-medium);`; hover = `background-color: var(--color-bg-warning-stronger); color: var(--color-fg-neutral-bright);`; - active = `background-color: var(--color-bg-warning-strongest); + active = `background-color: var(--color-bg-warning-stronger); color: var(--color-fg-neutral-bright);`; disabled = `border-color: var(--border-color-warning-light); color: var(--color-fg-warning-light);`; @@ -116,9 +116,9 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | case "success": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-success-medium); color: var(--color-fg-success-medium);`; - hover = `background-color: var(--color-bg-success-strong); + hover = `background-color: var(--color-bg-success-stronger); color: var(--color-fg-neutral-bright);`; - active = `background-color: var(--color-bg-success-strongest); + active = `background-color: var(--color-bg-success-stronger); color: var(--color-fg-neutral-bright);`; disabled = `border-color: var(--border-color-success-light); color: var(--color-fg-success-light);`; @@ -126,7 +126,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | case "info": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-strong); color: var(--color-fg-info-strong);`; - hover = `background: var(--color-bg-info-strong); + hover = `background: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; From 4b3f8e2854f89d47c2071cbed9bed7f1b194fdc6 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 22 Oct 2026 11:43:19 +0200 Subject: [PATCH 2/7] Accessibility changes and remove disabledRule color-contrast --- packages/lib/src/button/utils.ts | 52 +++++++++---------- .../rules/common/disabledRules.ts | 2 - 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index e497d42e0..ef8e9e568 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -33,36 +33,36 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | break; case "selected": case "default": - enabled = `background-color: var(--color-bg-primary-strong);`; - hover = `background-color: var(--color-bg-primary-stronger);`; + enabled = `background-color: var(--color-bg-primary-stronger);`; + hover = `background-color: var(--color-bg-primary-strongest);`; active = `background-color: var(--color-bg-primary-strongest);`; disabled = `background-color: var(--color-bg-primary-lightest); color: var(--color-fg-primary-light);`; break; case "error": - enabled = `background-color: var(--color-bg-error-strong);`; - hover = `background-color: var(--color-bg-error-stronger);`; + enabled = `background-color: var(--color-bg-error-stronger);`; + hover = `background-color: var(--color-bg-error-strongest);`; active = `background-color: var(--color-bg-error-strongest);`; disabled = `background-color: var(--color-bg-error-lightest); color: var(--color-fg-error-light);`; break; case "warning": - enabled = `background-color: var(--color-bg-warning-strong);`; - hover = `background-color: var(--color-bg-warning-stronger);`; + enabled = `background-color: var(--color-bg-warning-stronger);`; + hover = `background-color: var(--color-bg-warning-strongest);`; active = `background-color: var(--color-bg-warning-strongest);`; disabled = `background-color: var(--color-bg-warning-lightest); color: var(--color-fg-warning-light);`; break; case "success": - enabled = `background-color: var(--color-bg-success-strong);`; - hover = `background-color: var(--color-bg-success-stronger);`; + enabled = `background-color: var(--color-bg-success-stronger);`; + hover = `background-color: var(--color-bg-success-strongest);`; active = `background-color: var(--color-bg-success-strongest);`; disabled = `background-color: var(--color-bg-success-lightest); color: var(--color-fg-success-light);`; break; case "info": - enabled = `background-color: var(--color-bg-info-strong);`; - hover = `background-color: var(--color-bg-info-stronger);`; + enabled = `background-color: var(--color-bg-info-stronger);`; + hover = `background-color: var(--color-bg-info-strongest);`; active = `background-color: var(--color-bg-info-strongest);`; disabled = `background-color: var(--color-bg-info-lightest); color: var(--color-fg-info-medium);`; @@ -85,7 +85,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | switch (semantic) { case "default": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger); - color: var(--color-fg-primary-strong);`; + color: var(--color-fg-primary-stronger);`; hover = `background-color: var(--color-bg-primary-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-primary-stronger); @@ -94,8 +94,8 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-primary-light);`; break; case "error": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-error-medium); - color: var(--color-fg-error-medium);`; + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-error-strong); + color: var(--color-fg-error-strong);`; hover = `background-color: var(--color-bg-error-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-error-stronger); @@ -104,8 +104,8 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-error-light);`; break; case "warning": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-warning-medium); - color: var(--color-fg-warning-medium);`; + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-warning-strong); + color: var(--color-fg-warning-stronger);`; hover = `background-color: var(--color-bg-warning-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-warning-stronger); @@ -114,8 +114,8 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-warning-light);`; break; case "success": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-success-medium); - color: var(--color-fg-success-medium);`; + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-success-strong); + color: var(--color-fg-success-strong);`; hover = `background-color: var(--color-bg-success-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-success-stronger); @@ -124,8 +124,8 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-success-light);`; break; case "info": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-strong); - color: var(--color-fg-info-strong);`; + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-stronger); + color: var(--color-fg-info-stronger);`; hover = `background: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-info-stronger); @@ -151,31 +151,31 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | case "tertiary": switch (semantic) { case "default": - enabled = `color: var(--color-fg-primary-strong);`; + enabled = `color: var(--color-fg-primary-stronger);`; hover = `background-color: var(--color-bg-primary-lighter);`; active = `background-color: var(--color-bg-primary-light);`; disabled = `color: var(--color-fg-primary-light);`; break; case "error": - enabled = `color: var(--color-fg-error-medium);`; - hover = `var(--color-bg-error-lighter);`; + enabled = `color: var(--color-fg-error-strong);`; + hover = `background-color: var(--color-bg-error-lighter);`; active = `background-color: background: var(--color-bg-error-light);`; disabled = `color: var(--color-fg-error-light);`; break; case "warning": - enabled = `color: var(--color-fg-warning-medium);`; + enabled = `color: var(--color-fg-warning-stronger);`; hover = `background-color: var(--color-bg-warning-lighter);`; active = `background-color: var(--color-bg-warning-light);`; disabled = `color: var(--color-fg-warning-light);`; break; case "success": - enabled = `color: var(--color-fg-success-medium);`; + enabled = `color: var(--color-fg-success-strong);`; hover = `background-color: var(--color-bg-success-lighter);`; active = `background-color: var(--color-bg-success-light);`; disabled = `color: var(--color-fg-success-light);`; break; case "info": - enabled = `color: var(--color-fg-info-strong);`; + enabled = `color: var(--color-fg-info-stronger);`; hover = `background-color: var(--color-bg-info-lighter);`; active = `background-color: var(--color-bg-info-light);`; disabled = `color: var(--color-fg-info-medium);`; @@ -183,7 +183,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | } return `${commonStyles} background-color: transparent; - color: var(--color-fg-primary-strong); + color: var(--color-fg-primary-stronger); ${enabled} &:hover:enabled { ${hover} diff --git a/packages/lib/test/accessibility/rules/common/disabledRules.ts b/packages/lib/test/accessibility/rules/common/disabledRules.ts index ff2741a99..c0cd89888 100644 --- a/packages/lib/test/accessibility/rules/common/disabledRules.ts +++ b/packages/lib/test/accessibility/rules/common/disabledRules.ts @@ -10,8 +10,6 @@ const disabledRules = [ "region", // Disable label rule to prevent error from inputs that have no label on purpose (even though it is not really recommended for accessibility) "label", - // TODO: REMOVE - "color-contrast", ]; export default disabledRules; From 25b95266dde8df3aa1e0fbda8a3e3238531150ed Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 22 Oct 2026 13:08:55 +0200 Subject: [PATCH 3/7] remove #fabada at link stories --- packages/lib/src/link/Link.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/link/Link.stories.tsx b/packages/lib/src/link/Link.stories.tsx index 5b60a15aa..cd252c1e7 100644 --- a/packages/lib/src/link/Link.stories.tsx +++ b/packages/lib/src/link/Link.stories.tsx @@ -56,7 +56,7 @@ const Link = () => ( - <span style={{ color: "#fabada" }}> + <span style={{ color: "#333333" }}> This is a <DxcLink inheritColor>Test</DxcLink>. </span> </ExampleContainer> From 1e7cfab27af5c825e8ac38bb1d524beef4f012c0 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 22 Oct 2026 13:15:36 +0200 Subject: [PATCH 4/7] card updates --- packages/lib/src/card/Card.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/card/Card.tsx b/packages/lib/src/card/Card.tsx index eec25a033..e9b14e6a4 100644 --- a/packages/lib/src/card/Card.tsx +++ b/packages/lib/src/card/Card.tsx @@ -132,12 +132,16 @@ const DxcCard = ({ <EmptyCard mode={mode} emptySize={emptySize} size={size}> <DxcFlex direction="column" alignItems="center" gap="var(--spacing-gap-xs)"> <DxcTypography - color="var(--color-fg-neutral-strong)" + color="var(--color-fg-neutral-strongest)" fontSize={emptyIconSizes[emptySize?.iconSize || "medium"]} > <DxcIcon icon="text_snippet" /> </DxcTypography> - <DxcTypography color="var(--color-fg-neutral-strong)" fontSize="var(--typography-label-s)"> + <DxcTypography + color="var(--color-fg-neutral-strongest)" + fontSize="var(--typography-label-m)" + fontWeight="var(--typography-label-regular)" + > {translatedLabels?.card?.noContent || "No content"} </DxcTypography> </DxcFlex> From 0837e62094dbaae9ba4445136023f198c451897b Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 22 Oct 2026 13:26:20 +0200 Subject: [PATCH 5/7] add aria-disabled to input components --- packages/lib/src/date-input/DateInput.tsx | 2 +- packages/lib/src/message-input/MessageInput.tsx | 1 + packages/lib/src/radio-group/RadioGroup.tsx | 2 +- packages/lib/src/select/Select.tsx | 2 +- packages/lib/src/slider/Slider.tsx | 2 +- packages/lib/src/text-input/TextInput.tsx | 2 +- packages/lib/src/textarea/Textarea.tsx | 2 +- packages/lib/src/time-input/TimeInput.tsx | 1 + 8 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index b5bd0ca02..4ceb0116e 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/packages/lib/src/date-input/DateInput.tsx @@ -237,7 +237,7 @@ const DxcDateInput = ({ return ( <> - <DateInputContainer margin={margin} size={size} ref={ref}> + <DateInputContainer aria-disabled={disabled} margin={margin} size={size} ref={ref}> {label && ( <Label htmlFor={dateRef.current?.getElementsByTagName("input")[0]?.id} diff --git a/packages/lib/src/message-input/MessageInput.tsx b/packages/lib/src/message-input/MessageInput.tsx index 6d91494c3..cda073b46 100644 --- a/packages/lib/src/message-input/MessageInput.tsx +++ b/packages/lib/src/message-input/MessageInput.tsx @@ -284,6 +284,7 @@ const DxcMessageInput = ({ return ( <DxcContainer width={sizes[size]}> <MessageInput + aria-disabled={disabled} disabled={disabled} error={!!error} focus={isFocused} diff --git a/packages/lib/src/radio-group/RadioGroup.tsx b/packages/lib/src/radio-group/RadioGroup.tsx index 671cb0a71..e3fa65912 100644 --- a/packages/lib/src/radio-group/RadioGroup.tsx +++ b/packages/lib/src/radio-group/RadioGroup.tsx @@ -142,7 +142,7 @@ const DxcRadioGroup = ({ }; return ( - <RadioGroupContainer ref={ref}> + <RadioGroupContainer aria-disabled={disabled} ref={ref}> {label && ( <Label disabled={disabled} hasMargin={!helperText} id={labelId}> {label} diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 0732e2fd8..c8b1fc585 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -478,7 +478,7 @@ const DxcSelect = ({ return ( <> - <SelectContainer margin={margin} ref={ref} size={size}> + <SelectContainer aria-disabled={disabled} margin={margin} ref={ref} size={size}> {label && ( <Label disabled={disabled} diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx index 7c8c8e80d..679dde6c6 100644 --- a/packages/lib/src/slider/Slider.tsx +++ b/packages/lib/src/slider/Slider.tsx @@ -207,7 +207,7 @@ const DxcSlider = ({ }; return ( - <SliderContainer margin={margin} size={size} ref={ref}> + <SliderContainer aria-disabled={disabled} margin={margin} size={size} ref={ref}> {label && ( <Label id={labelId} disabled={disabled}> {label} diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 081ff4552..34d3a6c9f 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -488,7 +488,7 @@ const DxcTextInput = ({ return ( <> - <TextInputContainer margin={margin} ref={ref} size={size}> + <TextInputContainer aria-disabled={disabled} margin={margin} ref={ref} size={size}> {label && ( <Label disabled={disabled} hasMargin={!helperText} htmlFor={inputId}> {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>} diff --git a/packages/lib/src/textarea/Textarea.tsx b/packages/lib/src/textarea/Textarea.tsx index d34b64f03..77b877cee 100644 --- a/packages/lib/src/textarea/Textarea.tsx +++ b/packages/lib/src/textarea/Textarea.tsx @@ -168,7 +168,7 @@ const DxcTextarea = ({ }, [innerValue, rows, value, verticalGrow]); return ( - <TextareaContainer margin={margin} size={size} ref={ref}> + <TextareaContainer aria-disabled={disabled} margin={margin} size={size} ref={ref}> {label && ( <Label disabled={disabled} hasMargin={!helperText} htmlFor={textareaId}> {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>} diff --git a/packages/lib/src/time-input/TimeInput.tsx b/packages/lib/src/time-input/TimeInput.tsx index 354a877b9..1f2cc2c4c 100644 --- a/packages/lib/src/time-input/TimeInput.tsx +++ b/packages/lib/src/time-input/TimeInput.tsx @@ -193,6 +193,7 @@ const DxcTimeInput = ({ return ( <> <TimeInputContainer + aria-disabled={disabled} size={size} ref={ref} onBlur={() => { From 26f9fd19d9dd05fa74507a6d3305c42f0bbe2842 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Thu, 22 Oct 2026 14:32:19 +0200 Subject: [PATCH 6/7] Update Calendar color --- packages/lib/src/date-input/Calendar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/date-input/Calendar.tsx b/packages/lib/src/date-input/Calendar.tsx index 554e02718..cb764c053 100644 --- a/packages/lib/src/date-input/Calendar.tsx +++ b/packages/lib/src/date-input/Calendar.tsx @@ -70,7 +70,7 @@ const DayCellButton = styled.button<{ props.selected ? "var(--color-fg-neutral-bright);" : !props.actualMonth - ? "var(--color-fg-neutral-medium);" + ? "var(--color-fg-neutral-strong);" : "var(--color-fg-neutral-dark);"}; ${(props) => From 533c4dc31330b586ca10c9e4618c5f7c25bd310f Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Fri, 23 Oct 2026 08:09:21 +0200 Subject: [PATCH 7/7] fix typo at variables.css --- packages/lib/src/styles/variables.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index 3b84bb5e5..30020db62 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -177,7 +177,7 @@ --border-color-info-strongest: var(--color-semantic01-800); --border-color-success-light: var(--color-semantic02-300); --border-color-success-medium: var(--color-semantic02-600); - --border-color-succes-strong: var(--color-semantic02-700) ; + --border-color-success-strong: var(--color-semantic02-700) ; --border-color-warning-light: var(--color-semantic03-300); --border-color-warning-medium: var(--color-semantic03-500); --border-color-warning-strong: var(--color-semantic03-600);