From 18ad3c864871a17bb49cd14e017a84354fb0f89e Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 19 Oct 2026 16:39:20 +0200 Subject: [PATCH 1/2] Update accessibility on textInput prefix and suffix --- packages/lib/src/text-input/TextInput.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index a77ca3c26..ae2ec9911 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -98,8 +98,9 @@ const Input = styled.input<{ const Addon = styled.span<{ disabled: TextInputPropsType["disabled"]; type: "prefix" | "suffix" }>` ${({ disabled, type }) => { - const color = disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)"; - return `color: ${color}; border-${type === "prefix" ? "right" : "left"}: var(--border-width-s) var(--border-style-default) ${color};`; + const textColor = disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)"; + const borderColor = disabled ? "var(--color-fg-neutral-lighter)" : "var(--color-fg-neutral-strong)"; + return `color: ${textColor}; border-${type === "prefix" ? "right" : "left"}: var(--border-width-s) var(--border-style-default) ${borderColor};`; }}; font-family: var(--typography-font-family); font-size: var(--typography-label-m); From 5cc916954f55533676478f81eaf8c5e4259325d1 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 21 Oct 2026 09:02:59 +0200 Subject: [PATCH 2/2] use border tokens at prefix/suffix divider --- packages/lib/src/text-input/TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index ae2ec9911..052348951 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -99,7 +99,7 @@ const Input = styled.input<{ const Addon = styled.span<{ disabled: TextInputPropsType["disabled"]; type: "prefix" | "suffix" }>` ${({ disabled, type }) => { const textColor = disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-stronger)"; - const borderColor = disabled ? "var(--color-fg-neutral-lighter)" : "var(--color-fg-neutral-strong)"; + const borderColor = disabled ? "var(--border-color-neutral-lighter)" : "var(--border-color-neutral-strong)"; return `color: ${textColor}; border-${type === "prefix" ? "right" : "left"}: var(--border-width-s) var(--border-style-default) ${borderColor};`; }}; font-family: var(--typography-font-family);