@eccenca/gui-elements 25.1.0-rc.1 → 25.1.0-rc.3

package/src/components/ColorField/ColorField.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { ColorField } from "./ColorField";
+
+describe("ColorField", () => {
+    describe("rendering", () => {
+        it("renders without crashing, and correct component CSS class is applied", () => {
+            const { container } = render(<ColorField />);
+            expect(container).not.toBeEmptyDOMElement();
+            expect(container.getElementsByClassName(`${eccgui}-colorfield`).length).toBe(1);
+        });
+
+        it("renders a color input by default (no palette presets)", () => {
+            const { container } = render(<ColorField colorPresets={[]} allowCustomColor={true} />);
+            expect(container.querySelector("input[type='color']")).toBeInTheDocument();
+        });
+
+        it("renders a readonly text input when palette colors are configured, and custom picker CSS class is applied", () => {
+            const { container } = render(
+                <ColorField
+                    className="my-custom-class"
+                    colorPresets={[
+                        ["my-black", "#000000"],
+                        ["my-white", "#ffffff"],
+                    ]}
+                />
+            );
+            // With default palette settings, a text input with readOnly is shown
+            expect(container.querySelector("input[type='text']")).toBeInTheDocument();
+            expect(container.querySelector("input[readonly]")).toBeInTheDocument();
+            expect(container.querySelector(`.${eccgui}-colorfield--custom-picker`)).toBeInTheDocument();
+        });
+
+        it("applies additional className", () => {
+            render(<ColorField className="my-custom-class" colorPresets={[]} allowCustomColor={true} />);
+            expect(document.querySelector(".my-custom-class")).toBeInTheDocument();
+        });
+    });
+
+    describe("value handling", () => {
+        it("uses defaultValue as initial color", () => {
+            render(<ColorField defaultValue="#ff0000" colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#ff0000");
+        });
+
+        it("uses value prop as initial color", () => {
+            render(<ColorField value="#00ff00" colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#00ff00");
+        });
+
+        it("falls back to #000000 when no value or defaultValue is provided", () => {
+            render(<ColorField colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#000000");
+        });
+
+        it("updates displayed value when value prop changes", () => {
+            const { rerender } = render(<ColorField value="#ff0000" colorPresets={[]} allowCustomColor={true} />);
+            let input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#ff0000");
+
+            rerender(<ColorField value="#0000ff" colorPresets={[]} allowCustomColor={true} />);
+            input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#0000ff");
+        });
+    });
+
+    describe("disabled state", () => {
+        it("is disabled when disabled prop is true", () => {
+            render(<ColorField disabled colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input).toBeDisabled();
+        });
+
+        it("is disabled when no palette colors and allowCustomColor is false", () => {
+            render(<ColorField colorPresets={[]} allowCustomColor={false} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input).toBeDisabled();
+        });
+    });
+
+    describe("onChange callback", () => {
+        it("calls onChange when native color input changes", async () => {
+            const user = userEvent.setup();
+            const onChange = jest.fn();
+            render(<ColorField onChange={onChange} colorPresets={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input[type='color']") as HTMLInputElement;
+            input.type = "text"; // for unknown reasons Jest seems not able to test it on color inputs
+            await user.type(input, "#123456");
+            expect(onChange).toHaveBeenCalled();
+        });
+    });
+});

package/src/components/ColorField/ColorField.tsx

@@ -0,0 +1,200 @@
+import React, { CSSProperties } from "react";
+import classNames from "classnames";
+import Color from "color";
+
+import { utils } from "../../common";
+import { getEnabledColorsProps } from "../../common/utils/colorHash";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlay } from "../ContextOverlay";
+import { FieldSet } from "../Form";
+import { RadioButton } from "../RadioButton/RadioButton";
+import { Spacing } from "../Separation/Spacing";
+import { Tag, TagList } from "../Tag";
+import { TextField, TextFieldProps } from "../TextField";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { WhiteSpaceContainer } from "../Typography";
+
+type ColorPresets = [string, string][] | [string, Color][];
+type ColorPresetConfiguration = Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
+
+export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
+    /**
+     * Any color can be selected, not only from the color presets.
+     */
+    allowCustomColor?: boolean;
+    /**
+     * List of named colors that are used a selectable color options.
+     */
+    colorPresets?: ColorPresets;
+}
+
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `includeColorWeight` and `includePaletteGroup` to filter them.
+ */
+export const ColorField = ({
+    className = "",
+    allowCustomColor = false,
+    colorPresets = listColorPalettePresets(),
+    defaultValue,
+    value,
+    onChange,
+    fullWidth = false,
+    ...otherTextFieldProps
+}: ColorFieldProps) => {
+    const ref = React.useRef(null);
+    const [colorValue, setColorValue] = React.useState<string>(defaultValue || value || "#000000");
+    if (value && value !== colorValue) {
+        setColorValue(value);
+    }
+
+    const disableNativePicker = colorPresets.length > 0;
+    const disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+
+    const forwardOnChange = (forwardedEvent: React.ChangeEvent<HTMLInputElement>) => {
+        setColorValue(forwardedEvent.target.value);
+        if (onChange) {
+            onChange(forwardedEvent);
+        }
+    };
+
+    const colorInput = (
+        <TextField
+            inputRef={ref}
+            className={classNames(`${eccgui}-colorfield`, className, {
+                [`${eccgui}-colorfield--custom-picker`]: disableNativePicker,
+                [`${eccgui}-colorfield--disabled`]: disabled,
+            })}
+            // we cannot use `color` type for the custom picker because we do not have control over it then
+            type={!disableNativePicker ? "color" : "text"}
+            readOnly={disableNativePicker}
+            disabled={disabled}
+            value={colorValue}
+            fullWidth={fullWidth}
+            {...otherTextFieldProps}
+            onChange={
+                !disableNativePicker
+                    ? (e: React.ChangeEvent<HTMLInputElement>) => {
+                          forwardOnChange(e);
+                      }
+                    : undefined
+            }
+            style={{ ...otherTextFieldProps.style, [`--eccgui-colorfield-background`]: colorValue } as CSSProperties}
+        />
+    );
+
+    return disableNativePicker && !disabled ? (
+        <ContextOverlay
+            fill={fullWidth}
+            content={
+                <WhiteSpaceContainer
+                    paddingTop={"small"}
+                    paddingRight={"small"}
+                    paddingBottom={"small"}
+                    paddingLeft={"small"}
+                    className={`${eccgui}-colorfield__picker`}
+                >
+                    {allowCustomColor && (
+                        <>
+                            <TextField
+                                type={"color"}
+                                value={colorValue}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    forwardOnChange(e);
+                                }}
+                            />
+                            <Spacing size={"small"} />
+                        </>
+                    )}
+                    <FieldSet>
+                        <TagList className={`${eccgui}-colorfield__palette`}>
+                            {colorPresets!.map((color: [string, string | Color], idx: number) => [
+                                <RadioButton
+                                    key={idx}
+                                    className={`${eccgui}-colorfield__palette__color`}
+                                    hideIndicator
+                                    value={typeof color[1] === "string" ? color[1] : color[1].toString()}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        forwardOnChange(e);
+                                    }}
+                                >
+                                    <Tooltip content={color[0]}>
+                                        <Tag
+                                            large
+                                            style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
+                                        >
+                                            {color[1]}
+                                        </Tag>
+                                    </Tooltip>
+                                </RadioButton>,
+                                // Looks like we cannot force some type of line break in the tag list via CSS only
+                                (idx + 1) % 8 === 0 && (
+                                    <>
+                                        <br className={`${eccgui}-colorfield__palette-linebreak`} />
+                                    </>
+                                ),
+                            ])}
+                        </TagList>
+                    </FieldSet>
+                </WhiteSpaceContainer>
+            }
+        >
+            {colorInput}
+        </ContextOverlay>
+    ) : (
+        colorInput
+    );
+};
+
+const defaultColorPaletteSet: ColorPresetConfiguration = {
+    // on default, we only include color weights that can have enough contrasts to black/white
+    includeColorWeight: [100, 300, 700, 900],
+    // on default, we only include layout colors
+    includePaletteGroup: ["layout"],
+};
+
+/**
+ * Simple helper function to get a list of colors defined in the color palette.
+ */
+const listColorPalettePresets = (colorPaletteSet = defaultColorPaletteSet) => {
+    return utils
+        .getEnabledColorPropertiesFromPalette({
+            ...colorPaletteSet,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        })
+        .map((color: [string, string | Color]) => [
+            color[0].replace(`${eccgui}-color-palette-`, ""),
+            color[1],
+        ]) as ColorPresets;
+};
+
+ColorField.listColorPalettePresets = listColorPalettePresets;
+
+type calculateColorHashValueProps = Pick<ColorFieldProps, "allowCustomColor"> & ColorPresetConfiguration;
+
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ */
+ColorField.calculateColorHashValue = (
+    text: string,
+    options: calculateColorHashValueProps = {
+        ...defaultColorPaletteSet,
+        allowCustomColor: false,
+    }
+) => {
+    const hash = utils.textToColorHash({
+        text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor as boolean,
+            enabledColors: utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.includePaletteGroup,
+                includeColorWeight: options.includeColorWeight,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+
+    return hash ? hash : undefined;
+};
+
+export default ColorField;

package/src/components/ColorField/_colorfield.scss

@@ -0,0 +1,67 @@
+.#{$eccgui}-colorfield {
+    cursor: default;
+
+    &:not(.#{$ns}-fill) {
+        width: 100%;
+        max-width: 4 * $eccgui-size-textfield-height-regular;
+    }
+
+    .#{$ns}-input {
+        color: var(--#{$eccgui}-colorfield-background);
+        cursor: inherit;
+        background-color: var(--#{$eccgui}-colorfield-background);
+
+        &[type="color"] {
+            &::-webkit-color-swatch-wrapper {
+                display: none;
+            }
+
+            &::-moz-color-swatch {
+                display: none;
+            }
+        }
+    }
+
+    &[class*="#{$ns}-intent-"] {
+        // we need to remove normal intent indicators like colored bg or blinking
+        .#{$ns}-input {
+            background-color: var(--#{$eccgui}-colorfield-background);
+        }
+    }
+
+    .#{$ns}-input-left-container {
+        top: 1px;
+        left: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+    .#{$ns}-input-action {
+        top: 1px;
+        right: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+}
+
+.#{$eccgui}-colorfield--disabled {
+    opacity: $eccgui-opacity-disabled;
+}
+
+.#{$eccgui}-colorfield__palette {
+    & > li:has(.#{$eccgui}-colorfield__palette-linebreak) {
+        display: block;
+        width: 100%;
+        height: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+}
+
+.#{$eccgui}-colorfield__palette__color {
+    margin: 0;
+    .#{$eccgui}-tag__item {
+        width: 3rem;
+        color: var(--#{$eccgui}-colorfield-palette-color) !important;
+        background-color: var(--#{$eccgui}-colorfield-palette-color) !important;
+    }
+}

package/src/components/Dialog/dialog.scss

@@ -22,6 +22,14 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
     z-index: $eccgui-zindex-modals;
 }
 
