@eccenca/gui-elements 25.1.0-rc.2 → 25.1.0-rc.4

package/src/common/scss/_accessibility-defaults.scss

@@ -0,0 +1,101 @@
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+    /*
+        originally from ~@carbon/styles/scss/css--helpers
+        but we cannot use it directly because of other included rules there.
+    */
+    position: absolute;
+    visibility: inherit;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: rect(0, 0, 0, 0);
+}
+
+/*
+    default focus indicator
+*/
+
+:root {
+    --#{$eccgui}-a11y-outline-color: #{eccgui-color-var("layout", "magenta", "900")};
+    --#{$eccgui}-a11y-outline-style: solid;
+    --#{$eccgui}-a11y-outline-width: #{0.25 * $eccgui-size-block-whitespace};
+
+    // shift outline min 2px inside element to have a minimum 2px outline even with hidden overflow
+    --#{$eccgui}-a11y-outline-offset: min(calc(var(--#{$eccgui}-a11y-outline-width) * -0.5), -2px);
+}
+
+@keyframes outline-bounce {
+    0% {
+        outline-width: calc(var(--#{$eccgui}-a11y-outline-width) * 0.5);
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+    }
+
+    33.3% {
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: calc(var(--#{$eccgui}-a11y-outline-width));
+    }
+
+    66.6% {
+        outline-color: currentcolor;
+        outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -2);
+    }
+
+    100% {
+        outline-width: var(--#{$eccgui}-a11y-outline-width);
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+    }
+}
+
+@mixin focus-by-keyboard-static {
+    // strong visual focus indication for keyboard devices
+
+    outline: var(--#{$eccgui}-a11y-outline-color) var(--#{$eccgui}-a11y-outline-style)
+        var(--#{$eccgui}-a11y-outline-width);
+    outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+}
+
+@mixin focus-by-keyboard-animation {
+    @media (prefers-reduced-motion: no-preference) {
+        animation: outline-bounce 0.5s;
+    }
+}
+
+.#{$eccgui}-a11y-focus-by-keyboard-animated {
+    @include focus-by-keyboard-static;
+    @include focus-by-keyboard-animation;
+}
+
+.#{$eccgui}-a11y-focus-by-keyboard-static {
+    @include focus-by-keyboard-static;
+
+    animation: none;
+}
+
+@mixin focus-by-pointer {
+    // limited visual focus indication for pointer devices
+
+    outline: transparent none 0;
+    outline-offset: 0;
+}
+
+.#{$eccgui}-a11y-focus-by-pointer {
+    @include focus-by-pointer;
+}
+
+*[tabindex]:not([tabindex^="-"]):focus-visible,
+:focus-visible {
+    @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+}
+
+input:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible),
+:focus:not(:focus-visible) {
+    @extend .#{$eccgui}-a11y-focus-by-pointer;
+}

package/src/components/Application/_header.scss

@@ -190,15 +190,27 @@ a.#{$prefix}--header__menu-item:active {
 }
 
 // $shell-header-focus
-.#{$prefix}--header__action:focus,
-.#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus,
-.#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
-a.#{$prefix}--header__name:focus,
-a.#{$prefix}--header__menu-item:focus {
-    outline: 1px dotted $shell-header-focus;
-    outline-offset: -1px;
-    border: none;
-    box-shadow: none;
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only,
+.#{$prefix}--header__action.#{$prefix}--btn--primary,
+a.#{$prefix}--header__name,
+a.#{$prefix}--header__menu-item {
+    &:focus {
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
+
+        border: none;
+        box-shadow: none;
+    }
+
+    &,
+    .#{$prefix}--popover--open & {
+        &:focus-visible {
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+
+            border: none;
+            box-shadow: none;
+        }
+    }
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
     color: $shell-header-focus;

package/src/components/Application/_sidebar.scss

@@ -28,3 +28,9 @@ $ui-02: $eccgui-color-workspace-background !default;
     padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
     transition: none;
 }
+
+.#{$eccgui}-application__menu__toggler.cds--header__action {
+    &:focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+    }
+}

