@dnanpm/styleguide 3.11.0 → 3.11.1

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

@@ -107,6 +107,22 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Descriptive label for screen readers for the input element.
+     */
+    ariaLabelInput?: string;
+    /**
+     * Accessible label for "Previous month" button
+     */
+    ariaLabelPreviousMonth?: string;
+    /**
+     * Accessible label for "Next month" button
+     */
+    ariaLabelNextMonth?: string;
+    /**
+     * Accessible text for announcing date changes (e.g., for screen readers)
+     */
+    ariaLiveAnnouncement?: string;
 }
 /** @visibleName DateTime Picker */
 declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -246,16 +246,20 @@ const StyledInput = styledComponents.styled(Input.default) `
         }
     `}
 `;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.default.createElement(MonthSelector, null,
-    React__default.default.createElement(ButtonIcon.default, { icon: icons.ChevronLeft, onClick: decreaseMonth }),
+const VisuallyHiddenStatus = styledComponents.styled.div `
+    position: absolute;
+    left: -9999px;
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, ariaLabelPreviousMonth, ariaLabelNextMonth, }) => (React__default.default.createElement(MonthSelector, null,
+    React__default.default.createElement(ButtonIcon.default, { icon: icons.ChevronLeft, onClick: decreaseMonth, ariaLabel: ariaLabelPreviousMonth }),
     React__default.default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
         month: 'long',
         year: 'numeric',
     }))),
-    React__default.default.createElement(ButtonIcon.default, { icon: icons.ChevronRight, onClick: increaseMonth })));
+    React__default.default.createElement(ButtonIcon.default, { icon: icons.ChevronRight, onClick: increaseMonth, ariaLabel: ariaLabelNextMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
-    var _b;
+    var _b, _c;
     var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
     const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
     const handleOnInputFocus = () => {
@@ -267,17 +271,42 @@ const DateTimePicker = (_a) => {
         }
     };
     const handleOnKeyDown = (e) => {
-        if (!props.isEditable &&
-            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
+        const isNavigationKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key);
+        if (isNavigationKey && showReactDatePicker) {
+            return;
+        }
+        if (e.key === 'Escape') {
+            setShowReactDatePicker(false);
+        }
+        if (e.key === 'Enter' && showReactDatePicker) {
+            setShowReactDatePicker(false);
+        }
+        if (!props.isEditable && ['Backspace', 'Delete', 'Clear'].includes(e.key)) {
             props.onChange(null, e);
         }
     };
     const handleClearable = (e) => {
         props.onChange(null, e);
     };
-    const handleOnReactDatePickerChange = (date, e) => {
-        setShowReactDatePicker(false);
-        props.onChange(date, e);
+    const handleOnReactDatePickerChange = (date, event) => {
+        var _a, _b;
+        const isSelectingRange = props.endDate !== undefined;
+        let shouldKeepOpen = false;
+        if (isSelectingRange) {
+            const [start, end] = Array.isArray(date) && date.length === 2 ? date : [null, null];
+            shouldKeepOpen = !(start && end);
+        }
+        else if (isDatePicker &&
+            isTimePicker &&
+            date instanceof Date &&
+            ((_a = date.getHours) === null || _a === void 0 ? void 0 : _a.call(date)) === 0 &&
+            ((_b = date.getMinutes) === null || _b === void 0 ? void 0 : _b.call(date)) === 0) {
+            shouldKeepOpen = true;
+        }
+        if (!shouldKeepOpen) {
+            setShowReactDatePicker(false);
+        }
+        props.onChange(date, event);
     };
     const handleOnReactDatePickerClickOutside = () => {
         setShowReactDatePicker(false);
@@ -291,10 +320,21 @@ const DateTimePicker = (_a) => {
         timeStyle: 'short',
     }))))
         .join(' - ');