+.#{$ns}-overlay-start-focus-trap,
+.#{$ns}-overlay-end-focus-trap {
+    // do not show focus on trap elements, we need to fix keeping focus on modal elements differently later
+    &[tabindex]:not([tabindex^="-"]):focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
+    }
+}
+
 .#{$eccgui}-dialog__backdrop {
     background-color: $eccgui-color-modal-backdrop;
 }

package/src/components/Link/link.scss

@@ -31,13 +31,12 @@
         }
     }
 
-    &:focus {
-        outline: none;
-        outline-offset: 0;
+    &:focus:not(.#{$prefix}--link--disabled) {
+        @include focus-by-pointer;
     }
 
-    &:focus-visible {
-        outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
-        outline-offset: 1px;
+    &:focus-visible:not(.#{$prefix}--link--disabled) {
+        @include focus-by-keyboard-static;
+        @include focus-by-keyboard-animation;
     }
 }

package/src/components/MultiSuggestField/_multisuggestfield.scss

@@ -6,3 +6,21 @@
         max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
     }
 }
+
+.#{$eccgui}-multisuggestfield {
+    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
+    &.#{$ns}-intent-success {
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
+    }
+    &.#{$ns}-intent-warning {
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
+    }
+    &.#{$ns}-intent-danger {
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
+    }
+
+    &:focus-within {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+    }
+}

