@dnanpm/styleguide 3.9.13 → 3.9.14

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -300,7 +300,7 @@ const PriorityNavigation = (_a) => {
     ]);
     const handleNavigationListKeyDown = React.useCallback((e) => {
         var _a;
-        if (isMobile && isMobileNavigationOpen && e.key === 'Tab') {
+        if (isMobile && isMobileNavigationOpen) {
             const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
             const lastElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
             if (document.activeElement === lastElement) {
@@ -309,6 +309,21 @@ const PriorityNavigation = (_a) => {
             }
         }
     }, [isMobile, isMobileNavigationOpen]);
+    const handleNavigationListFocus = React.useCallback(() => {
+        if (isMobile && isMobileNavigationOpen) {
+            setTimeout(() => {
+                var _a, _b;
+                const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
+                if (!focusableElements || focusableElements.length === 0)
+                    return;
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (document.activeElement === lastElement) {
+                    setIsMobileNavigationOpen(false);
+                    (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            }, 0);
+        }
+    }, [isMobile, isMobileNavigationOpen]);
     const handleItemClick = (e) => {
         setIsMobileNavigationOpen(false);
         if (props.onClick) {
@@ -324,7 +339,7 @@ const PriorityNavigation = (_a) => {
                         props.categoryLabel && React__default.default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
                     React__default.default.createElement(Icon.default, { icon: isMobileNavigationOpen ? icons.OvalChevronUp : icons.OvalChevronDown, size: "2.5rem" }))),
-                React__default.default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+                React__default.default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown, onFocus: handleNavigationListFocus }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
                     if (React.isValidElement(navigationItem) &&
                         navigationItem.type === PriorityNavigationItem.default) {
                         return (React__default.default.createElement(PriorityNavigationItem.default, { id: navigationItem.props.id, key: navigationItem.key, onClick: handleItemClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], ref: instance => {

package/build/cjs/components/RadioButton/RadioButton.js

@@ -104,7 +104,7 @@ const RadioButtonGroup = ({ label, description, groupName, value, onChange, id,
     const descriptionId = `${baseId}-description`;
     const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');
     const content = children ||
-        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'] }))));
+        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'], "data-checked": value === option.value }))));
     const Wrapper = isFieldset ? StyledFieldset : 'div';
     const renderLabel = () => {
         if (!label)

package/build/cjs/components/Switch/Switch.js

@@ -115,7 +115,7 @@ const Switch = (_a) => {
     };
     const accessibleLabel = props.label ? undefined : ariaLabel || 'Toggle switch';
     return (React__namespace.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox", "data-checked": Boolean(props.isChecked) }),
         React__namespace.createElement(LabelWrapper, { htmlFor: props.id },
             React__namespace.createElement(Rail, { isChecked: props.isChecked },
                 React__namespace.createElement(Button, { isChecked: props.isChecked })),

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

@@ -30,6 +30,10 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * Screen reader label describing the purpose of the ButtonIcon,
      */
     ariaLabel?: string;
+    /**
+     * Show the element with link color (pink)
+     */
+    isLinkStyle?: boolean;
 }
 /** @visibleName Button Icon */
 declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -7,6 +7,47 @@ import { getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
+const getStandardStyle = ({ isLinkStyle }) => {
+    const colorValue = isLinkStyle ? theme.color.default.pink : theme.color.text.black;
+    const colorHoverValue = isLinkStyle ? theme.color.hover.pink : theme.color.text.black;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        }
+        &:hover {
+            color: ${colorHoverValue};
+        }
+        &:active {
+            color: ${theme.color.text.black + theme.color.transparency.T80};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${theme.color.text.gray};
+        }
+    `;
+};
+const getDarkBgStyle = () => {
+    const colorValue = theme.color.text.white;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.color.focus.dark};
+            box-shadow: 0px 0px 0px 2px ${theme.color.focus.light};
+        }
+        &:hover {
+            color: ${colorValue};
+        }   
+        &:active {
+            color: ${colorValue + theme.color.transparency.T90};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${colorValue + theme.color.transparency.T70};
+        }
+    `;
+};
 const ButtonElement = styled__default.button `
     display: inline-flex;
     align-items: center;
@@ -15,10 +56,11 @@ const ButtonElement = styled__default.button `
     font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.default)};
     line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.default)};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme.color.text.white : theme.color.text.black)};
     background-color: transparent;
     border: 2px solid transparent;
     padding: ${getDividedSize(theme.base.baseWidth, 5)} 0;
+    text-align: left;
+    transition: all 0.2s ease-in-out;
 
     & svg {
         pointer-events: none;
@@ -26,29 +68,23 @@ const ButtonElement = styled__default.button `
 
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
+    ${({ darkBg, isLinkStyle }) => (darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle }))}
+
     &:focus-visible {
         border-radius: ${theme.radius.s};
         text-decoration: underline;
-        border: 2px solid
-            ${({ darkBg }) => (darkBg ? theme.color.focus.dark : theme.color.focus.light)};
-        box-shadow: 0px 0px 0px 2px
-            ${({ darkBg }) => (darkBg ? theme.color.focus.light : theme.color.focus.dark)};
         outline: none;
     }
 
     &:hover {
         text-decoration: underline;
-    }
-
-    &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme.color.text.white + theme.color.transparency.T90
-    : theme.color.text.black + theme.color.transparency.T80};
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
     }
 
     &:disabled,
     &[disabled] {
-        color: ${({ darkBg }) => darkBg ? theme.color.text.white + theme.color.transparency.T70 : theme.color.text.gray};
         pointer-events: none;
     }
 
@@ -83,7 +119,7 @@ const ButtonElement = styled__default.button `
 const ButtonIcon = forwardRef((_a, ref) => {
     var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, 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, "aria-label": props.ariaLabel }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, 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, "aria-label": props.ariaLabel, isLinkStyle: props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
         props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 });

package/build/es/components/Checkbox/Checkbox.js

@@ -110,7 +110,7 @@ const Checkbox = (_a) => {
     };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Container, null,
-            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined }),
+            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined, "data-checked": Boolean(props.value) }),
             React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.createElement(Mandatory, null, "*"))),

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