-    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
+    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale, ariaLabelPreviousMonth: props.ariaLabelPreviousMonth, ariaLabelNextMonth: props.ariaLabelNextMonth }));
     return (React__default.default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(StyledInput, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default.default.createElement(ReactDatePicker__default.default, { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+        React__default.default.createElement(StyledInput, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
+                if (props.isEditable && e.target.value) {
+                    const parsedDate = new Date(e.target.value);
+                    const time = parsedDate.getTime();
+                    if (!Number.isNaN(time)) {
+                        props.onChange(parsedDate, e);
+                    }
+                }
+            } }),
+        React__default.default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())
+            ? (_b = props.ariaLiveAnnouncement) === null || _b === void 0 ? void 0 : _b.replace('{{date}}', startDate.toLocaleDateString(locale))
+            : ''),
+        showReactDatePicker && (React__default.default.createElement(ReactDatePicker__default.default, { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
             // Used to format the date/time in internal ReactDatePicker input
             // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
             dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));

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

@@ -314,30 +314,16 @@ const SocialMediaLinks = ({ socialMedia }) => {
             return (React__default.default.createElement("a", { href: url, key: `social-media-link-${socialMediaKey}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : socialMediaName }, SocialIcon && React__default.default.createElement(SocialIcon, null)));
         })));
 };
-const isNewApplicationLinks = (links) => 'appStore' in links && typeof links.appStore === 'object';
 const ApplicationLinks = ({ applicationLinks, language, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (isNewApplicationLinks(applicationLinks)) {
-        const { appStore, googlePlay, title } = applicationLinks;
-        return (React__default.default.createElement(AppSection, null,
-            React__default.default.createElement("p", null, title[language]),
-            React__default.default.createElement(AppList, null,
-                ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (React__default.default.createElement("a", { "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language], href: appStore.urls[language], target: "_blank", rel: "noopener noreferrer" },
-                    React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language] }))),
-                ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (React__default.default.createElement("a", { "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language], href: googlePlay.urls[language], target: "_blank", rel: "noopener noreferrer" },
-                    React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language] }))))));
-    }
+    var _a, _b, _c, _d, _e, _f;
+    const { appStore, googlePlay, title } = applicationLinks;
     return (React__default.default.createElement(AppSection, null,
-        React__default.default.createElement("p", null, applicationLinks.title[language]),
+        React__default.default.createElement("p", null, title[language]),
         React__default.default.createElement(AppList, null,
-            ((_g = applicationLinks.appStoreURL) === null || _g === void 0 ? void 0 : _g[language]) && (React__default.default.createElement("a", { "aria-label": language === 'fi'
-                    ? 'Lataa sovellus App Storesta'
-                    : 'Download from App Store', href: applicationLinks.appStoreURL[language], target: "_blank", rel: "noopener noreferrer" },
-                React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: "" }))),
-            ((_h = applicationLinks.googlePlayURL) === null || _h === void 0 ? void 0 : _h[language]) && (React__default.default.createElement("a", { "aria-label": language === 'fi'
-                    ? 'Lataa sovellus Google Playstä'
-                    : 'Download from Google Play', href: applicationLinks.googlePlayURL[language], target: "_blank", rel: "noopener noreferrer" },
-                React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: "" }))))));
+            ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (React__default.default.createElement("a", { "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language], href: appStore.urls[language], target: "_blank", rel: "noopener noreferrer" },
+                React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language] }))),
+            ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (React__default.default.createElement("a", { "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language], href: googlePlay.urls[language], target: "_blank", rel: "noopener noreferrer" },
+                React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language] }))))));
 };
 const BottomSection = ({ items }) => {
     const { applicationLinks, businessSelector, customLinks, generalInformation, languageSelector, socialMedia, } = items.footerNavigation;

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

@@ -148,6 +148,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 /** @component */
 export default Input;

package/build/cjs/components/Input/Input.js

@@ -129,16 +129,10 @@ const ErrorMessage = styledComponents.styled(Message) `
     font-weight: ${theme.default.fontWeight.medium};
     color: ${theme.default.color.notification.error};
 `;
-const Input = (_a) => {
+const Input = React.forwardRef((_a, ref) => {
     var _b;
     var { type = 'text', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const inputRef = React.useRef(null);
     const [showPassword, setShowPassword] = React.useState(false);
-    React.useEffect(() => {
-        if (props.showPasswordToggle && inputRef && inputRef.current) {
-            inputRef.current.type = showPassword ? 'text' : 'password';
-        }
-    }, [showPassword, props.showPasswordToggle]);
     const togglePasswordVisibility = () => {
         if (props.showPasswordToggle && !props.disabled) {
             setShowPassword(!showPassword);
@@ -156,9 +150,7 @@ const Input = (_a) => {
     };
     const onClick = (e) => {
         e.preventDefault();
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
+        e.currentTarget.focus();
     };
     const getDescribedBy = () => {
         if (props.status === 'error' && props.errorMessage) {
@@ -169,10 +161,17 @@ const Input = (_a) => {
         }
         return undefined;
     };
-    return (React__default.default.createElement(FieldContainer, { className: props.className },
+    const getInputType = () => {
+        if (props.showPasswordToggle) {
+            return showPassword ? 'text' : 'password';
+        }
+        return type;
+    };
+    const inputType = getInputType();
+    return (React__default.default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId && `${dataTestId}-container` },
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.default.createElement(FieldWrapper, { "$status": props.status, "$type": type, "$disabled": props.disabled, "$readonly": props.readonly },
-            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || undefined, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
+        React__default.default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly },
+            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || undefined, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
@@ -187,6 +186,6 @@ const Input = (_a) => {
                     !props.readonly && (React__default.default.createElement(ButtonIcon.default, { icon: icons.Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
         props.status === 'error' && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
         props.status === 'comment' && props.commentMessage && (React__default.default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
-};
+});
 
 exports.default = Input;

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

@@ -73,8 +73,8 @@ const CategoryCollectionBlock = styledComponents.styled(CategoryBlock) `
 `;
 const SubMenuItem = styledComponents.styled.li `
     > a {
-        color: ${p => (p.isHighlighted ? theme.default.color.text.pink : theme.default.color.text.black)};
-        font-weight: ${p => (p.isHighlighted ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
+        color: ${p => (p.$isHighlighted ? theme.default.color.text.pink : theme.default.color.text.black)};
+        font-weight: ${p => (p.$isHighlighted ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
     }
 `;
 const DesktopMenuItem = styledComponents.styled(globalNavStyles.MenuItem) `
@@ -97,7 +97,7 @@ const DesktopMenuItem = styledComponents.styled(globalNavStyles.MenuItem) `
                 bottom: -22px;
                 left: 0;
                 border-bottom: 2px solid
-                    ${p => (p.isActive ? theme.default.color.default.pink : 'transparent')};
+                    ${p => (p.$isActive ? theme.default.color.default.pink : 'transparent')};
             }
         }
     }
@@ -108,9 +108,9 @@ const SubMenuList = styledComponents.styled.div `
     top: ${navigation.navMaxHeight};
     left: 0;
     right: 0;
-    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
-    z-index: ${({ navZIndex }) => navZIndex + 1};
-    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
+    z-index: ${({ $navZIndex }) => $navZIndex + 1};
+    ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
     ? fadeInAnimation
     : noAnimation};
     background-color: ${theme.default.color.background.white.default};
@@ -123,16 +123,16 @@ const SubMenuList = styledComponents.styled.div `
     }
 `;
 const SubMenuLevel1 = ({ menuItem }) => {
-    const { categoryCollectionText, collapseSize, currentUrl, lang, menuLevel, navZIndex } = React.useContext(NavContext.default);
+    const { categoryCollectionText, collapseSize, currentUrl, featuredItemsAriaLabel, lang, menuLevel, navZIndex, } = React.useContext(NavContext.default);
     const level1HasElements = !!menuItem.pages.length;
     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.default.createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
+    const renderSubMenuItem = (element, index, currUrl) => (React__default.default.createElement(SubMenuItem, { key: element.id, "$isHighlighted": LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
         React__default.default.createElement(LinkModifier.default, { menuItem: element, disabledTabIndex: false })));
     if (!level1HasElements) {
         return null;
     }
-    return (React__default.default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
+    return (React__default.default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex },
         React__default.default.createElement(MegaMenuContent, { "aria-labelledby": `menu-id-${menuItem.id}` },
             pagesWithSubItems.slice(0, 5).map(element => (React__default.default.createElement(CategoryBlock, { key: element.id },
                 React__default.default.createElement(CategoryTitle, { id: `menu-id-${element.id}` }, element.titles[lang]),
@@ -142,7 +142,7 @@ const SubMenuLevel1 = ({ menuItem }) => {
                 React__default.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.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.default.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))));
+            React__default.default.createElement(globalNavStyles.FeaturedBlock, { "$collapseSize": collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.some(element => !element.pages.length) && (React__default.default.createElement("section", { "aria-label": featuredItemsAriaLabel }, menuItem.pages.map(element => element.pages.length ? null : (React__default.default.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const { lang, handleNavMenuClick, currentUrl, menuLevel } = React.useContext(NavContext.default);
@@ -151,8 +151,8 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
-        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": LinkModifier.isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
+    return (React__default.default.createElement(DesktopMenuItem, { "$isActive": LinkModifier.isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { "$isOpen": menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": LinkModifier.isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
             React__default.default.createElement("span", { id: `menu-id-${menuItem.id}` }, menuItem.titles[lang]),
             React__default.default.createElement(icons.ChevronRight, { size: "1rem" })),
         React__default.default.createElement(SubMenuLevel1, { menuItem: menuItem })));
@@ -175,7 +175,7 @@ const DesktopMenu = () => {
         if (displaySubMenu) {
             return (React__default.default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
         }
-        return (React__default.default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
+        return (React__default.default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, "$isActive": LinkModifier.isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
             React__default.default.createElement(LinkModifier.default, { menuItem: navElement, disabledTabIndex: false })));
     })));
 };

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

@@ -24,8 +24,8 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     fullWidthBreakpoint?: number;
 }
 export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    isActive?: boolean;
-    collapseSize: number;
+    $isActive?: boolean;
+    $collapseSize: number;
 }>> & string;
 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/MainNavTooltipMenu.js

@@ -35,10 +35,10 @@ const IconContainer = styledComponents.styled.div `
     }
     > svg,
     + span {
-        color: ${p => (p.isActive ? theme.default.color.text.pink : 'inherit')};
+        color: ${p => (p.$isActive ? theme.default.color.text.pink : 'inherit')};
     }
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         min-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 6)};
         + span {
             display: block;
@@ -53,13 +53,13 @@ const Tooltip = styledComponents.styled.div `
     position: absolute;
     right: 0;
     top: ${navigation.navMaxHeight};
-    z-index: ${p => p.zIndex};
+    z-index: ${p => p.$zIndex};
     display: flex;
     flex-direction: row;
 
-    @media (min-width: ${p => p.fullWidthBreakpoint}px) {
-        width: ${p => p.contentWidth};
-        right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
+    @media (min-width: ${p => p.$fullWidthBreakpoint}px) {
+        width: ${p => p.$contentWidth};
+        right: ${p => (p.$fullWidthDesktop ? 0 : p.$tooltipRight)};
     }
 `;
 const TooltipBox = styledComponents.styled(Box.default) `
@@ -70,7 +70,7 @@ const TooltipBox = styledComponents.styled(Box.default) `
 `;
 const Caret = styledComponents.styled.div `
     position: absolute;
-    z-index: ${p => p.zIndex + 1};
+    z-index: ${p => p.$zIndex + 1};
     top: ${navigation.navMaxHeight};
     transform: translate3d(50%, -50%, 0) rotate(-45deg);
     width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
@@ -80,7 +80,7 @@ const Caret = styledComponents.styled.div `
     border-width: 1px 1px 0 0;
     margin-left: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         max-height: calc(var(--vh100, 100vh) - ${navigation.navMaxHeight});
     }
 `;
@@ -110,11 +110,11 @@ const MainNavTooltipMenu = (_a) => {
             setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
         }
     });
-    return (React__default.default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
+    return (React__default.default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "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.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-            React__default.default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+            React__default.default.createElement(Caret, { "$zIndex": zIndex, "$collapseSize": collapseSize }),
+            React__default.default.createElement(Tooltip, { "$zIndex": zIndex, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
                 React__default.default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
                     React__default.default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
 };

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

@@ -1,7 +1,7 @@
 declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    collapseSize: number;
-    isHighlighted?: boolean;
-    isLoggedIn?: boolean;
+    $collapseSize: number;
+    $isHighlighted?: boolean;
+    $isLoggedIn?: boolean;
 }>> & string;
 export default TooltipWrapper;
 export { TooltipWrapper };

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

@@ -13,15 +13,15 @@ const TooltipWrapper = styledComponents.styled.button `
     padding: 0;
     overflow: visible;
     background: transparent;
-    color: ${p => (p.isHighlighted ? theme.default.color.text.pink : 'inherit')};
+    color: ${p => (p.$isHighlighted ? theme.default.color.text.pink : 'inherit')};
     font: inherit;
     line-height: normal;
     -webkit-font-smoothing: inherit;
     -moz-osx-font-smoothing: inherit;
     -webkit-appearance: none;
     cursor: pointer;
-    width: ${p => (p.isLoggedIn ? '6.25rem' : '100%')};
-    border-left: ${p => (p.isLoggedIn ? `2px solid ${theme.default.color.line.L03}` : 'none')};
+    width: ${p => (p.$isLoggedIn ? '6.25rem' : '100%')};
+    border-left: ${p => (p.$isLoggedIn ? `2px solid ${theme.default.color.line.L03}` : 'none')};
     &:active,
     &:focus {
         > svg,
@@ -43,14 +43,14 @@ const TooltipWrapper = styledComponents.styled.button `
         align-content: center;
         display: flex;
         margin: 0 auto;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
+        @media (min-width: ${p => p.$collapseSize + 1}px) {
             height: 1.625em;
             width: 1.625em;
         }
     }
     > span {
         display: none;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
+        @media (min-width: ${p => p.$collapseSize + 1}px) {
             font-size: ${theme.default.fontSize.xs};
             font-weight: ${theme.default.fontWeight.medium};
             width: 100%;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+import type { MobileMenuBackLink } from '../types/globalNavProps';
+export declare const MenuItemBackLink: ({ currentLevel, backRef, }: MobileMenuBackLink & {
+    backRef?: React.RefObject<HTMLButtonElement>;
+}) => React.JSX.Element;
 declare const RenderMobileMenu: () => React.JSX.Element | null;
 export default RenderMobileMenu;

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

@@ -9,7 +9,6 @@ var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var MobileMenuContext = require('../context/MobileMenuContext.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var LinkModifier = require('./LinkModifier.js');
@@ -28,7 +27,7 @@ const MobileMenuWrapper = styledComponents.styled(reactSpring.animated.div) `
 `;
 const mobileMenu = `calc(100vh - ${navigation.headerMaxHeight})`;
 const MenuLinkBackLink = styledComponents.styled(globalNavStyles.MenuLink) ``;
-const MobileMenuContainer = styledComponents.styled.div `
+const MobileMenuContainer = styledComponents.styled.nav `
     width: 100%;
     position: absolute;
     top: ${navigation.navMaxHeight};
@@ -83,7 +82,7 @@ const MobileMenuContainer = styledComponents.styled.div `
     }
     ${globalNavStyles.FeaturedBlock} {
         border-bottom: 1px solid ${theme.default.color.line.L04};
-        > a {
+        section > a {
             font-size: ${theme.default.fontSize.s};
             line-height: ${theme.default.lineHeight.s};
             padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
@@ -91,31 +90,25 @@ const MobileMenuContainer = styledComponents.styled.div `
         }
     }
 `;
-const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext.default);
-    const levels = {
-        level1Items,
-        level2Items,
-    };
-    const menuElementLevel = `level${currentLevel - 1}Items`;
-    const menuElements = levels[menuElementLevel];
+const MenuItemBackLink = ({ currentLevel, backRef, }) => {
+    const { backToPreviousCategoryLabel, handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext.default);
+    const menuElements = currentLevel === 2 ? level1Items : level2Items;
+    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
+    const backLink = getBackLink(menuElements, currentLevel - 1);
     const mobileMenuBackClick = () => {
         handleNavMenuClick(null, `level${currentLevel - 1}Mobile`);
     };
-    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
-    const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React__default.default.createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default.default.createElement(MenuLinkBackLink, { as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+    return (React__default.default.createElement(globalNavStyles.MenuItem, { "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
+        React__default.default.createElement(MenuLinkBackLink, { as: "button", ref: backRef, onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined, "aria-label": `${backToPreviousCategoryLabel} ${backLink.titles[lang]}` },
             React__default.default.createElement(icons.ChevronLeft, { size: "1.5rem" }),
             backLink.titles[lang])));
 };
-const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
+const SubMenuItem = ({ menuItem, currentLevel, itemIndex, mobileMenuRef, firstItemRef, }) => {
     const { handleNavMenuClick, menuLevel, lang, currentUrl } = React.useContext(NavContext.default);
-    const { mobileMenuRef } = React.useContext(MobileMenuContext.default);
-    const hasChildren = menuItem.pages.length;
+    const hasChildren = !!menuItem.pages.length;
     const indexLevel = currentLevel - 1;
     const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
-    const menuUrl = menuItem.urls[lang] || '';
+    const menuUrl = menuItem.urls[lang];
     const mobileMenuClick = (element) => (e) => {
         var _a, _b;
         (_b = (_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === null || _b === void 0 ? void 0 : _b.call(_a, {
@@ -126,37 +119,50 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
-    const renderMenuItem = (children) => (React__default.default.createElement(globalNavStyles.MenuItem, { key: menuItem.id, "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) }, children));
+    const renderMenuItem = (children) => (React__default.default.createElement(globalNavStyles.MenuItem, { key: menuItem.id, "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, "$isActive": LinkModifier.isSelected(currentUrl, menuUrl, true) }, children));
     if (hasChildren && currentLevel < 3) {
-        return renderMenuItem(React__default.default.createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), tabIndex: tabNavigationDisabled ? -1 : undefined },
+        return renderMenuItem(React__default.default.createElement(globalNavStyles.MenuLink, { as: "button", ref: firstItemRef, onClick: mobileMenuClick(menuItem), tabIndex: tabNavigationDisabled ? -1 : undefined },
             menuItem.titles[lang],
             React__default.default.createElement(icons.ChevronRight, { color: theme.default.color.default.pink })));
     }
     return renderMenuItem(React__default.default.createElement(LinkModifier.default, { menuItem: menuItem, disabledTabIndex: tabNavigationDisabled }));
 };
-const SubMenuMobile = ({ currentLevel, menuItem }) => {
-    const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
+const SubMenuMobile = ({ currentLevel, menuItem, mobileMenuRef }) => {
+    const { collapseSize, featuredItemsAriaLabel, menuLevel } = React.useContext(NavContext.default);
     const indexLevel = currentLevel - 1;
-    const { collapseSize, menuLevel: { scrollPosition }, } = React.useContext(NavContext.default);
-    const tabNavigationDisabled = scrollPosition !== indexLevel;
-    if (!menuItem.pages.length) {
+    const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
+    const backRef = React.useRef(null);
+    const firstItemRef = React.useRef(null);
+    React.useEffect(() => {
+        // Delay focus to allow animation to finish
+        const timer = setTimeout(() => {
+            if (currentLevel === 1 && firstItemRef.current) {
+                firstItemRef.current.focus();
+            }
+            if (currentLevel > 1 && backRef.current) {
+                backRef.current.focus();
+            }
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [menuItem, currentLevel]);
+    if (!(menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages.length)) {
         return null;
     }
+    const featuredItems = currentLevel === 2 ? menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length) : [];
+    const menuItems = menuItem.pages.filter(subMenuItem => !featuredItems.includes(subMenuItem));
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        currentLevel > 1 && React__default.default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        featuredItems.length > 0 && (React__default.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.default.createElement(LinkModifier.default, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled }))))),
-        menuItem.pages
-            .filter(subMenuItem => !featuredItems.includes(subMenuItem))
-            .map((subMenuItem, index) => (React__default.default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
+        currentLevel > 1 && React__default.default.createElement(MenuItemBackLink, { backRef: backRef, currentLevel: currentLevel }),
+        featuredItems.length > 0 && (React__default.default.createElement(globalNavStyles.FeaturedBlock, { "$collapseSize": collapseSize },
+            React__default.default.createElement("section", { "aria-label": featuredItemsAriaLabel }, featuredItems.map(subMenuItem => (React__default.default.createElement(LinkModifier.default, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled })))))),
+        menuItems.map((subMenuItem, index) => (React__default.default.createElement(SubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem, mobileMenuRef: mobileMenuRef, firstItemRef: index === 0 ? firstItemRef : undefined })))));
 };
-const NavigationMenuMobile = () => {
+const NavigationMenuMobile = ({ mobileMenuRef }) => {
     const { items, menuLevel, level1Items, level2Items } = React.useContext(NavContext.default);
     const { mainNavigation } = items;
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return null;
     }
-    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.default.createElement(globalNavStyles.MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
-        React__default.default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.default.createElement(globalNavStyles.MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, "$isInView": menuLevel.scrollPosition === scrollPosition }, menuLevel.scrollPosition === scrollPosition && (React__default.default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem, mobileMenuRef: mobileMenuRef }))));
     return (React__default.default.createElement(React__default.default.Fragment, null,
         renderMenuList(0, 1, mainNavigation),
         menuLevel.level1Mobile !== null &&
@@ -170,16 +176,13 @@ const RenderMobileMenu = () => {
     const slidingMenuAnimation = reactSpring.useSpring({
         transform: `translateX(${(menuLevel.scrollPosition / navigation.menuLevelsAmount) * -100}%)`,
     });
-    const mobileMenuContext = React.useMemo(() => ({
-        mobileMenuRef,
-    }), [mobileMenuRef]);
     if (!isMobileMenuOpen) {
         return null;
     }
-    return (React__default.default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React__default.default.createElement(MobileMenuContext.default.Provider, { value: mobileMenuContext },
-            React__default.default.createElement(MobileMenuWrapper, { style: slidingMenuAnimation },
-                React__default.default.createElement(NavigationMenuMobile, null)))));
+    return (React__default.default.createElement(MobileMenuContainer, { ref: mobileMenuRef, role: "dialog", "aria-modal": "true" },
+        React__default.default.createElement(MobileMenuWrapper, { style: slidingMenuAnimation },
+            React__default.default.createElement(NavigationMenuMobile, { mobileMenuRef: mobileMenuRef }))));
 };
 
+exports.MenuItemBackLink = MenuItemBackLink;
 exports.default = RenderMobileMenu;