@dnanpm/styleguide 3.9.6 → 3.9.7

package/build/cjs/components/AccordionItem/AccordionItem.d.ts

@@ -65,8 +65,12 @@ export interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
 }
 /** @visibleName Accordion Item */
-declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
+declare const AccordionItem: ({ "data-testid": dataTestId, type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default AccordionItem;

package/build/cjs/components/AccordionItem/AccordionItem.js

@@ -30,7 +30,7 @@ const AccordionItemTitle = styled__default.default.div `
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    cursor: pointer;
+    cursor: ${p => (p.showPointer ? 'pointer' : 'default')};
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.6)}
         ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     color: ${p => p.isExpanded && p.highlightSelected ? theme.default.color.default.pink : theme.default.color.default.black};
@@ -65,17 +65,27 @@ const AccordionItemCloseButton = styled__default.default.div `
 `;
 /** @visibleName Accordion Item */
 const AccordionItem = (_a) => {
-    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = tslib.__rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
+    var _b, _c;
+    var { 'data-testid': dataTestId = 'accordion-item', type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = tslib.__rest(_a, ['data-testid', "type", "hasCloseButton", "highlightSelected"]);
     const contentRef = React.useRef(null);
+    const accordionButtonRef = React.useRef(null);
     // Get height when element dimensions change
     const { height: contentHeight } = useResizeObserver.default(contentRef);
-    const itemContent = (React__default.default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
-        React__default.default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+    const accordionContentId = `accordion-content-id-${(_b = props.id) !== null && _b !== void 0 ? _b : ''}`;
+    const accordionButtonId = `accordion-button-id-${(_c = props.id) !== null && _c !== void 0 ? _c : ''}`;
+    const handleInteraction = (callback, event) => {
+        callback === null || callback === void 0 ? void 0 : callback(event);
+        if (accordionButtonRef.current)
+            accordionButtonRef.current.focus();
+    };
+    const hasFunctionality = Boolean(props.onClick || props.onKeyDown);
+    const itemContent = (React__default.default.createElement(AccordionItemContainer, { id: props.id, type: type, className: props.className, "data-testid": dataTestId },
+        React__default.default.createElement(AccordionItemTitle, { ref: accordionButtonRef, id: accordionButtonId, tabIndex: hasFunctionality ? 0 : -1, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, "aria-expanded": Boolean(props.isExpanded), "aria-controls": accordionContentId, showPointer: hasFunctionality, "data-testid": `${dataTestId}-title`, role: "button" },
             props.title,
             props.isExpanded ? (React__default.default.createElement(Icon.default, { icon: icons.ChevronUp, color: theme.default.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.default.createElement(Icon.default, { icon: icons.ChevronDown, color: theme.default.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React__default.default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React__default.default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React__default.default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+        React__default.default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded, "aria-labelledby": accordionButtonId, "aria-hidden": !props.isExpanded, "data-testid": `${dataTestId}-content`, role: "region" },
+            React__default.default.createElement(AccordionItemContent, { id: accordionContentId, ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default.default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: e => handleInteraction(props.onClick, e), onKeyDown: e => handleInteraction(props.onKeyDown, e), "aria-label": props.closeLabel, "data-testid": `${dataTestId}-close-button`, role: "button" },
             React__default.default.createElement("span", null, props.closeLabel),
             React__default.default.createElement(Icon.default, { icon: icons.Close })))));
     return type === 'box' ? (React__default.default.createElement(Box.default, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);

package/build/cjs/components/ButtonIcon/ButtonIcon.d.ts

@@ -20,6 +20,12 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * @default false
      */
     isReversed?: boolean;
+    /**
+     * Aria-expanded for screen readers
+     *
+     * @default undefined
+     */
+    ariaExpanded?: boolean;
 }
 /** @visibleName Button Icon */
 declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -35,7 +35,7 @@ const ButtonElement = styled__default.default.button `
 
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
-    &:focus {
+    &:focus-visible {
         border-radius: ${theme.default.radius.s};
         text-decoration: underline;
         border: 2px solid
@@ -92,7 +92,7 @@ const ButtonElement = styled__default.default.button `
 const ButtonIcon = (_a) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
+    return (React__default.default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };

package/build/cjs/components/EmptyState/EmptyState.d.ts

@@ -30,6 +30,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose of the EmptyState,
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Empty State */
 declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/EmptyState/EmptyState.js

@@ -24,9 +24,9 @@ const ContentWrapper = styled.default.div `
 /** @visibleName Empty State */
 const EmptyState = (_a) => {
     var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
-    return (React__default.default.createElement(Box.default, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+    return (React__default.default.createElement(Box.default, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId, role: "region", ariaLabel: props.ariaLabel },
         React__default.default.createElement(ContentWrapper, null,
-            React__default.default.createElement(Icon.default, { icon: icon, size: iconSize, color: theme.default.color.default.pink }),
+            React__default.default.createElement(Icon.default, { icon: icon, size: iconSize, color: theme.default.color.default.pink, "aria-hidden": true }),
             React__default.default.createElement("div", null, props.children))));
 };
 

package/build/cjs/components/Expander/Expander.js

@@ -40,11 +40,17 @@ const Content = styled.default.div `
 `;
 const Expander = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const handleCloseButtonClick = (e) => {
+        var _a, _b;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        const toggleButton = (_b = e.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.previousElementSibling;
+        toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.focus();
+    };
     return (React__default.default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(StyledButtonIcon, { icon: props.isExpanded ? icons.ChevronUp : icons.ChevronDown, onClick: props.onClick, isReversed: true }, props.buttonLabel),
+        React__default.default.createElement(StyledButtonIcon, { icon: props.isExpanded ? icons.ChevronUp : icons.ChevronDown, onClick: props.onClick, isReversed: true, ariaExpanded: props.isExpanded }, props.buttonLabel),
         props.isExpanded && (React__default.default.createElement(ContentWrapper, null,
             React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            props.closeButtonLabel && (React__default.default.createElement(StyledButtonIcon, { icon: icons.Close, onClick: props.onClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
+            props.closeButtonLabel && (React__default.default.createElement(StyledButtonIcon, { icon: icons.Close, onClick: handleCloseButtonClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
 };
 
 exports.default = Expander;

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -18,6 +18,7 @@ const LinksListEl = styled.default.li `
     a {
         line-height: ${theme.default.lineHeight.default};
         color: ${theme.default.color.default.white};
+        text-decoration: none;
         &:hover,
         &:focus,
         &:active {
@@ -151,6 +152,7 @@ const GeneralInformationContainer = styled.default.div `
 `;
 const GeneralInformationLink = styled.default.a `
     &:after {
+        display: inline-block;
         content: '|';
         padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
     }

package/build/cjs/components/Footer/Footer.js

@@ -30,6 +30,7 @@ const TopContainer = styled.default.div `
             gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.9)};
             font-weight: ${theme.default.fontWeight.bold};
             line-height: ${theme.default.lineHeight.default};
+            text-decoration: none;
 
             &:hover,
             &:focus,
@@ -68,6 +69,7 @@ const LangLinksContainer = styled.default.div `
 const LangLink = styled.default.a `
     background: ${({ isActive }) => isActive ? theme.default.color.background.white.default : 'transparent'};
     color: ${({ isActive }) => (isActive ? theme.default.color.text.plum : theme.default.color.text.white)};
+    text-decoration: none;
     &:hover,
     &:active,
     &:focus {
@@ -149,6 +151,7 @@ const FooterContainer = styled.default.footer `
 
     nav {
         a {
+            text-decoration: none;
             &:not(.active-site) {
                 background: transparent;
             }
@@ -169,6 +172,7 @@ const FooterContainer = styled.default.footer `
     }
 
     div > a {
+        text-decoration: none;
         &:not(${LangLink}) {
             color: ${theme.default.color.text.white};
             &:not(.service-button):hover,

package/build/cjs/components/Icon/Icon.d.ts

@@ -52,7 +52,15 @@ export interface Props extends Partial<IconProps> {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass aria label for accessibility purposes
+     */
+    'aria-label'?: string;
+    /**
+     * Allows to pass aria hidden for accessibility purposes
+     */
+    'aria-hidden'?: boolean;
 }
-declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Icon;

package/build/cjs/components/Icon/Icon.js

@@ -35,13 +35,13 @@ const IconContainer = styled.default.span `
     }
 `;
 const Icon = (_a) => {
-    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["name", "icon", "color", "size", 'data-testid']);
+    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = tslib.__rest(_a, ["name", "icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     const RenderIcon = name && IconsList[name];
     return (React__default.default.createElement(React__default.default.Fragment, null,
         RenderIcon && (React__default.default.createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
             React__default.default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__default.default.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId },
+        IconParam && (React__default.default.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
             React__default.default.createElement(IconParam, { size: size, color: color })))));
 };
 

package/build/cjs/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -19,6 +19,7 @@ const BusinessMenuLink = styled.default.a `
     font-size: ${theme.default.fontSize.xs};
     line-height: ${theme.default.lineHeight.s};
     border-radius: ${theme.default.radius.pill};
+    text-decoration: none;
     display: block;
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
     ${styledUtils.media.md `

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import React from 'react';
 import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
-interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
+interface MainNavTooltipMenuProps<ContentProps extends object = object> extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
     /** Aria-label for screen readers in mobile */
     ariaLabel?: string;
     /** Tooltip menu content */
@@ -11,7 +11,7 @@ interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCar
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
-    contentComponent?: ReactNode | boolean;
+    contentComponent?: ComponentType<ContentProps> | ReactNode | boolean;
     /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
     closeWhenTagClicked?: string[];
     /** Width of the opened menu content. default 20rem. */
@@ -47,6 +47,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -189,5 +192,5 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     isActive?: boolean;
     collapseSize: number;
 }, never>;
-declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps) => React.JSX.Element;
+declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -22,6 +22,9 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainHeaderNavigationProps {
@@ -11,7 +11,7 @@ export interface MainHeaderNavigationProps {
     zIndex?: number;
     search?: boolean;
     searchText?: string;
-    searchComponent?: ReactNode | boolean;
+    searchComponent?: ComponentType | ReactNode | boolean;
     mainMenuAriaLabel?: string;
     minicart?: boolean;
     minicartText?: string;
@@ -21,7 +21,7 @@ export interface MainHeaderNavigationProps {
      *
      * @deprecated Use `onCartButtonClick` property instead
      */
-    minicartComponent?: ReactNode | boolean;
+    minicartComponent?: ComponentType | ReactNode | boolean;
     showMinicart?: boolean;
     /**
      * On Cart button click callback
@@ -32,10 +32,10 @@ export interface MainHeaderNavigationProps {
     languageSelectorText?: string;
     login?: boolean;
     loginText?: string;
-    loginComponent?: ReactNode | boolean;
+    loginComponent?: ComponentType | ReactNode | boolean;
     isLoggedIn?: boolean;
     collapseSize?: number;
-    nextJSLinkComponent: ReactNode | boolean;
+    nextJSLinkComponent: ComponentType | ReactNode | boolean;
     currentUrl?: string;
     notificationText?: string;
 }

package/build/cjs/components/MainHeaderNavigation/context/NavContext.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
 import type { GlobalNavItems, MenuLevelItem, MenuStates, MenuTooltipItems, MobileMenuLevel } from '../types/globalNavProps';
 export interface NavContextProps {
     categoryCollectionText: string;
@@ -13,13 +13,13 @@ export interface NavContextProps {
     level1Items: MobileMenuLevel;
     level2Items: MobileMenuLevel;
     lang: string;
-    loginComponent?: ReactNode | boolean | undefined;
+    loginComponent?: ComponentType | ReactNode | boolean;
     menuLevel: MenuStates;
-    minicartComponent?: ReactNode | boolean | undefined;
+    minicartComponent?: ComponentType | ReactNode | boolean;
     navZIndex: number;
-    nextJSLinkComponent: ReactNode | boolean;
+    nextJSLinkComponent: ComponentType | ReactNode | boolean;
     resetMenuEvents: () => void;
-    searchComponent?: ReactNode | boolean | undefined;
+    searchComponent?: ComponentType | ReactNode | boolean;
     setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;
     showLoginTooltip: boolean;
     showMinicart: boolean;

package/build/cjs/components/MainHeaderNavigation/globalNavStyles.d.ts

@@ -22,6 +22,9 @@ export declare const LogoLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -185,6 +188,9 @@ export declare const DesktopMenuContainer: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -350,6 +356,9 @@ export declare const MobileMenuButton: import("styled-components").StyledCompone
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -513,6 +522,9 @@ export declare const HeaderIconContainer: import("styled-components").StyledComp
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -678,6 +690,9 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -844,6 +859,9 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1009,6 +1027,9 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1174,6 +1195,9 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -1339,6 +1363,9 @@ export declare const FeaturedBlock: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -15,6 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const BusinessMenuLink = styled.default.a `
     color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
     display: block;
+    text-decoration: none;
     margin: ${p => !p.isMobileMenu
     ? `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}`
     : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)} `};

package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -24,6 +24,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -22,6 +22,9 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -22,6 +22,9 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -187,6 +190,9 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -352,6 +358,9 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -518,6 +527,9 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };

package/build/cjs/components/PixelLoader/PixelLoader.d.ts

@@ -14,6 +14,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a label for screen readers
+     */
+    label?: string;
 }
 /** @visibleName Pixel Loader */
 declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -41,6 +41,7 @@ const Pixel = styled.default.div `
 const PixelLoader = (_a) => {
     var { className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["className", 'data-testid']);
     return (React__default.default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        props.label && React__default.default.createElement("span", { className: "visually-hidden" }, props.label),
         React__default.default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
         React__default.default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
         React__default.default.createElement(Pixel, { color: props.color, delay: "-0.09" }),

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -44,6 +44,7 @@ const Element = styled.default.li `
     `}
 
     & > a {
+        text-decoration: none;
         &:focus-visible {
             border-radius: ${theme.default.radius.s};
             border: 2px solid ${theme.default.color.focus.light};

package/build/cjs/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -34,6 +34,14 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the ProgressIndicator,
+     */
+    ariaLabel?: string;
+    /**
+     * Screen reader label describing the completed step,
+     */
+    completedStepLabel?: string;
 }
 /** @visibleName Progress Indicator */
 declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -94,14 +94,19 @@ const ProgressIndicatorItemNumber = styled.default.div `
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
 const ProgressIndicatorItemLabel = styled.default.div `
-    display: none;
     font-size: ${({ small }) => (small ? theme.default.fontSize.xs : theme.default.fontSize.s)};
     line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.s)};
     font-weight: ${theme.default.fontWeight.bold};
     color: ${({ isActive }) => (isActive ? theme.default.color.text.black : theme.default.color.text.gray)};
 
     ${styledUtils.media.sm `
-        display: initial;
+        &.visually-hidden {
+            width: auto;
+            height: auto;
+            overflow: visible;
+            clip: auto;
+            opacity: 1;
+        }
     `}
 `;
 /** @visibleName Progress Indicator */
@@ -123,10 +128,12 @@ const ProgressIndicator = (_a) => {
         };
         return (React__default.default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
             index > 0 && (React__default.default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.default.createElement(Icon.default, { icon: isError ? icons.Warning : icons.Check, color: isError ? theme.default.color.text.white : theme.default.color.text.pink, size: "1rem" })) : (stepNumber)),
-            label && (React__default.default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+            React__default.default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.default.createElement(React__default.default.Fragment, null,
+                isCompleted && props.completedStepLabel && (React__default.default.createElement("span", { className: "visually-hidden" }, props.completedStepLabel)),
+                React__default.default.createElement(Icon.default, { icon: isError ? icons.Warning : icons.Check, color: isError ? theme.default.color.text.white : theme.default.color.text.pink, size: "1rem" }))) : (stepNumber)),
+            label && (React__default.default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
     });
-    return (React__default.default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
+    return (React__default.default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "list" }, progressIndicatorItems));
 };
 
 exports.default = ProgressIndicator;

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -96,6 +96,7 @@ const SecondaryNavigationListElement = styled.default.li `
     margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 
     a {
+        text-decoration: none;
         padding: 1rem 0;
         justify-content: start;
         color: ${({ isActive }) => (isActive ? theme.default.color.text.pink : theme.default.color.text.black)};

package/build/cjs/components/Selectbox/Selectbox.d.ts

@@ -1,5 +1,6 @@
+import type { ComponentType } from 'react';
 import React from 'react';
-import type { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
+import type { GroupBase, OptionProps, OptionsOrGroups, Props as ReactSelectProps } from 'react-select';
 interface SelectboxOption {
     label: string;
     value: string;
@@ -114,6 +115,22 @@ interface Props<Option extends SelectboxOption = SelectboxOption, IsMulti extend
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label describing the purpose of the SelectBox,
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the loading indicator
+     */
+    loadingLabel?: string;
+    /**
+     * Allows to pass custom styles
+     */
+    styles?: ReactSelectProps<Option, IsMulti, Group>['styles'];
+    /**
+     * Allows to pass custom option component
+     */
+    optionComponent?: ComponentType<OptionProps<Option, IsMulti, Group>>;
 }
 declare const SelectBox: <Option extends SelectboxOption = SelectboxOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ noOptionsText, "data-testid": dataTestId, ...props }: Props<Option, IsMulti, Group>) => React.JSX.Element;
 export default SelectBox;