@@ -39,8 +39,7 @@ const BusinessMenuLink = styled.a `
 const BusinessMenuList = styled.nav `
     display: flex;
     gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
-        ${getMultipliedSize(theme.base.baseWidth, 1)};
+    padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)} ${getMultipliedSize(theme.base.baseWidth, 1)};
     ${media.md `
         padding: ${getMultipliedSize(theme.base.baseHeight, 1)} ${getMultipliedSize(theme.base.baseWidth, 1.5)};
     `};
@@ -49,7 +48,7 @@ const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React__default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
+    return (React__default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
 };
 
 export { BusinessMenu as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/DesktopMenu.js

@@ -28,13 +28,12 @@ const noAnimation = css `
 const MegaMenuContent = styled.ul `
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
-    padding-left: 0;
 `;
-const CategoryTitle = styled.span `
+const CategoryTitle = styled.h2 `
     display: flex;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.bold};
+    margin: 0;
     padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)}
         ${getMultipliedSize(theme.base.baseWidth, 1)};
     ${media.xl `
@@ -121,21 +120,21 @@ const SubMenuLevel1 = ({ menuItem }) => {
     const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
     // Helper function to render a sub menu item
     const renderSubMenuItem = (element, index, currUrl) => (React__default.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
-        React__default.createElement(LinkModifier, { menuItem: element, tabIndex: false })));
+        React__default.createElement(LinkModifier, { menuItem: element, disabledTabIndex: false })));
     if (!level1HasElements) {
         return null;
     }
     return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