package/src/components/RadioButton/RadioButton.tsx

@@ -1,13 +1,25 @@
 import React from "react";
 import { Radio as BlueprintRadioButton, RadioProps as BlueprintRadioProps } from "@blueprintjs/core";
+import classNames from "classnames";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type RadioButtonProps = BlueprintRadioProps;
+export interface RadioButtonProps extends BlueprintRadioProps {
+    /**
+     * Hide the indicator.
+     * The element cannot be identified as radio input then but a click on the children can be easily processed via `onChange` event.
+     */
+    hideIndicator?: boolean;
+}
 
-export const RadioButton = ({ children, className = "", ...restProps }: RadioButtonProps) => {
+export const RadioButton = ({ children, className = "", hideIndicator = false, ...restProps }: RadioButtonProps) => {
     return (
-        <BlueprintRadioButton {...restProps} className={`${eccgui}-radiobutton ` + className}>
+        <BlueprintRadioButton
+            {...restProps}
+            className={classNames(`${eccgui}-radiobutton`, className, {
+                [`${eccgui}-radiobutton--hidden-indicator`]: hideIndicator,
+            })}
+        >
             {children}
         </BlueprintRadioButton>
     );

package/src/components/RadioButton/radiobutton.scss

@@ -1,6 +1,10 @@
 // Checkbox need to be imported before, we won't double it here currently
 
 .#{$ns}-control {
+    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+    --#{$eccgui}-a11y-outline-width: 2px;
+    --#{$eccgui}-a11y-outline-offset: 0;
+
     &.#{$ns}-radio {
         input ~ .#{$ns}-control-indicator,
         input:checked ~ .#{$ns}-control-indicator {
@@ -8,7 +12,7 @@
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            outline-offset: 1px;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
@@ -29,3 +33,16 @@
         }
     }
 }
