diff --git a/CHANGELOG.md b/CHANGELOG.md
index c490e02c..f2055f37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   use the latest provided `onChange` function
 -   `<TextField />`, `<TextArea />`
     -   fix emoji false-positives in invisible character detection
+-   Focus outlines
+    -   we use again bold focus outlines for input elements
+    -   they are also used for clickable elements that are focused via keyboard (tab navigation)
 
 ### Changed
 
diff --git a/src/_shame.scss b/src/_shame.scss
index cc250972..e64a869e 100644
--- a/src/_shame.scss
+++ b/src/_shame.scss
@@ -1,31 +1,13 @@
 // Add stuff to test fast and dirty.
 // This file should not contain any styles.
 
-.#{$prefix}--assistive-text,
-.#{$prefix}--visually-hidden {
-    /*
-        TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
-        but we cannot use it directly because of other included rules there.
-    */
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    visibility: inherit;
-    border: 0;
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */
 
 * {
-    scrollbar-width: thin;
     scrollbar-color: #bbb transparent;
+    scrollbar-width: thin;
 
     &::-webkit-scrollbar {
         width: 0.25rem;
@@ -38,19 +20,3 @@
         border-radius: 0.125rem;
     }
 }
-
-/*
-    CHANGE: default focus behaviour
-*/
-
-:focus,
-input:focus-visible,
-textarea:focus-visible {
-    outline: none;
-    outline-offset: 0;
-}
-
-:focus-visible {
-    outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
-    outline-offset: 1px;
-}
diff --git a/src/common/scss/_accessibility-defaults.scss b/src/common/scss/_accessibility-defaults.scss
new file mode 100644
index 00000000..960f3d8d
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Application/_header.scss b/src/components/Application/_header.scss
index 27d7fd49..9fef5271 100644
--- a/src/components/Application/_header.scss
+++ b/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;
diff --git a/src/components/Application/_sidebar.scss b/src/components/Application/_sidebar.scss
index b72b28ca..8aec0738 100644
--- a/src/components/Application/_sidebar.scss
+++ b/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;
+    }
+}
diff --git a/src/components/Application/_toolbar.scss b/src/components/Application/_toolbar.scss
index e3c01b50..e4bd7f82 100644
--- a/src/components/Application/_toolbar.scss
+++ b/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
diff --git a/src/components/AutoSuggestion/AutoSuggestion.scss b/src/components/AutoSuggestion/AutoSuggestion.scss
index 8bd5083b..3d2297cf 100644
--- a/src/components/AutoSuggestion/AutoSuggestion.scss
+++ b/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 {
diff --git a/src/components/Checkbox/checkbox.scss b/src/components/Checkbox/checkbox.scss
index e575dc98..d0625b55 100644
--- a/src/components/Checkbox/checkbox.scss
+++ b/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 + *,
diff --git a/src/components/Dialog/dialog.scss b/src/components/Dialog/dialog.scss
index f0c69941..259cd8d2 100644
--- a/src/components/Dialog/dialog.scss
+++ b/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;
 }
diff --git a/src/components/Link/link.scss b/src/components/Link/link.scss
index c5348af4..1929f76f 100644
--- a/src/components/Link/link.scss
+++ b/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;
     }
 }