-        React__default.createElement(MegaMenuContent, null,
+        React__default.createElement(MegaMenuContent, { "aria-labelledby": `menu-id-${menuItem.id}` },
             pagesWithSubItems.slice(0, 5).map(element => (React__default.createElement(CategoryBlock, { key: element.id },
-                React__default.createElement(CategoryTitle, null, element.titles[lang]),
-                React__default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+                React__default.createElement(CategoryTitle, { id: `menu-id-${element.id}` }, element.titles[lang]),
+                React__default.createElement("ul", { "aria-labelledby": `menu-id-${element.id}`, "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
             pagesWithSubItems.length > 5 && (React__default.createElement(CategoryCollectionBlock, null,
-                React__default.createElement(CategoryTitle, null, categoryCollectionText),
-                React__default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+                React__default.createElement(CategoryTitle, { id: "misc-categories" }, categoryCollectionText),
+                React__default.createElement("ul", { "aria-labelledby": "misc-categories", "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
                     .slice(5)
                     .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
-            React__default.createElement(FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+            React__default.createElement(FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const { lang, handleNavMenuClick, currentUrl, menuLevel } = useContext(NavContext);
@@ -144,9 +143,9 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
-        React__default.createElement(MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", href: linkUrl },
-            React__default.createElement("span", null, menuItem.titles[lang]),
+    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.createElement(MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
+            React__default.createElement("span", { id: `menu-id-${menuItem.id}` }, menuItem.titles[lang]),
             React__default.createElement(ChevronRight, { size: "1rem" })),
         React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
@@ -166,10 +165,10 @@ const DesktopMenu = () => {
     return (React__default.createElement(MenuList, { "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
         const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!navElement.pages.length;
         if (displaySubMenu) {
-            return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React__default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
         }
-        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]) },
-            React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
+        return (React__default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
+            React__default.createElement(LinkModifier, { menuItem: navElement, disabledTabIndex: false })));
     })));
 };
 

package/build/es/components/MainHeaderNavigation/ChildComponents/LanguageSelector.js

@@ -4,7 +4,6 @@ import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
 import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
@@ -24,7 +23,7 @@ const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLa
         return null;
     }
     return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: Globe, size: navIconSize }),
+        React__default.createElement(Globe, { size: navIconSize }),
         React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { MenuLevelItem } from '../types/globalNavProps';
 interface LinkModifierProps {
     menuItem: MenuLevelItem;
-    tabIndex: boolean;
+    disabledTabIndex?: boolean;
     showIcon?: boolean;
 }
 export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
-declare const LinkModifier: ({ menuItem, tabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
+declare const LinkModifier: ({ menuItem, disabledTabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
 export default LinkModifier;

package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.js

@@ -1,7 +1,5 @@
 import { Open, ArrowRight } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import theme from '../../../themes/theme.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 
@@ -16,12 +14,12 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
     return false;
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
-    const menuItemLink = menuItem.urls[lang] || '';
+const LinkModifier = ({ menuItem, disabledTabIndex, showIcon }) => {
+    const { lang, currentUrl, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
+    const menuItemLink = menuItem.urls[lang];
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1.25rem", color: theme.color.default.pink })),
+    const MenuLinkComponent = (React__default.createElement(MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (isExternalLink ? React__default.createElement(Open, null) : React__default.createElement(ArrowRight, null)),
         React__default.createElement("span", null, menuItem.titles[lang])));
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;

package/build/es/components/MainHeaderNavigation/ChildComponents/LoginTooltip.js

@@ -1,14 +1,12 @@
 import { User } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Icon, { icon: User, size: navIconSize }),
+    const { navZIndex, isMobileMenu, loginComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(User, null),
         React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };
 

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -20,19 +20,19 @@ const IconContainer = styled.div `
     min-width: ${IconContainerMinWidth};
     transition: color 0.2s ease-in-out;
 
-    > span.dnasg-icon > svg {
+    > svg {
         display: block;
         height: ${navIconSize};
         width: ${navIconSize};
     }
-    > span.dnasg-icon > svg,
-    > span.dnasg-icon + span {
+    > svg,
+    + span {
         color: ${p => (p.isActive ? theme.color.text.pink : 'inherit')};
     }
 
     @media (min-width: ${p => p.collapseSize + 1}px) {
         min-width: ${getMultipliedSize(theme.base.baseWidth, 6)};
-        > span.dnasg-icon + span {
+        + span {
             display: block;
         }
     }
@@ -103,7 +103,7 @@ const MainNavTooltipMenu = (_a) => {
         }
     });
     return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
         tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
             React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -20,7 +20,7 @@ const TooltipWrapper = styled.button `
     border-left: ${p => (p.isLoggedIn ? `2px solid ${theme.color.line.L03}` : 'none')};
     &:active,
     &:focus {
-        span.dnasg-icon > svg,
+        > svg,
         > span {
             color: ${theme.color.text.pink};
         }
@@ -30,12 +30,12 @@ const TooltipWrapper = styled.button `
         border-radius: ${theme.radius.s};
         box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
-        span.dnasg-icon > svg,
+        > svg,
         > span {
             color: ${theme.color.text.black};
         }
     }
-    span.dnasg-icon > svg {
+    > svg {
         align-content: center;
         display: flex;
         margin: 0 auto;
@@ -44,7 +44,7 @@ const TooltipWrapper = styled.button `
             width: 1.625em;
         }
     }
-    span.dnasg-icon + span {
+    > span {
         display: none;
         @media (min-width: ${p => p.collapseSize + 1}px) {
             font-size: ${theme.fontSize.xs};

package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
 interface MinicartTooltipProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
     minicartAmount: number;
-    minicartLabel?: string;
+    minicartLabel: string;
+    minicartAmountLabel: string;
 }
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel, ...props }: MinicartTooltipProps) => React.JSX.Element;
+declare const MinicartTooltip: ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }: MinicartTooltipProps) => React.JSX.Element;
 export default MinicartTooltip;

package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js

@@ -1,20 +1,16 @@
-import { __rest } from 'tslib';
 import { Cart } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
 import theme from '../../../themes/theme.js';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
-import Icon from '../../Icon/Icon.js';
 import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MinicartTooltip = (_a) => {
-    var { minicartAmount, minicartLabel } = _a, props = __rest(_a, ["minicartAmount", "minicartLabel"]);
-    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: props.onCartButtonClick, contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: Cart, size: navIconSize }),
-        React__default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
+    const { navZIndex, minicartComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentComponent: minicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
+        React__default.createElement(Cart, null),
+        React__default.createElement("span", { "aria-hidden": true }, minicartLabel),
+        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 };
 
 export { MinicartTooltip as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/MobileMenu.js

@@ -124,7 +124,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
             menuItem.titles[lang],
             React__default.createElement(ChevronRight, { color: theme.color.default.pink })));
     }
-    return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
+    return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, disabledTabIndex: tabNavigationDisabled }));
 };
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
@@ -136,7 +136,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
     }
     return (React__default.createElement(React__default.Fragment, null,
         currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, tabIndex: tabNavigationDisabled }))))),
