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

package/src/components/Tag/tag.scss

@@ -30,8 +30,6 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
-    --eccgui-tag-border-width: 1px;
-
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
@@ -141,6 +139,8 @@ $tag-round-adjustment: 0 !default;
 }
 
 .#{$ns}-tag {
+    --eccgui-tag-border-width: 1px;
+
     border-style: solid;
     border-width: var(--eccgui-tag-border-width);
 

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 {

package/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();
     });
 });

package/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);

package/src/components/Typography/typography.scss

@@ -13,20 +13,26 @@ html {
 
 body {
     font-family: $eccgui-font-family-default;
-    font-weight: $eccgui-font-weight-regular;
-    text-rendering: optimizelegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+
     // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
     // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
     // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
     // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
     font-size-adjust: from-font;
+    font-weight: $eccgui-font-weight-regular;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
     font-family: $eccgui-font-family-monospace;
     font-size: 0.9em;
+
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        background-color: $eccgui-color-workspace-background;
+    }
 }
 
 strong {

package/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`),

package/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 {

package/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