+
+.#{$eccgui}-radiobutton--hidden-indicator {
+    &:not(.#{$ns}-align-right) {
+        padding-inline-start: 0;
+    }
+    &:not(.#{$ns}-align-left) {
+        padding-inline-end: 0;
+    }
+
+    input ~ .#{$ns}-control-indicator {
+        visibility: hidden;
+    }
+}

package/src/components/TextField/stories/TextField.stories.tsx

@@ -61,3 +61,26 @@ const invisibleCharacterWarningProps: TextFieldProps = {
     defaultValue: "Invisible character ->​<-",
 };
 InvisibleCharacterWarning.args = invisibleCharacterWarningProps;
+
+/** Text field showing that emoji (✔️ variation-selector, 👨‍👩‍👧‍👦 ZWJ,  #️⃣ keycap)
+ * are NOT reported as invisible characters, while a genuine ZWS still is. */
+export const InvisibleCharacterWarningWithEmoji = Template.bind({});
+
+const invisibleCharacterWarningWithEmojiProps: TextFieldProps = {
+    ...Default.args,
+    invisibleCharacterWarning: {
+        callback: (codePoints) => {
+            if (codePoints.size) {
+                const codePointsString = [...codePoints]
+                    .map((n) => characters.invisibleZeroWidthCharacters.codePointMap.get(n)?.fullLabel)
+                    .join(", ");
+                alert("Invisible character detected in input string. Code points: " + codePointsString);
+            }
+        },
+        callbackDelay: 500,
+    },
+    onChange: () => {},
+    // ZWS should be flagged; ✔️ 👨‍👩‍👧‍👦 #️⃣ should NOT be flagged
+    defaultValue: "Check\u200B ✔️ 👨‍👩‍👧‍👦 #️⃣",
+};
+InvisibleCharacterWarningWithEmoji.args = invisibleCharacterWarningWithEmojiProps;