+        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled }))))),
         menuItem.pages
             .filter(subMenuItem => !featuredItems.includes(subMenuItem))
             .map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
@@ -147,7 +147,7 @@ const NavigationMenuMobile = () => {
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return null;
     }
-    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
         React__default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
     return (React__default.createElement(React__default.Fragment, null,
         renderMenuList(0, 1, mainNavigation),

package/build/es/components/MainHeaderNavigation/ChildComponents/PageSearch.js

@@ -1,14 +1,12 @@
 import { Search } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent: SearchComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: Search, size: navIconSize }),
+    const { navZIndex, searchComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+        React__default.createElement(Search, null),
         React__default.createElement("span", null, searchLabel)));
 };
 

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

@@ -16,6 +16,7 @@ export interface MainHeaderNavigationProps {
     minicart?: boolean;
     minicartText?: string;
     minicartAmount?: number;
+    minicartAmountLabel?: string;
     /**
      * Defines MinicartComponent when used. If minicart is true but component is not provided, shown as disabled element.
      *
@@ -27,6 +28,9 @@ export interface MainHeaderNavigationProps {
      * On Cart button click callback
      */
     onCartButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    dnaLogoLinkAriaLabel?: string;
+    openMainMenuAriaLabel?: string;
+    closeMainMenuAriaLabel?: string;
     showLoginTooltip?: boolean;
     languageSelector?: boolean;
     languageSelectorText?: string;
@@ -40,6 +44,6 @@ export interface MainHeaderNavigationProps {
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainHeaderNavigation;

package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js

@@ -6,10 +6,9 @@ import useScrollPosition from '../../hooks/useScrollPosition.js';
 import useWindowSize from '../../hooks/useWindowSize.js';
 import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { navMaxHeight, headerLogoSize, navIconSize } from '../../themes/themeComponents/navigation.js';
+import { navMaxHeight, headerLogoSize } from '../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import DnaLogo from '../DnaLogo/DnaLogo.js';
-import Icon from '../Icon/Icon.js';
 import Notification from '../Notification/Notification.js';
 import BusinessMenu from './ChildComponents/BusinessMenu.js';
 import DesktopMenu from './ChildComponents/DesktopMenu.js';
@@ -127,7 +126,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "className", "collapseSize", "currentUrl", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
     const { isMobile } = useWindowSize(collapseSize);
     const navigationEl = useRef(null);
     const key = prop('id');
@@ -293,24 +292,25 @@ const MainHeaderNavigation = (_a) => {
     };
     return (React__default.createElement(React__default.Fragment, null,
         isPageOverlay && React__default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React__default.createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl, role: "banner" },
+        React__default.createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl },
             React__default.createElement(NavContext.Provider, { value: navigationContext },
                 React__default.createElement(GlobalStyle, null),
                 !items.mainNavigation && notificationText && (React__default.createElement(Notification, { type: "info" }, notificationText)),
                 React__default.createElement(BusinessMenu, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
                 React__default.createElement(NavigationWrapper, { collapseSize: collapseSize },
-                    React__default.createElement(LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
+                    React__default.createElement(LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], "aria-label": dnaLogoLinkAriaLabel },
                         React__default.createElement(DnaLogo, { size: headerLogoSize })),
                     React__default.createElement(DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
                         React__default.createElement(DesktopMenu, null)),
                     React__default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
                         languagesObject && languageSelector && (React__default.createElement(LanguageSelector, { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
                         search && React__default.createElement(PageSearch, { searchLabel: searchText }),
-                        minicart && (React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
+                        minicart && (React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartAmountLabel: minicartAmountLabel !== null && minicartAmountLabel !== void 0 ? minicartAmountLabel : '', minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
                         login && React__default.createElement(LoginTooltip, { loginLabel: loginText, isLogged: isLoggedIn }),
                         React__default.createElement(IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
-                            React__default.createElement(MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
-                                React__default.createElement(Icon, { icon: isMobileMenuOpen ? Close : Menu, size: navIconSize })))),
+                            React__default.createElement(MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": isMobileMenuOpen
+                                    ? closeMainMenuAriaLabel
+                                    : openMainMenuAriaLabel, "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick }, isMobileMenuOpen ? React__default.createElement(Close, null) : React__default.createElement(Menu, null)))),
                     isMobile && React__default.createElement(RenderMobileMenu, null))))));
 };