package/src/components/Application/_toolbar.scss

@@ -51,18 +51,18 @@ $shell-panel-focus: $shell-header-focus !default;
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    inset: mini-units(8) 0 0 0;
+    inset: mini-units(8) 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// add rules for own class identiiers
+// add rules for own class identifiers
 
 .#{$eccgui}-application__toolbar {
-    flex-basis: auto;
     flex-grow: 0;
+    flex-basis: auto;
 
     .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
         // for some reason the original calculation still moves out the tooltip

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -39,7 +39,9 @@
     }
 
     &:has(.cm-editor.cm-focused) {
-        box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
     }
 
     .cm-editor {

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Badge } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+describe("Badge", () => {
+    it("should shorten a number badge exceeding maxLength to a 9+ notation", () => {
+        const { container } = render(<Badge maxLength={2}>{42}</Badge>);
+        const badge = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("9+");
+    });
+    it("should apply maxWidth style to a string badge when maxLength is set", () => {
+        const { container } = render(<Badge maxLength={4}>forty two</Badge>);
+        const tag = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(tag).not.toBeNull();
+        expect((tag as HTMLElement).style.maxWidth).toBe("calc((3em + 3ch)/2)");
+    });
+});

package/src/components/Button/Button.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
 
 import Button from "./Button";
@@ -21,7 +22,7 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
     });
 
     it("should have icon at the right after the text", () => {
@@ -31,6 +32,19 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
+    });
+
+    it("should render badge markup with correct content when used on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={"badge content"} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("badge content");
+    });
+    it("should render badge markup with correct content when batch displays a 0 (zero) number on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={0} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("0");
     });
 });

package/src/components/Button/Button.tsx

