npm - @scality/core-ui - Versions diffs - 0.196.0 → 0.198.0 - Mend

@scality/core-ui 0.196.0 → 0.198.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/components/buttonv2/Buttonv2.component.d.ts CHANGED Viewed

@@ -1,18 +1,36 @@
-import { ButtonHTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes } from 'react';
 import { Loader } from '../loader/Loader.component';
 import { Props as TooltipProps } from '../tooltip/Tooltip.component';
 export declare const FocusVisibleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-export type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'label'> & {
+/** Props used by ButtonStyled for styling (no tooltip) */
+type ButtonStyledProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'label'> & {
     variant?: 'primary' | 'secondary' | 'danger' | 'outline';
     size?: 'default' | 'inline';
     disabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     icon?: React.ReactNode;
     label?: React.ReactNode;
-    tooltip?: Omit<TooltipProps, 'children'>;
     isLoading?: boolean;
 };
-export declare const ButtonStyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Props, never>;
+/** Button with a visible label - tooltip is optional */
+type ButtonWithLabel = ButtonStyledProps & {
+    label: React.ReactNode;
+    tooltip?: Omit<TooltipProps, 'children'>;
+};
+/** Icon-only button - requires either string tooltip OR explicit aria-label */
+type IconOnlyButton = ButtonStyledProps & {
+    label?: never;
+} & ({
+    tooltip: Omit<TooltipProps, 'children'> & {
+        overlay: string;
+    };
+    'aria-label'?: string;
+} | {
+    tooltip: Omit<TooltipProps, 'children'>;
+    'aria-label': string;
+});
+export type Props = ButtonWithLabel | IconOnlyButton;
+export declare const ButtonStyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ButtonStyledProps, never>;
 export declare const ButtonLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const ButtonIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     label: React.ReactNode;

package/dist/components/buttonv2/Buttonv2.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;~~AAI7C~~,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,~~MAAM~~,~~MAAM,~~KAAK,GAAG,IAAI,~~CACtB~~,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;~~IACzC~~,~~SAAS~~,CAAC,EAAE,OAAO,CAAC;~~CACrB~~,CAAC;~~AACF~~,eAAO,MAAM,YAAY~~,+GA0KxB~~,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,~~2CAqDP~~;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
1	+ {"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,0DAA0D;AAC1D,KAAK,iBAAiB,GAAG,IAAI,CAC3B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wDAAwD;AACxD,KAAK,eAAe,GAAG,iBAAiB,GAAG;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC1C,CAAC;AAEF,+EAA+E;AAC/E,KAAK,cAAc,GAAG,iBAAiB,GAAG;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GAAG,CACA;IACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACD;IACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG,cAAc,CAAC;AACrD,eAAO,MAAM,YAAY,2HA0KxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CA2CP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/buttonv2/Buttonv2.component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -207,14 +207,11 @@ function Button({ variant, size, disabled, label, icon, onClick, tooltip, isLoad
     if (!icon && !label) {
         console.warn('Please specify either icon or label prop for the button component.');
     }
-    if (!label && icon && !tooltip) {
-        console.warn('Please specify the tooltip for the standalone icon button.');
-    }
-    return (_jsx(Tooltip, { placement: tooltip ? tooltip.placement : undefined, overlay: tooltip && tooltip.overlay, overlayStyle: tooltip && tooltip.overlayStyle, children: _jsx(ButtonStyled, { className: "sc-button", variant: variant, disabled: isLoading || disabled, label: label, icon: icon, onClick: onClick, size: size, ...rest, children: _jsxs(_Fragment, { children: [icon &&
-                        (isLoading ? (_jsx(ButtonLoader, { size: "small", variant: variant, label: label })) : (_jsx(ButtonIcon, { label: label, "aria-label": tooltip &&
-                                tooltip.overlay &&
-                                typeof tooltip.overlay === 'string'
-                                ? tooltip.overlay
-                                : undefined, children: icon }))), !icon && isLoading && (_jsx(ButtonLoader, { size: "small", variant: variant, label: label })), _jsx(ButtonLabel, { children: label })] }) }) }));
+    // For icon-only buttons, use tooltip.overlay as aria-label (typed as string for IconOnlyButton)
+    const buttonAriaLabel = !label && icon && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.overlay)
+        ? tooltip.overlay
+        : undefined;
+    return (_jsx(Tooltip, { placement: tooltip ? tooltip.placement : undefined, overlay: tooltip && tooltip.overlay, overlayStyle: tooltip && tooltip.overlayStyle, children: _jsxs(ButtonStyled, { className: "sc-button", variant: variant, disabled: isLoading || disabled, label: label, icon: icon, onClick: onClick, size: size, "aria-label": buttonAriaLabel, ...rest, children: [icon &&
+                    (isLoading ? (_jsx(ButtonLoader, { size: "small", variant: variant, label: label })) : (_jsx(ButtonIcon, { label: label, children: icon }))), !icon && isLoading && (_jsx(ButtonLoader, { size: "small", variant: variant, label: label })), _jsx(ButtonLabel, { children: label })] }) }));
 }
 export { Button };

package/dist/components/buttonv2/CopyButton.component.d.ts CHANGED Viewed

@@ -11,5 +11,5 @@ export declare const CopyButton: ({ label, textToCopy, copyAsHtml, variant, ...p
     textToCopy: string;
     copyAsHtml?: boolean;
     variant?: "outline" | "ghost";
-} & Props) => import("react/jsx-runtime").JSX.Element;
+} & Omit<Props, "tooltip" | "label">) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CopyButton.component.d.ts.map

package/dist/components/buttonv2/CopyButton.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;iBASQ,MAAM,WAAW,OAAO;;CAoCxD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,sDAMxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,GAAG,KAAK,4CA+CR,CAAC"}
1	+ {"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;iBASQ,MAAM,WAAW,OAAO;;CAoCxD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,sDAMxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAAC,4CA+CnC,CAAC"}

package/dist/components/icon/Icon.component.d.ts CHANGED Viewed