package/src/components/TextField/tests/useTextValidation.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { act, render } from "@testing-library/react";
+
+import { useTextValidation } from "../useTextValidation";
+
+const HookWrapper: React.FC<{ value: string; callback: jest.Mock; callbackDelay?: number }> = ({
+    value,
+    callback,
+    callbackDelay = 0,
+}) => {
+    useTextValidation({
+        value,
+        onChange: jest.fn(),
+        invisibleCharacterWarning: { callback, callbackDelay },
+    });
+    return null;
+};
+
+describe("useTextValidation", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    /** Render the hook with a controlled value and flush the debounce timer. */
+    const runWithValue = (value: string, callbackDelay = 0) => {
+        const callback = jest.fn();
+        render(<HookWrapper value={value} callback={callback} callbackDelay={callbackDelay} />);
+        act(() => {
+            jest.runAllTimers();
+        });
+        return callback;
+    };
+
+    describe("invisible character detection", () => {
+        it("reports empty set for plain text", () => {
+            const callback = runWithValue("hello world");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("detects zero-width space (U+200B)", () => {
+            const callback = runWithValue("hello\u200Bworld");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
+        });
+
+        it("detects zero-width non-joiner (U+200C)", () => {
+            const callback = runWithValue("hello\u200Cworld");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200c]));
+        });
+    });
+
+    describe("emoji false-positive prevention", () => {
+        it("does not flag ✔️ (base char + variation selector U+FE0F)", () => {
+            const callback = runWithValue("✔️");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag ZWJ sequence emoji 👨‍👩‍👧‍👦", () => {
+            const callback = runWithValue("👨‍👩‍👧‍👦");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+
+        it("does not flag keycap emoji #️⃣", () => {
+            const callback = runWithValue("#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+    });
+
+    describe("mixed content", () => {
+        it("detects ZWS while ignoring surrounding emoji", () => {
+            const callback = runWithValue("Check\u200B ✔️👨‍👩‍👧‍#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set([0x200b]));
+        });
+
+        it("reports empty set for text with only emoji", () => {
+            const callback = runWithValue("✔️ 👨‍👩‍👧‍👦#️⃣");
+            expect(callback).toHaveBeenCalledWith(new Set());
+        });
+    });
+});

package/src/components/TextField/textfield.scss

@@ -103,6 +103,8 @@ $eccgui-map-intent-bgcolors: (
 }
 
 .#{$ns}-input {
+    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
     .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
         animation-duration: 1s;
         animation-delay: 0.5s;
@@ -111,16 +113,23 @@ $eccgui-map-intent-bgcolors: (
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
             background-color: eccgui-color-var("semantic", $each-intent, "100");
+
+            --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
+
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--info & {
         @include pt-input-intent($eccgui-color-info-text);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--accent & {
         @include pt-input-intent($eccgui-color-primary);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--neutral & {
@@ -138,6 +147,10 @@ $eccgui-map-intent-bgcolors: (
 
         text-decoration: line-through $eccgui-color-danger-text 2px;
     }
+
+    &:focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+    }
 }
 
 .#{$eccgui}-textarea {
@@ -151,16 +164,23 @@ $eccgui-map-intent-bgcolors: (
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         &.#{$eccgui}-intent--#{$each-intent} {
             background-color: eccgui-color-var("semantic", $each-intent, "100");
+
+            --#{$eccgui}-a11y-outline-color: eccgui-color-var("semantic", $each-intent, "900");
+
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
 
     &.#{$eccgui}-intent--info {
         @include pt-input-intent($eccgui-color-info-text);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
     }
 
     &.#{$eccgui}-intent--accent {
         @include pt-input-intent($eccgui-color-primary);
+
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
     }
 
     &.#{$eccgui}-intent--neutral {