diff --git a/src/components/MultiSuggestField/_multisuggestfield.scss b/src/components/MultiSuggestField/_multisuggestfield.scss
index 265621b7..98196b42 100644
--- a/src/components/MultiSuggestField/_multisuggestfield.scss
+++ b/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;
+    }
+}
diff --git a/src/components/RadioButton/radiobutton.scss b/src/components/RadioButton/radiobutton.scss
index 0744acf3..2a06882d 100644
--- a/src/components/RadioButton/radiobutton.scss
+++ b/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,
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index e7c67364..9bfd961e 100644
--- a/src/components/TextField/textfield.scss
+++ b/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 {
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 69fa7720..c147fdce 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom";
 
@@ -45,19 +46,53 @@ describe("Tooltip", () => {
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
         checkForPlaceholderClass(container, 1);
         await waitFor(() => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
             checkForPlaceholderClass(container, 0);
         });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
     });
     it("should be displayed on two continues mouse hover when placeholder is used", async () => {
         const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
         checkForPlaceholderClass(container, 1);
-        await waitFor(async () => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+        await waitFor(() => {
+            checkForPlaceholderClass(container, 0);
+        });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed on focus when no placeholder is used", async () => {
+        // Blueprint ignores focus events with null relatedTarget (page-refocus guard), so we tab
+        // from a preceding element to produce a non-null relatedTarget.
+        render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={false} />
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses tooltip target, relatedTarget is non-null → Blueprint opens
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed after keyboard focus when placeholder is used", async () => {
+        // Use a focusable button child so refocus() can call .focus() on it after the swap.
+        // Tab from a preceding element so relatedTarget is non-null when Blueprint handles focus.
+        const { container } = render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={true}>
+                    <button>tooltip target</button>
+                </Tooltip>
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses placeholder inner button, triggers focusin swap
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
             checkForPlaceholderClass(container, 0);
-            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
-            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
         });
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
     });
 });
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 7a3108f7..66f4fc9a 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -50,7 +50,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
-export type TooltipSize = "small" | "medium" | "large"
+export type TooltipSize = "small" | "medium" | "large";
 
 export const Tooltip = ({
     children,
@@ -100,15 +100,19 @@ export const Tooltip = ({
                 }, swapDelayTime);
                 if (placeholderRef.current !== null) {
                     const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
-                    (placeholderRef.current as HTMLElement).addEventListener(eventType, () => {
-                        if (
-                            (eventType === "focusout" && eventMemory.current === "afterfocus") ||
-                            (eventType === "mouseleave" && eventMemory.current === "afterhover")
-                        ) {
-                            eventMemory.current = null;
-                        }
-                        clearTimeout(swapDelay.current as NodeJS.Timeout);
-                    });
+                    const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")
+                        ?.children[0];
+                    if (innerFocusTarget) {
+                        (innerFocusTarget as HTMLElement).addEventListener(eventType, () => {
+                            if (
+                                (eventType === "focusout" && eventMemory.current === "afterfocus") ||
+                                (eventType === "mouseleave" && eventMemory.current === "afterhover")
+                            ) {
+                                eventMemory.current = null;
+                            }
+                            clearTimeout(swapDelay.current as NodeJS.Timeout);
+                        });
+                    }
                 }
             };
             (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
diff --git a/src/configuration/stories/customproperties.stories.tsx b/src/configuration/stories/customproperties.stories.tsx
index 93722ed8..5749bd99 100644
--- a/src/configuration/stories/customproperties.stories.tsx
+++ b/src/configuration/stories/customproperties.stories.tsx
@@ -34,6 +34,10 @@ const groups: { title: string; filterName: (name: string) => boolean }[] = [
         title: "Color aliases",
         filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
     },
+    {
+        title: "Accessibility",
+        filterName: (name) => name.startsWith(`--${eccgui}-a11y`),
+    },
     {
         title: "Opacity",
         filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
diff --git a/src/extensions/codemirror/_codemirror.scss b/src/extensions/codemirror/_codemirror.scss
index dc010e56..f1649645 100644
--- a/src/extensions/codemirror/_codemirror.scss
+++ b/src/extensions/codemirror/_codemirror.scss
@@ -19,13 +19,13 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
     &__toolbar {
         position: absolute;
-        z-index: 3;
-        left: 1px;
-        right: 1px;
         top: 1px;
-        border-radius: $pt-border-radius $pt-border-radius 0 0;
-        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        right: 1px;
+        left: 1px;
+        z-index: 3;
         background-color: $eccgui-color-codeeditor-background;
+        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
     }
 
     &--has-toolbar {
@@ -37,9 +37,9 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
     &__preview {
         position: absolute;
         top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
-        left: 1px;
         right: 1px;
         bottom: 1px;
+        left: 1px;
         z-index: 2;
         padding: $button-padding;
         overflow-y: auto;
@@ -50,12 +50,12 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
     .cm-editor {
         width: 100%;
         height: $eccgui-size-codeeditor-height;
-        clip-path: unset !important; // we may check later why they set inset(0) now
         background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
+        clip-path: unset !important; // we may check later why they set inset(0) now
 
         &.#{eccgui}-disabled {
             @extend .#{$ns}-input, .#{$ns}-disabled;
@@ -89,7 +89,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.#{eccgui}-intent--primary {
-            @include pt-input-intent($eccgui-color-info-text);
+            @include pt-input-intent($eccgui-color-primary);
         }
 
         &.#{eccgui}-intent--info {
@@ -97,7 +97,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.#{eccgui}-intent--accent {
-            @include pt-input-intent($eccgui-color-primary);
+            @include pt-input-intent($eccgui-color-accent);
         }
 
         &.#{eccgui}-intent--neutral {
@@ -124,39 +124,29 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
         }
 
         &.cm-focused {
-            outline: none;
-            box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+            --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+            --#{$eccgui}-a11y-outline-offset: 0;
+
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
 
             &.#{eccgui}-intent--warning {
-                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};
             }
 
             &.#{eccgui}-intent--success {
-                box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-success-text};
             }
 
             &.#{eccgui}-intent--danger {
-                box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-danger-text};
             }
 
             &.#{eccgui}-intent--primary {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-primary};
             }
 
             &.#{eccgui}-intent--info {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--accent {
-                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--neutral {
-                box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus;
-            }
-
-            &.#{eccgui}-intent--edited {
-                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+                --#{$eccgui}-a11y-outline-color: #{$eccgui-color-info-text};
             }
 
             &.#{eccgui}-intent--removed {
diff --git a/src/index.scss b/src/index.scss
index ad01bc16..d13a53cb 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -61,6 +61,7 @@ $prefix-carbon: $prefix;
 
 // == Load basic components styles =============================================
 
+@import "./common/scss/accessibility-defaults";
 @import "./components";
 
 // set more readable variable for prefix