@@ -18,6 +18,11 @@ type Props = {
     name: IconName;
     size?: SizeProp;
     color?: IconColor | CSSProperties['color'];
+    /**
+     * Accessible label for meaningful icons.
+     * When provided, the icon is announced to screen readers.
+     * When omitted, the icon is decorative (hidden from assistive technologies).
+     */
     ariaLabel?: string;
     withWrapper?: boolean;
     style?: CSSProperties;

package/dist/components/icon/Icon.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAC9B,MAAM,EACN,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAc/D,CAAC;AAkBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;~~AA6DF~~,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC"}
1	+ {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKxC,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAC9B,MAAM,EACN,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAc/D,CAAC;AAkBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAmEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js CHANGED Viewed

@@ -15,8 +15,8 @@ export const customIcons = {
 };
 customIcons['Remote-user'].displayName = 'RemoteUser';
 customIcons['Remote-group'].displayName = 'RemoteGroup';
-customIcons['Bucket'].displayName = 'Bucket';
-customIcons['Buckets'].displayName = 'Buckets';
+customIcons.Bucket.displayName = 'Bucket';
+customIcons.Buckets.displayName = 'Buckets';
 const IconStyled = styled(FontAwesomeIcon) `
   ${(props) => {
     const theme = props.theme;
@@ -71,7 +71,7 @@ export const IconWrapper = styled.div `
   align-items: center;
   border-radius: 100%;
 `;
-function NonWrappedIcon({ name, size = '1x', color, ariaLabel = '', title, ...rest }) {
+function NonWrappedIcon({ name, size = '1x', color, ariaLabel, title, ...rest }) {
     var _a;
     const iconInfo = iconTable[name] || customIcons[name];
     if (!iconInfo)
@@ -98,11 +98,16 @@ function NonWrappedIcon({ name, size = '1x', color, ariaLabel = '', title, ...re
         });
         return () => setIcon(undefined);
     }, [name, iconInfo]);
+    // Icons are decorative by default (aria-hidden: true)
+    // If ariaLabel is provided, the icon is meaningful (aria-hidden: false)
+    const accessibilityProps = ariaLabel
+        ? { 'aria-hidden': false, 'aria-label': ariaLabel }
+        : { 'aria-hidden': true };
     if (!icon && !customIcons[name]) {
-        return (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) }));
+        return (_jsx(DelayedFallback, { ...accessibilityProps, children: _jsx(Loader, { size: "base" }) }));
     }
     const IconComponent = (_a = customIcons[name]) !== null && _a !== void 0 ? _a : IconStyled;
-    return (_jsx(IconComponent, { color: color, icon: icon, size: size, title: title, "aria-label": `${name} ${ariaLabel}`, ...rest }));
+    return (_jsx(IconComponent, { color: color, icon: icon, size: size, title: title, ...accessibilityProps, ...rest }));
 }
 function Icon({ withWrapper, ...props }) {
     if (withWrapper) {

package/dist/components/iconhelper/IconHelper.d.ts CHANGED Viewed

@@ -4,8 +4,15 @@ type IconHelpProps = {
     tooltipMessage: ReactNode;
     placement?: Position;
     overlayStyle?: CSSProperties;
+    /**
+     * Accessible label for the help button.
+     * Should describe what information the tooltip provides.
+     * Example: "More info about Veeam application"
+     */
+    'aria-label'?: string;
+    /** @deprecated Use aria-label instead */
     title?: string;
 };
-export declare const IconHelp: ({ tooltipMessage, overlayStyle, placement, title, }: IconHelpProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconHelp: ({ tooltipMessage, overlayStyle, placement, "aria-label": ariaLabel, title, }: IconHelpProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=IconHelper.d.ts.map

package/dist/components/iconhelper/IconHelper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconHelper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/iconhelper/IconHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAEjD~~,OAAO,EAAE,QAAQ,EAAW,MAAM,8BAA8B,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;~~AAEF~~,eAAO,MAAM,QAAQ,GAAI,~~qDAKtB~~,aAAa,~~4CAQf~~,CAAC"}
1	+ {"version":3,"file":"IconHelper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/iconhelper/IconHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,QAAQ,EAAW,MAAM,8BAA8B,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,eAAO,MAAM,QAAQ,GAAI,8EAMtB,aAAa,4CAaf,CAAC"}

package/dist/components/iconhelper/IconHelper.js CHANGED Viewed

@@ -1,4 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
 import { Icon } from '../icon/Icon.component';
 import { Tooltip } from '../tooltip/Tooltip.component';
-export const IconHelp = ({ tooltipMessage, overlayStyle, placement = 'right', title, }) => (_jsx(Tooltip, { overlay: tooltipMessage, placement: placement, overlayStyle: overlayStyle, children: _jsx(Icon, { name: "Info", color: "buttonSecondary", title: title }) }));
+const HelpButton = styled.button `
+  display: inline-flex;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;              /* Inherit font sizing */
+  vertical-align: text-bottom;     /* Align with text */
+  line-height: 1;
+  &:focus-visible {
+    outline: 2px dashed ${(props) => props.theme.selectedActive};
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+`;
+export const IconHelp = ({ tooltipMessage, overlayStyle, placement = 'right', 'aria-label': ariaLabel, title, }) => (_jsx(Tooltip, { overlay: tooltipMessage, placement: placement, overlayStyle: overlayStyle, children: _jsx(HelpButton, { type: "button", "aria-label": ariaLabel || title || 'More information', children: _jsx(Icon, { name: "Info", color: "buttonSecondary" }) }) }));

package/dist/components/navbar/Navbar.component.d.ts CHANGED Viewed

@@ -1,8 +1,19 @@
-import { Item } from '../dropdown/Dropdown.component';
-type Action = {
-    type: string;
-    items?: Array<Item>;
+import { type Item } from '../dropdown/Dropdown.component';
+import { type Props as ButtonProps } from '../buttonv2/Buttonv2.component';
+type ButtonAction = {
+    type: 'button';
+} & ButtonProps;
+type DropdownAction = {
+    type: 'dropdown';
+    items: Array<Item>;
+    text?: string;
+    icon?: JSX.Element;
 };
+type CustomAction = {
+    type: 'custom';
+    render: React.ComponentType;
+};
+type Action = DropdownAction | ButtonAction | CustomAction;
 type Actions = Array<Action>;
 type Tab = {
     title?: string;

package/dist/components/navbar/Navbar.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;~~AAGhE~~,KAAK,MAAM,GAAG;~~IACZ~~,IAAI,EAAE,~~MAAM~~,CAAC;~~IACb~~,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;~~CACrB~~,CAAC;~~AACF~~,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;~~AA4JF~~,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,~~2CAwDP~~;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}
1	+ {"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAA6B,KAAK,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAEtG,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;CAChB,GAAG,WAAW,CAAC;AAChB,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,CAAC;AAC3D,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AAmKF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,2CAuDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}

package/dist/components/navbar/Navbar.component.js CHANGED Viewed

@@ -13,7 +13,7 @@ const NavbarContainer = styled.div `
   display: flex;
   justify-content: space-between;
   ${css `
-    background-color: ${getThemePropSelector('backgroundLevel1')};
+    background-color: ${getThemePropSelector('navbarBackground')};
     color: ${getThemePropSelector('textPrimary')};
     .fas,
     .sc-trigger-text {
@@ -100,7 +100,7 @@ const NavbarMenuItem = styled.div `
   align-items: center;
   .sc-dropdown {
     .trigger {
-      background-color: ${getThemePropSelector('backgroundLevel1')};
+      background-color: ${getThemePropSelector('navbarBackground')};
       &:hover {
         background-color: ${getThemePropSelector('highlight')};
       }
@@ -117,7 +117,7 @@ const NavbarMenuItem = styled.div `
     border-radius: 0;
     height: ${navbarHeight};
     font-size: ${fontSize.base};
-    background-color: ${getThemePropSelector('backgroundLevel1')};
+    background-color: ${getThemePropSelector('navbarBackground')};
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
@@ -139,20 +139,26 @@ const LogoContainer = styled.div `
     height: 2.143rem;
   }
 `;
-const getActionRenderer = ({ type, items = null, ...rest }, index) => {
-    if (type === 'dropdown') {
-        return items ? (_jsx(Dropdown, { size: "larger", variant: "backgroundLevel1", items: items, caret: false, ...rest }, `navbar_right_action_${index}`)) : null;
-    }
-    else if (type === 'button') {
-        return _jsx(Button, { ...rest }, `navbar_right_action_${index}`);
-    }
-    else if (type === 'custom') {
-        return _jsx(rest.render, {}, `navbar_right_action_${index}`);
+const getActionRenderer = (action, index) => {
+    switch (action.type) {
+        case 'dropdown': {
+            const { type, items, ...rest } = action;
+            return (_jsx(Dropdown, { size: "larger", variant: "backgroundLevel1", items: items, caret: false, ...rest }, `navbar_right_action_${index}`));
+        }
+        case 'button': {
+            const { type, ...rest } = action;
+            return _jsx(Button, { ...rest }, `navbar_right_action_${index}`);
+        }
+        case 'custom': {
+            const CustomComponent = action.render;
+            return _jsx(CustomComponent, {}, `navbar_right_action_${index}`);
+        }
+        default:
+            return null;
     }
-    return null;
 };
 function NavBar({ onToggleClick, logo, tabs = [], rightActions = [], ...rest }) {
-    return (_jsxs(NavbarContainer, { className: "sc-navbar", ...rest, children: [_jsxs(NavbarMenu, { children: [onToggleClick && (_jsx(NavbarMenuItem, { onClick: onToggleClick, children: _jsx(Button, { icon: _jsx(Icon, { name: "Lat-menu" }), title: "Main Menu" }) })), _jsx(NavbarMenuItem, { children: _jsx(LogoContainer, { className: "sc-logo", children: logo ? logo : _jsx(Logo, {}) }) })] }), tabs.length ? (_jsx(NavbarTabs, { children: tabs.map(({ link, title, selected, onClick, render }, index) => {
+    return (_jsxs(NavbarContainer, { className: "sc-navbar", ...rest, children: [_jsxs(NavbarMenu, { children: [onToggleClick && (_jsx(NavbarMenuItem, { onClick: onToggleClick, children: _jsx(Button, { icon: _jsx(Icon, { name: "Lat-menu" }), tooltip: { overlay: "Toggle Main Menu" } }) })), _jsx(NavbarMenuItem, { children: _jsx(LogoContainer, { className: "sc-logo", children: logo ? logo : _jsx(Logo, {}) }) })] }), tabs.length ? (_jsx(NavbarTabs, { children: tabs.map(({ link, title, selected, onClick, render }, index) => {
                     if (render) {
                         return (_jsx(Fragment, { children: render }, `navbar_tab_item_${index}`));
                     }
@@ -162,8 +168,6 @@ function NavBar({ onToggleClick, logo, tabs = [], rightActions = [], ...rest })
                         role: 'tab',
                         key: `navbar_tab_item_${index}`,
                     })) : (_jsx(TabItem, { onClick: onClick, role: "tab", selected: !!selected, "aria-selected": selected, children: _jsx("span", { children: title }) }, `navbar_tab_item_${index}`));
-                }) })) : null, rightActions.length ? (_jsx(NavbarMenu, { children: _jsx(NavbarMenuItem, { children: rightActions.map((action, index) =>
-                    //@ts-ignore too costly to type this one now
-                    getActionRenderer(action, index)) }) })) : null] }));
+                }) })) : null, rightActions.length ? (_jsx(NavbarMenu, { children: _jsx(NavbarMenuItem, { children: rightActions.map((action, index) => getActionRenderer(action, index)) }) })) : null] }));
 }
 export const Navbar = NavBar;

package/dist/components/sidebar/Sidebar.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":"AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,~~2CA8DP~~;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
1	+ {"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":"AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CA+DP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sidebar/Sidebar.component.js CHANGED Viewed

@@ -141,7 +141,7 @@ function Sidebar({ expanded, actions, onToggleClick, hoverable, ...rest }) {
     return (_jsx(Wrapper, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), hoverable: hoverable, hovered: hovered, expanded: expanded, children: _jsxs(SidebarContainer, { expanded: expanded, className: "sc-sidebar", hoverable: hoverable, hovered: hovered, ...rest, children: [onToggleClick && (_jsx(MenuItemIcon, { children: _jsx(Button, { icon: _jsx(Icon, { size: "lg", name: "Lat-menu" }), onClick: () => {
                             setHovered(false);
                             onToggleClick();
-                        } }) })), actions.map(({ active, label, onClick, icon = null, ...actionRest }, index) => {
+                        }, tooltip: { overlay: "Toggle sidebar" } }) })), actions.map(({ active, label, onClick, icon = null, ...actionRest }, index) => {
                     return (_jsxs(SidebarItem, { className: "sc-sidebar-item", active: active, title: label, onClick: onClick, onKeyDown: (event) => {
                             if (event.key === ' ' ||
                                 event.key === 'Enter' ||

package/dist/components/statusicon/StatusIcon.component.js CHANGED Viewed

@@ -20,27 +20,27 @@ export const StatusIcon = ({ status }) => {
                 return {
                     color: 'statusHealthy',
                     name: 'Check-circle',
-                    label: 'Healthy status icon',
+                    label: 'Healthy status',
                 };
             case STATUS_WARNING:
                 return {
                     color: 'statusWarning',
                     name: 'Times-circle',
-                    label: 'Warning status icon',
+                    label: 'Warning status',
                 };
             case STATUS_CRITICAL:
                 return {
                     color: 'statusCritical',
                     name: 'Times-circle',
-                    label: 'Critical status icon',
+                    label: 'Critical status',
                 };
             default:
                 return {
                     color: 'textTertiary',
                     name: 'Info',
-                    label: 'Information status icon',
+                    label: 'Information status',
                 };
         }
     })();
-    return _jsx(Icon, { color: icon.color, name: icon.name, "aria-label": icon.label });
+    return _jsx(Icon, { color: icon.color, name: icon.name, ariaLabel: icon.label });
 };

package/dist/components/tablev2/TableSync.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableSync.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableSync.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC;AAO7D,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAc,EACd,OAAe,EACf,GAAG,IAAI,EACR,EAAE,cAAc,~~2CAchB~~"}
1	+ {"version":3,"file":"TableSync.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableSync.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,CAAC;AAO7D,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,cAAc,EACd,OAAe,EACf,GAAG,IAAI,EACR,EAAE,cAAc,2CAahB"}

package/dist/components/tablev2/TableSync.js CHANGED Viewed

@@ -7,5 +7,5 @@ const TableSyncContainer = styled.div `
   align-items: center;
 `;
 export function TableSync({ onSync, tooltipOverlay, loading = false, ...rest }) {
-    return (_jsx(TableSyncContainer, { children: _jsx(Button, { icon: _jsx(Icon, { name: "Sync" }), tooltip: tooltipOverlay ? { overlay: tooltipOverlay } : undefined, onClick: onSync, "aria-label": "Synchronize table data", role: "button", isLoading: loading, ...rest }) }));
+    return (_jsx(TableSyncContainer, { children: _jsx(Button, { icon: _jsx(Icon, { name: "Sync" }), tooltip: tooltipOverlay ? { overlay: tooltipOverlay } : { overlay: "Synchronize table data" }, onClick: onSync, role: "button", isLoading: loading, ...rest }) }));
 }

package/dist/components/tablev2/Tablev2.component.js CHANGED Viewed

@@ -24,7 +24,7 @@ export const useTableContext = () => {
     return tableProps; //Todo figure out a way to transfer the type to the context provider
 };
 export const EmptyCell = ({ tooltipContent, mr = 4, }) => {
-    return (_jsx(Box, { mr: mr, children: _jsx(Tooltip, { overlay: _jsx(TooltipContent, { children: tooltipContent || 'unknown' }), children: _jsx(Icon, { name: "Minus" }) }) }));
+    return (_jsx(Box, { mr: mr, children: _jsx(Tooltip, { overlay: _jsx(TooltipContent, { children: tooltipContent || 'unknown' }), children: _jsx(Icon, { name: "Minus", ariaLabel: "Unknown" }) }) }));
 };
 const DefaultRenderer = ({ value }) => {
     const { rowHeight } = useTableContext();

package/dist/components/tooltip/Tooltip.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAMhD,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,~~2CAsCP~~;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
1	+ {"version":3,"file":"Tooltip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tooltip/Tooltip.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAMhD,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,UAAU,gBAAgB,CAAC;AACxC,eAAO,MAAM,QAAQ,cAAc,CAAC;AACpC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAC1C,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,MAAM,MAAM,QAAQ,GAChB,OAAO,GAAG,GACV,OAAO,MAAM,GACb,OAAO,IAAI,GACX,OAAO,KAAK,GACZ,OAAO,QAAQ,GACf,OAAO,MAAM,GACb,OAAO,UAAU,GACjB,OAAO,QAAQ,GACf,OAAO,SAAS,GAChB,OAAO,WAAW,GAClB,OAAO,OAAO,GACd,OAAO,SAAS,CAAC;AACrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0CF,iBAAS,OAAO,CAAC,EACf,SAAe,EACf,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,KAAK,2CAiDP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/tooltip/Tooltip.component.js CHANGED Viewed

@@ -62,6 +62,14 @@ function Tooltip({ placement = TOP, overlayStyle, children, overlay, ...rest })
                     setIsTooltipVisible(true);
                 }, onPointerLeave: () => {
                     setIsTooltipVisible(false);
+                }, onFocus: () => {
+                    setIsTooltipVisible(true);
+                }, onBlur: () => {
+                    setIsTooltipVisible(false);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        setIsTooltipVisible(false);
+                    }
                 }, children: _jsx("div", { ref: refs.setReference, children: children }) }), isTooltipVisible &&
                 overlay &&
                 createPortal(_jsx(TooltipOverLayContainer, { ref: refs.setFloating, className: "sc-tooltip-overlay", placement: placement, style: { ...floatingStyles, ...overlayStyle }, children: _jsx(TooltipText, { className: "sc-tooltip-overlay-text", children: overlay }) }), document.body)] }));

package/dist/style/theme.d.ts CHANGED Viewed

@@ -46,6 +46,7 @@ export type CoreUITheme = {
     backgroundLevel2: string;
     backgroundLevel3: string;
     backgroundLevel4: string;
+    navbarBackground: string;
     textPrimary: string;
     textSecondary: string;
     textTertiary: string;

package/dist/style/theme.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/style/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAClC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAClC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,0BAA0B,iEAK7B,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,~~CAqGtE~~,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,8EAAwB,CAAC;AAElD;;;;;;;GAOG;AAEH,eAAO,MAAM,KAAK,aAAoC,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;CASpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,UAejB,CAAC;AACF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAenB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AACF,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC;AAEF,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,eAAe,aAAa,CAAC;AAE1C,eAAO,MAAM,iBAAiB,QAAe,CAAC;AAC9C,eAAO,MAAM,YAAY,QAAe,CAAC;AAGzC,eAAO,MAAM,wBAAwB,UAyBpC,CAAC"}
1	+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/style/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAClC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAClC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,0BAA0B,iEAK7B,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAyGtE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,8EAAwB,CAAC;AAElD;;;;;;;GAOG;AAEH,eAAO,MAAM,KAAK,aAAoC,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;CASpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,UAejB,CAAC;AACF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAenB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AACF,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC;AAEF,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,eAAe,aAAa,CAAC;AAE1C,eAAO,MAAM,iBAAiB,QAAe,CAAC;AAC9C,eAAO,MAAM,YAAY,QAAe,CAAC;AAGzC,eAAO,MAAM,wBAAwB,UAyBpC,CAAC"}

package/dist/style/theme.js CHANGED Viewed

@@ -55,6 +55,7 @@ export const coreUIAvailableThemes = {
         backgroundLevel2: '#323245',
         backgroundLevel3: '#232331',
         backgroundLevel4: '#1B1B27',
+        navbarBackground: '#121219',
         textPrimary: '#EAEAEA',
         textSecondary: '#B5B5B5',
         textTertiary: '#DFDFDF',
@@ -80,6 +81,7 @@ export const coreUIAvailableThemes = {
         backgroundLevel2: '#F0F0F4',
         backgroundLevel3: '#E4E6EC',
         backgroundLevel4: '#FAFAF6',
+        navbarBackground: '#FCFCFC',
         textPrimary: '#0D0D0D',
         textSecondary: '#4F506D',
         textTertiary: '#DFDFDF', // TO CHECK
@@ -105,6 +107,7 @@ export const coreUIAvailableThemes = {
         backgroundLevel2: '#272020',
         backgroundLevel3: '#201B1A',
         backgroundLevel4: '#191515',
+        navbarBackground: '#120F0F',
         textPrimary: '#EAEAEA',
         textSecondary: '#A4ACB4',
         textTertiary: '#DFDFDF',
@@ -130,6 +133,7 @@ export const coreUIAvailableThemes = {
         backgroundLevel2: '#323245',
         backgroundLevel3: '#232331',
         backgroundLevel4: '#1B1B27',
+        navbarBackground: '#121219',
         textPrimary: '#EAEAEA',
         textSecondary: '#B5B5B5',
         textTertiary: '#DFDFDF',

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.196.0",
+  "version": "0.198.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -39,9 +39,9 @@
     "@babel/preset-typescript": "^7.16.7",
     "@chromatic-com/storybook": "^1.9.0",
     "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.15",
     "@storybook/addon-mdx-gfm": "^8.6.14",
-    "@storybook/addon-storysource": "^8.6.14",
+    "@storybook/addon-storysource": "^8.6.15",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
     "@storybook/blocks": "^8.6.14",
     "@storybook/manager-api": "^8.6.14",

package/src/lib/components/banner/Banner.component.test.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Banner } from './Banner.component';
-import { Icon } from '../icon/Icon.component';
+import React from 'react';
 import { getWrapper } from '../../testUtils';
+import { Icon } from '../icon/Icon.component';
+import { Banner } from './Banner.component';
 describe('Banner', () => {
   const { Wrapper } = getWrapper();
@@ -28,31 +28,30 @@ describe('Banner', () => {
   });
   it('should render with default icon when withDefaultIcon is true', async () => {
-    render(
+    const { container } = render(
       <Banner variant="base" withDefaultIcon>
         Message with default icon
       </Banner>,
-      { wrapper: Wrapper }
+      { wrapper: Wrapper },
     );
     expect(screen.getByText('Message with default icon')).toBeInTheDocument();
+    // Icon is decorative (aria-hidden), verify it's rendered via DOM query
     await waitFor(() => {
-      expect(screen.getByLabelText('Info-circle')).toBeInTheDocument();
+      expect(container.querySelector('svg[data-icon="circle-info"]')).toBeInTheDocument();
     });
   });
   it('should render with custom icon when icon prop is provided', async () => {
-    render(
+    const { container } = render(
       <Banner variant="danger" icon={<Icon name="Check-circle" />}>
         Message with custom icon
       </Banner>,
-      { wrapper: Wrapper }
+      { wrapper: Wrapper },
     );
     expect(screen.getByText('Message with custom icon')).toBeInTheDocument();
+    // Icon is decorative (aria-hidden), verify it's rendered via DOM query
     await waitFor(() => {
-      expect(screen.getByLabelText('Check-circle')).toBeInTheDocument();
+      expect(container.querySelector('svg[data-icon="circle-check"]')).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/buttonv2/Buttonv2.component.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -11,7 +11,8 @@ export const FocusVisibleStyle = css`
   z-index: 1000;
 `;
-export type Props = Omit<
+/** Props used by ButtonStyled for styling (no tooltip) */
+type ButtonStyledProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'size' | 'label'
 > & {
@@ -21,10 +22,31 @@ export type Props = Omit<
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: React.ReactNode;
   label?: React.ReactNode;
-  tooltip?: Omit<TooltipProps, 'children'>;
   isLoading?: boolean;
 };
-export const ButtonStyled = styled.button<Props>`
+/** Button with a visible label - tooltip is optional */
+type ButtonWithLabel = ButtonStyledProps & {
+  label: React.ReactNode;
+  tooltip?: Omit<TooltipProps, 'children'>;
+};
+/** Icon-only button - requires either string tooltip OR explicit aria-label */
+type IconOnlyButton = ButtonStyledProps & {
+  label?: never;
+} & (
+  | {
+      tooltip: Omit<TooltipProps, 'children'> & { overlay: string };
+      'aria-label'?: string;
+    }
+  | {
+      tooltip: Omit<TooltipProps, 'children'>;
+      'aria-label': string;
+    }
+);
+export type Props = ButtonWithLabel | IconOnlyButton;
+export const ButtonStyled = styled.button<ButtonStyledProps>`
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -243,9 +265,11 @@ function Button({
     );
   }
-  if (!label && icon && !tooltip) {
-    console.warn('Please specify the tooltip for the standalone icon button.');
-  }
+  // For icon-only buttons, use tooltip.overlay as aria-label (typed as string for IconOnlyButton)
+  const buttonAriaLabel =
+    !label && icon && tooltip?.overlay
+      ? (tooltip.overlay as string)
+      : undefined;
   return (
     <Tooltip
@@ -261,31 +285,19 @@ function Button({
         icon={icon}
         onClick={onClick}
         size={size}
+        aria-label={buttonAriaLabel}
         {...rest}
       >
-        <>
-          {icon &&
-            (isLoading ? (
-              <ButtonLoader size="small" variant={variant} label={label} />
-            ) : (
-              <ButtonIcon
-                label={label}
-                aria-label={
-                  tooltip &&
-                  tooltip.overlay &&
-                  typeof tooltip.overlay === 'string'
-                    ? tooltip.overlay
-                    : undefined
-                }
-              >
-                {icon}
-              </ButtonIcon>
-            ))}
-          {!icon && isLoading && (
+        {icon &&
+          (isLoading ? (
             <ButtonLoader size="small" variant={variant} label={label} />
-          )}
-          <ButtonLabel>{label}</ButtonLabel>
-        </>
+          ) : (
+            <ButtonIcon label={label}>{icon}</ButtonIcon>
+          ))}
+        {!icon && isLoading && (
+          <ButtonLoader size="small" variant={variant} label={label} />
+        )}
+        <ButtonLabel>{label}</ButtonLabel>
       </ButtonStyled>
     </Tooltip>
   );

package/src/lib/components/buttonv2/CopyButton.component.tsx CHANGED Viewed

@@ -63,7 +63,7 @@ export const CopyButton = ({
   textToCopy: string;
   copyAsHtml?: boolean;
   variant?: 'outline' | 'ghost';
-} & Props) => {
+} & Omit<Props, 'tooltip' | 'label'>) => {
   const { copy, copyStatus } = useClipboard();
   return (
     <Button

package/src/lib/components/charts/barchart/Barchart.test.tsx CHANGED Viewed

@@ -413,7 +413,9 @@ describe('Barchart', () => {
     expect(screen.getByText('Test Secondary Title')).toBeInTheDocument();
     expect(screen.getByText('Test Right Title')).toBeInTheDocument();
     await waitFor(() => {
-      expect(screen.getByRole('img', { name: /Info/i })).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /More information/i }),
+      ).toBeInTheDocument();
     });
   });
   describe('formatDate', () => {

package/src/lib/components/icon/Icon.component.tsx CHANGED Viewed

@@ -44,8 +44,8 @@ export const customIcons: Record<
 customIcons['Remote-user'].displayName = 'RemoteUser';
 customIcons['Remote-group'].displayName = 'RemoteGroup';
-customIcons['Bucket'].displayName = 'Bucket';
-customIcons['Buckets'].displayName = 'Buckets';
+customIcons.Bucket.displayName = 'Bucket';
+customIcons.Buckets.displayName = 'Buckets';
 const IconStyled = styled(FontAwesomeIcon)`
   ${(props) => {
@@ -64,6 +64,11 @@ type Props = {
   name: IconName;
   size?: SizeProp;
   color?: IconColor | CSSProperties['color'];
+  /**
+   * Accessible label for meaningful icons.
+   * When provided, the icon is announced to screen readers.
+   * When omitted, the icon is decorative (hidden from assistive technologies).
+   */
   ariaLabel?: string;
   withWrapper?: boolean;
   style?: CSSProperties;
@@ -125,7 +130,7 @@ function NonWrappedIcon({
   name,
   size = '1x',
   color,
-  ariaLabel = '',
+  ariaLabel,
   title,
   ...rest
 }: Omit<Props, 'withWrapper'>) {
@@ -159,9 +164,15 @@ function NonWrappedIcon({
     return () => setIcon(undefined);
   }, [name, iconInfo]);
+  // Icons are decorative by default (aria-hidden: true)
+  // If ariaLabel is provided, the icon is meaningful (aria-hidden: false)
+  const accessibilityProps = ariaLabel
+    ? { 'aria-hidden': false as const, 'aria-label': ariaLabel }
+    : { 'aria-hidden': true as const };
   if (!icon && !customIcons[name]) {
     return (
-      <DelayedFallback aria-label={`${name} ${ariaLabel}`}>
+      <DelayedFallback {...accessibilityProps}>
         <Loader size="base" />
       </DelayedFallback>
     );
@@ -174,7 +185,7 @@ function NonWrappedIcon({
       icon={icon}
       size={size}
       title={title}
-      aria-label={`${name} ${ariaLabel}`}
+      {...accessibilityProps}
       {...rest}
     />
   );

package/src/lib/components/iconhelper/IconHelper.test.tsx CHANGED Viewed

@@ -7,20 +7,20 @@ import { IconHelp } from './IconHelper';
 describe('IconHelper', () => {
   const selectors = {
-    icon: () => screen.getByRole('img'),
+    helpButton: () => screen.getByRole('button', { name: /Info/i }),
   };
   const renderIcon = (tooltipMessage: React.ReactNode) => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <IconHelp tooltipMessage={tooltipMessage} title="Info" />
+        <IconHelp tooltipMessage={tooltipMessage} aria-label="Info" />
       </Wrapper>,
     );
   };
   it('should render correctly', async () => {
     renderIcon('This is a tooltip');
     await waitFor(() => {
-      expect(selectors.icon()).toBeInTheDocument();
+      expect(selectors.helpButton()).toBeInTheDocument();
     });
   });
   it('should display tooltip on hover', async () => {
@@ -28,25 +28,27 @@ describe('IconHelper', () => {
     renderIcon(tooltipMessage);
     await waitFor(() => {
-      expect(selectors.icon()).toBeInTheDocument();
+      expect(selectors.helpButton()).toBeInTheDocument();
     });
-    userEvent.hover(selectors.icon());
+    userEvent.hover(selectors.helpButton());
     await waitFor(() => {
       expect(screen.getByText(tooltipMessage)).toBeVisible();
     });
   });
-  it('should render with title prop (passed to FontAwesome as native tooltip)', async () => {
+  it('should render with aria-label prop for accessibility', async () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
         <IconHelp
           tooltipMessage={'This is a tooltip'}
-          title="Info Helper Testing"
+          aria-label="Info Helper Testing"
         />
       </Wrapper>,
     );
     await waitFor(() => {
-      expect(screen.getByRole('img', { name: /Info/i })).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /Info Helper Testing/i }),
+      ).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/iconhelper/IconHelper.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
 import { Icon } from '../icon/Icon.component';
 import { Position, Tooltip } from '../tooltip/Tooltip.component';
@@ -6,13 +7,39 @@ type IconHelpProps = {
   tooltipMessage: ReactNode;
   placement?: Position;
   overlayStyle?: CSSProperties;
+  /**
+   * Accessible label for the help button.
+   * Should describe what information the tooltip provides.
+   * Example: "More info about Veeam application"
+   */
+  'aria-label'?: string;
+  /** @deprecated Use aria-label instead */
   title?: string;
 };
+const HelpButton = styled.button`
+  display: inline-flex;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;              /* Inherit font sizing */
+  vertical-align: text-bottom;     /* Align with text */
+  line-height: 1;
+  &:focus-visible {
+    outline: 2px dashed ${(props) => props.theme.selectedActive};
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+`;
 export const IconHelp = ({
   tooltipMessage,
   overlayStyle,
   placement = 'right',
+  'aria-label': ariaLabel,
   title,
 }: IconHelpProps) => (
   <Tooltip
@@ -20,6 +47,11 @@ export const IconHelp = ({
     placement={placement}
     overlayStyle={overlayStyle}
   >
-    <Icon name="Info" color="buttonSecondary" title={title} />
+    <HelpButton
+      type="button"
+      aria-label={ariaLabel || title || 'More information'}
+    >
+      <Icon name="Info" color="buttonSecondary" />
+    </HelpButton>
   </Tooltip>
 );

package/src/lib/components/navbar/Navbar.component.tsx CHANGED Viewed

@@ -4,13 +4,26 @@ import { Logo } from '../../icons/branding';
 import { spacing } from '../../spacing';
 import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
 import { getThemePropSelector } from '../../utils';
-import { Dropdown, Item } from '../dropdown/Dropdown.component';
+import { Dropdown, type Item } from '../dropdown/Dropdown.component';
 import { Icon } from '../icon/Icon.component';
-import { Button, FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
-type Action = {
-  type: string;
-  items?: Array<Item>;
+import { Button, FocusVisibleStyle, type Props as ButtonProps } from '../buttonv2/Buttonv2.component';
+type ButtonAction = {
+  type: 'button';
+} & ButtonProps;
+type DropdownAction = {
+  type: 'dropdown';
+  items: Array<Item>;
+  text?: string;
+  icon?: JSX.Element;
+};
+type CustomAction = {
+  type: 'custom';
+  render: React.ComponentType;
 };
+type Action = DropdownAction | ButtonAction | CustomAction;
 type Actions = Array<Action>;
 type Tab = {
   title?: string;
@@ -30,7 +43,7 @@ const NavbarContainer = styled.div`
   display: flex;
   justify-content: space-between;
   ${css`
-    background-color: ${getThemePropSelector('backgroundLevel1')};
+    background-color: ${getThemePropSelector('navbarBackground')};
     color: ${getThemePropSelector('textPrimary')};
     .fas,
     .sc-trigger-text {
@@ -118,7 +131,7 @@ const NavbarMenuItem = styled.div`
   align-items: center;
   .sc-dropdown {
     .trigger {
-      background-color: ${getThemePropSelector('backgroundLevel1')};
+      background-color: ${getThemePropSelector('navbarBackground')};
       &:hover {
         background-color: ${getThemePropSelector('highlight')};
       }
@@ -135,7 +148,7 @@ const NavbarMenuItem = styled.div`
     border-radius: 0;
     height: ${navbarHeight};
     font-size: ${fontSize.base};
-    background-color: ${getThemePropSelector('backgroundLevel1')};
+    background-color: ${getThemePropSelector('navbarBackground')};
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
@@ -159,25 +172,32 @@ const LogoContainer = styled.div`
   }
 `;
-const getActionRenderer = ({ type, items = null, ...rest }, index) => {
-  if (type === 'dropdown') {
-    return items ? (
-      <Dropdown
-        key={`navbar_right_action_${index}`}
-        size="larger"
-        variant="backgroundLevel1"
-        items={items}
-        caret={false}
-        {...rest}
-      />
-    ) : null;
-  } else if (type === 'button') {
-    return <Button key={`navbar_right_action_${index}`} {...rest} />;
-  } else if (type === 'custom') {
-    return <rest.render key={`navbar_right_action_${index}`} />;
+const getActionRenderer = (action: Action, index: number) => {
+  switch (action.type) {
+    case 'dropdown': {
+      const { type, items, ...rest } = action;
+      return (
+        <Dropdown
+          key={`navbar_right_action_${index}`}
+          size="larger"
+          variant="backgroundLevel1"
+          items={items}
+          caret={false}
+          {...rest}
+        />
+      );
+    }
+    case 'button': {
+      const { type, ...rest } = action;
+      return <Button key={`navbar_right_action_${index}`} {...rest} />;
+    }
+    case 'custom': {
+      const CustomComponent = action.render;
+      return <CustomComponent key={`navbar_right_action_${index}`} />;
+    }
+    default:
+      return null;
   }
-  return null;
 };
 function NavBar({
@@ -192,7 +212,7 @@ function NavBar({
       <NavbarMenu>
         {onToggleClick && (
           <NavbarMenuItem onClick={onToggleClick}>
-            <Button icon={<Icon name="Lat-menu" />} title="Main Menu" />
+            <Button icon={<Icon name="Lat-menu" />} tooltip={{overlay: "Toggle Main Menu"}} />
           </NavbarMenuItem>
         )}
         <NavbarMenuItem>
@@ -234,7 +254,6 @@ function NavBar({
         <NavbarMenu>
           <NavbarMenuItem>
             {rightActions.map((action, index) =>
-              //@ts-ignore too costly to type this one now
               getActionRenderer(action, index),
             )}
           </NavbarMenuItem>

package/src/lib/components/sidebar/Sidebar.component.tsx CHANGED Viewed

@@ -196,6 +196,7 @@ function Sidebar({
                 setHovered(false);
                 onToggleClick();
               }}
+              tooltip={{overlay: "Toggle sidebar"}}
             />
           </MenuItemIcon>
         )}

package/src/lib/components/statusicon/StatusIcon.component.tsx CHANGED Viewed

@@ -26,30 +26,30 @@ export const StatusIcon = ({ status }: { status: Status }) => {
           return {
             color: 'statusHealthy',
             name: 'Check-circle',
-            label: 'Healthy status icon',
+            label: 'Healthy status',
           };
         case STATUS_WARNING:
           return {
             color: 'statusWarning',
             name: 'Times-circle',
-            label: 'Warning status icon',
+            label: 'Warning status',
           };
         case STATUS_CRITICAL:
           return {
             color: 'statusCritical',
             name: 'Times-circle',
-            label: 'Critical status icon',
+            label: 'Critical status',
           };
         default:
           return {
             color: 'textTertiary',
             name: 'Info',
-            label: 'Information status icon',
+            label: 'Information status',
           };
       }
     })();
-  return <Icon color={icon.color} name={icon.name} aria-label={icon.label} />;
+  return <Icon color={icon.color} name={icon.name} ariaLabel={icon.label} />;
 };

package/src/lib/components/tablev2/TableSync.tsx CHANGED Viewed

@@ -24,9 +24,8 @@ export function TableSync({
     <TableSyncContainer>
       <Button
         icon={<Icon name="Sync" />}
-        tooltip={tooltipOverlay ? { overlay: tooltipOverlay } : undefined}
+        tooltip={tooltipOverlay ? { overlay: tooltipOverlay } : {overlay: "Synchronize table data"}}
         onClick={onSync}
-        aria-label="Synchronize table data"
         role="button"
         isLoading={loading}
         {...rest}

package/src/lib/components/tablev2/Tablev2.component.tsx CHANGED Viewed

@@ -139,7 +139,7 @@ export const EmptyCell = ({
       <Tooltip
         overlay={<TooltipContent>{tooltipContent || 'unknown'}</TooltipContent>}
       >
-        <Icon name="Minus" />
+        <Icon name="Minus" ariaLabel="Unknown"  />
       </Tooltip>
     </Box>
   );

package/src/lib/components/tooltip/Tooltip.component.tsx CHANGED Viewed

@@ -101,6 +101,17 @@ function Tooltip({
         onPointerLeave={() => {
           setIsTooltipVisible(false);
         }}
+        onFocus={() => {
+          setIsTooltipVisible(true);
+        }}
+        onBlur={() => {
+          setIsTooltipVisible(false);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            setIsTooltipVisible(false);
+          }
+        }}
       >
         <div ref={refs.setReference}>{children}</div>
       </TooltipContainer>

package/src/lib/style/theme.ts CHANGED Viewed

@@ -49,6 +49,7 @@ export type CoreUITheme = {
   backgroundLevel2: string;
   backgroundLevel3: string;
   backgroundLevel4: string;
+  navbarBackground: string;
   textPrimary: string;
   textSecondary: string;
   textTertiary: string;
@@ -84,6 +85,7 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     backgroundLevel2: '#323245',
     backgroundLevel3: '#232331',
     backgroundLevel4: '#1B1B27',
+    navbarBackground: '#121219',
     textPrimary: '#EAEAEA',
     textSecondary: '#B5B5B5',
     textTertiary: '#DFDFDF',
@@ -109,6 +111,7 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     backgroundLevel2: '#F0F0F4',
     backgroundLevel3: '#E4E6EC',
     backgroundLevel4: '#FAFAF6',
+    navbarBackground: '#FCFCFC',
     textPrimary: '#0D0D0D',
     textSecondary: '#4F506D',
     textTertiary: '#DFDFDF', // TO CHECK
@@ -134,6 +137,7 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     backgroundLevel2: '#272020',
     backgroundLevel3: '#201B1A',
     backgroundLevel4: '#191515',
+    navbarBackground: '#120F0F',
     textPrimary: '#EAEAEA',
     textSecondary: '#A4ACB4',
     textTertiary: '#DFDFDF',
@@ -159,6 +163,7 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     backgroundLevel2: '#323245',
     backgroundLevel3: '#232331',
     backgroundLevel4: '#1B1B27',
+    navbarBackground: '#121219',
     textPrimary: '#EAEAEA',
     textSecondary: '#B5B5B5',
     textTertiary: '#DFDFDF',

package/stories/Button/button.stories.tsx CHANGED Viewed

@@ -1,7 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { Form, FormGroup, FormSection, Icon, Stack } from '../../src/lib';
-import { Button } from '../../src/lib/components/buttonv2/Buttonv2.component';
+import {
+  Button,
+  Props as ButtonProps,
+} from '../../src/lib/components/buttonv2/Buttonv2.component';
 import { Input } from '../../src/lib/next';
 import { iconArgType } from '../controls';
@@ -9,9 +12,10 @@ export default {
   title: 'Components/Button',
   component: Button,
   args: {
+    label: 'Button',
     onClick: action('Button clicked'),
   },
-  render: ({ icon, ...args }) => {
+  render: ({ icon, ...args }: { icon?: string } & ButtonProps) => {
     return <Button {...args} icon={icon && <Icon name={icon} />} />;
   },
   argTypes: {
@@ -176,7 +180,7 @@ export const ButtonDisabled = {
         width: '120px',
       },
       overlay: 'The button is disabled',
-      placement: 'top',
+      placement: 'top' as const,
     },
   },
 };
@@ -189,10 +193,10 @@ export const ButtonLoading = {
 };
 export const IconButtonWithTooltip = {
-  render: ({ ...args }) => {
+  render: (args: ButtonProps) => {
     return (
       <Stack gap="r32" style={{ height: '5rem' }}>
-        <Button icon={<Icon name="Delete"></Icon>} {...args} />
+        <Button {...args} />
         <Button
           variant="secondary"
           icon={<Icon name="Sync"></Icon>}
@@ -201,16 +205,12 @@ export const IconButtonWithTooltip = {
               width: '80px',
             },
             overlay: 'Bound status',
-            placement: 'top',
+            placement: 'top' as const,
           }}
         />
-        <Button {...args} icon={<Icon name="Delete"></Icon>} variant="danger" />
-        <Button
-          {...args}
-          icon={<Icon name="Delete"></Icon>}
-          variant="outline"
-        />
+        <Button {...args} variant="danger" />
+        <Button {...args} icon={<Icon name="Delete"></Icon>} variant="outline" />
       </Stack>
     );
   },
@@ -222,7 +222,7 @@ export const IconButtonWithTooltip = {
         width: '80px',
       },
       overlay: 'Entity deletion',
-      placement: 'top',
+      placement: 'top' as const,
     },
   },
 };
@@ -234,9 +234,7 @@ export const GhostButtons = {
         <Button
           icon={<i className="fas fa-sync" />}
           tooltip={{
-            overlayStyle: {
-              width: '80px',
-            },
             overlay: 'Refresh the metrics',
             placement: 'top',
           }}
@@ -244,18 +242,13 @@ export const GhostButtons = {
         <Button
           icon={<i className="fas fa-file-export" />}
           tooltip={{
-            overlayStyle: {
-              width: '120px',
-            },
             overlay: 'Export the data in predefined format',
-            placement: 'top',
           }}
         />
         <Button
           icon={<i className="fas fa-calendar-week" />}
           tooltip={{
             overlayStyle: {
-              width: '120px',
             },
             overlay: 'Metric over a period',
             placement: 'top',

package/stories/navbar.stories.tsx CHANGED Viewed

@@ -123,6 +123,7 @@ const rightActions = [
   {
     type: 'button',
     icon: <i className="fas fa-sun" />,
+    tooltip: { overlay: 'Toggle Theme' },
     onClick: action('Theme toggle clicked'),
   },
   {