@@ -113,7 +113,7 @@ export const Button = ({
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >
             {children}
-            {badge && (
+            {typeof badge !== "undefined" && (
                 <Badge
                     children={badge}
                     {...constructBadgeProperties({

package/src/components/Checkbox/checkbox.scss

@@ -47,7 +47,7 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            outline-offset: 0;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
@@ -72,6 +72,14 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
             background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
         }
     }
+
+    &.#{$ns}-switch {
+        --#{$eccgui}-a11y-outline-offset: 1px;
+
+        input:focus ~ .#{$ns}-control-indicator {
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+        }
+    }
 }
 
 .#{$ns}-control-indicator + *,

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;
 }
@@ -33,7 +41,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
     margin: 2rem;
-    pointer-events: all;
+    pointer-events: auto;
     user-select: text;
 
     & > * {
@@ -42,7 +50,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
         max-width: 100%;
     }
 
-    * {
+    *:has(> svg) {
         pointer-events: all;
     }
 

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/MultiSelect/MultiSelect.tsx

@@ -17,11 +17,12 @@ import {
     IconButton,
     MenuItem,
     OverflowText,
-    Spinner
+    Spinner,
 } from "./../../index";
 
 export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
+    newlyRemoved?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
@@ -178,6 +179,8 @@ export function MultiSuggestField<T>({
     intent,
     ...otherMultiSelectProps
 }: MultiSuggestFieldProps<T>) {
+    type SelectionChange = { type: "selected"; item: T } | { type: "removed"; item: T } | { type: "none" };
+
     // Options created by a user
     const createdItems = useRef<T[]>([]);
     // Options passed ouside (f.e. from the backend)
@@ -199,6 +202,7 @@ export function MultiSuggestField<T>({
         query?: string;
         timeoutId?: number;
     }>({});
+    const selectionChange = useRef<SelectionChange>({ type: "none" });
 
     /** Update external items when they change
      *  e.g for auto-complete when query change
@@ -209,11 +213,21 @@ export function MultiSuggestField<T>({
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        onSelection?.({
-            newlySelected: selectedItems.slice(-1)[0],
+        const selectionParams: MultiSuggestFieldSelectionProps<T> = {
             createdItems: createdItems.current,
             selectedItems,
-        });
+        };
+
+        if (selectionChange.current.type === "selected") {
+            selectionParams.newlySelected = selectionChange.current.item;
+        }
+
+        if (selectionChange.current.type === "removed") {
+            selectionParams.newlyRemoved = selectionChange.current.item;
+        }
+
+        onSelection?.(selectionParams);
+        selectionChange.current = { type: "none" };
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
@@ -228,6 +242,7 @@ export function MultiSuggestField<T>({
             return;
         }
 
+        selectionChange.current = { type: "none" };
         setSelectedItems(externalSelectedItems);
     }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
 
@@ -268,13 +283,18 @@ export function MultiSuggestField<T>({
      * @param matcher
      */
     const removeItemSelection = (matcher: string) => {
-        const filteredItems = selectedItems.filter((item) => itemId(item) !== matcher);
-        setSelectedItems(filteredItems);
+        setSelectedItems((items) => {
+            const removedItem = items.find((item) => itemId(item) === matcher);
+
+            selectionChange.current = removedItem ? { type: "removed", item: removedItem } : { type: "none" };
+
+            return items.filter((item) => itemId(item) !== matcher);
+        });
     };
 
     const defaultFilterPredicate = (item: T, query: string) => {
-        const searchWords = highlighterUtils.extractSearchWords(query, true)
-        return highlighterUtils.matchesAllWords(itemLabel(item).toLowerCase(), searchWords)
+        const searchWords = highlighterUtils.extractSearchWords(query, true);
+        return highlighterUtils.matchesAllWords(itemLabel(item).toLowerCase(), searchWords);
     };
 
     /**
@@ -286,6 +306,7 @@ export function MultiSuggestField<T>({
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
         } else {
+            selectionChange.current = { type: "selected", item };
             setSelectedItems((items) => [...items, item]);
         }
 
@@ -365,6 +386,7 @@ export function MultiSuggestField<T>({
     const handleClear = () => {
         requestState.current.query = "";
 
+        selectionChange.current = { type: "none" };
         setSelectedItems([]);
         setFilteredItems([...externalItems, ...createdItems.current]);
     };
@@ -375,7 +397,13 @@ export function MultiSuggestField<T>({
      * @param index
      */
     const removeTagFromSelectionViaIndex = (_label: React.ReactNode, index: number) => {
-        setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
+        setSelectedItems((items) => {
+            const removedItem = items[index];
+
+            selectionChange.current = removedItem ? { type: "removed", item: removedItem } : { type: "none" };
+
+            return [...items.slice(0, index), ...items.slice(index + 1)];
+        });
     };
 
     /**

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -5,6 +5,8 @@ import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Notification } from "../Notification/Notification";
+import Spacing from "../Separation/Spacing";
 
 import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
 
@@ -61,7 +63,7 @@ Default.args = {
 
 /**
  * Display always the dropdown after the element was clicked on.
- * Do not wait until the query input was startet.
+ * Do not wait until the query input was started.
  */
 export const dropdownOnFocus = Template.bind({});
 dropdownOnFocus.args = {
@@ -259,3 +261,40 @@ CustomSearch.args = {
         return item.testId.toLowerCase().includes(query) || item.testLabel.toLowerCase().includes(query);
     },
 };
+
+const SelectionNotificationComponent = (): React.JSX.Element => {
+    const [notification, setNotification] = useState<string | null>(null);
+
+    const availableItems = useMemo<string[]>(() => ["existing item"], []);
+
+    const identity = useCallback((item: string): string => item, []);
+
+    const handleOnSelect = useCallback((params: MultiSuggestFieldSelectionProps<string>) => {
+        if (params.newlySelected) {
+            setNotification(`Element added: ${params.newlySelected}`);
+        } else if (params.newlyRemoved) {
+            setNotification(`Element removed: ${params.newlyRemoved}`);
+        }
+    }, []);
+
+    return (
+        <OverlaysProvider>
+            {notification && <Notification intent={"info"}>{notification}</Notification>}
+            <Spacing size={"medium"} />
+            <MultiSuggestField<string>
+                items={availableItems}
+                prePopulateWithItems={true}
+                onSelection={handleOnSelect}
+                itemId={identity}
+                itemLabel={identity}
+                createNewItemFromQuery={identity}
+            />
+        </OverlaysProvider>
+    );
+};
+
+/**
+ * Demonstrates the `newlySelected` and `newlyRemoved` properties of the `onSelection` callback.
+ * A notification appears when an element is added or removed from the selection.
+ */
+export const selectionNotification = SelectionNotificationComponent.bind({});

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/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -261,6 +261,86 @@ describe("MultiSuggestField", () => {
             });
         });
 
+        it("should set newlySelected only when an item is added", async () => {
+            const onSelection = jest.fn();
+            const initiallySelected = predefinedNotControlledValues.args.selectedItems;
+
+            const { container } = render(
+                <MultiSuggestField
+                    {...dropdownOnFocus.args}
+                    items={items}
+                    selectedItems={initiallySelected}
+                    onSelection={onSelection}
+                />
+            );
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenCalledWith({
+                    createdItems: [],
+                    selectedItems: initiallySelected,
+                });
+            });
+
+            onSelection.mockClear();
+
+            const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
+            const [input] = inputContainer.getElementsByTagName("input");
+
+            fireEvent.click(input);
+
+            await waitFor(() => {
+                const listbox = screen.getByRole("listbox");
+                const menuItems = listbox.getElementsByClassName("eccgui-menu__item");
+
+                expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
+
+                fireEvent.click(menuItems[2]);
+            });
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenLastCalledWith({
+                    createdItems: [],
+                    newlySelected: items[2],
+                    selectedItems: [...initiallySelected, items[2]],
+                });
+            });
+        });
+
+        it("should set newlyRemoved only when an item is removed", async () => {
+            const onSelection = jest.fn();
+            const initiallySelected = predefinedNotControlledValues.args.selectedItems;
+
+            const { container } = render(
+                <MultiSuggestField
+                    {...predefinedNotControlledValues.args}
+                    selectedItems={initiallySelected}
+                    onSelection={onSelection}
+                />
+            );
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenCalledWith({
+                    createdItems: [],
+                    selectedItems: initiallySelected,
+                });
+            });
+
+            onSelection.mockClear();
+
+            const [firstTag] = Array.from(container.querySelectorAll("span[data-tag-index]"));
+            const removeTagButton = firstTag.querySelector("button");
+
+            fireEvent.click(removeTagButton!);
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenLastCalledWith({
+                    createdItems: [],
+                    newlyRemoved: initiallySelected[0],
+                    selectedItems: initiallySelected.slice(1),
+                });
+            });
+        });
+
         it("should filter items by custom search function", async () => {
             const { container } = render(<MultiSuggestField {...CustomSearch.args} items={items} />);
 
@@ -340,6 +420,13 @@ describe("MultiSuggestField", () => {
                 expect(getByText(firstSelected)).toBeInTheDocument();
                 expect(getByText(secondSelected)).toBeInTheDocument();
             });
+
+            await waitFor(() => {
+                expect(onSelection).toHaveBeenCalledWith({
+                    createdItems: [],
+                    selectedItems: predefinedNotControlledValues.args.selectedItems,
+                });
+            });
         });
 
         it("should call onSelection function with the selected items", async () => {
@@ -485,7 +572,6 @@ describe("MultiSuggestField", () => {
             await waitFor(() => {
                 const expectedObject = {
                     createdItems: [],
-                    newlySelected: items.at(-1),
                     selectedItems: items,
                 };
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
@@ -513,7 +599,6 @@ describe("MultiSuggestField", () => {
             await waitFor(() => {
                 const expectedObject = {
                     createdItems: [],
-                    newlySelected: items.at(-1),
                     selectedItems: items,
                 };
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
@@ -536,7 +621,7 @@ describe("MultiSuggestField", () => {
 
                     const expectedObject = {
                         createdItems: [],
-                        newlySelected: selected.at(-1),
+                        newlyRemoved: items[i],
                         selectedItems: selected,
                     };
 

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,