@doyourjob/gravity-ui-page-constructor-addons 2.1.46 → 2.1.48

package/build/cjs/components/NewHeader/components/NHNavigationPopup/NHNavigationPopup.js

@@ -2,17 +2,69 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NHNavigationPopup = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const FocusTrap_1 = require("../../../../utils/FocusTrap");
 const cn_1 = require("../../../../utils/cn");
+const keyboardNavigation_1 = require("./keyboardNavigation");
 const b = (0, cn_1.block)('nh-navigation-popup');
+const nextKeys = new Set(['ArrowDown', 'ArrowRight']);
+const previousKeys = new Set(['ArrowUp', 'ArrowLeft']);
+const getNextIndex = (currentIndex, offset, elementsCount) => {
+    if (currentIndex === -1) {
+        return offset > 0 ? 0 : elementsCount - 1;
+    }
+    return (currentIndex + offset + elementsCount) % elementsCount;
+};
 const NHNavigationPopup = ({ headerRef, children, id }) => {
+    const popupRef = (0, react_1.useRef)(null);
+    const focusRelativeElement = (0, react_1.useCallback)((offset) => {
+        const popup = popupRef.current;
+        const focusableElements = (0, keyboardNavigation_1.getFocusableElements)(popup);
+        if (!popup || !focusableElements.length) {
+            return;
+        }
+        const activeElement = popup.ownerDocument.activeElement;
+        const currentIndex = activeElement ? focusableElements.indexOf(activeElement) : -1;
+        const nextIndex = getNextIndex(currentIndex, offset, focusableElements.length);
+        (0, keyboardNavigation_1.focusFromKeyboard)(focusableElements[nextIndex], popup);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const popup = popupRef.current;
+        if (!popup) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                focusRelativeElement(event.shiftKey ? -1 : 1);
+            }
+            else if (nextKeys.has(event.key)) {
+                event.preventDefault();
+                focusRelativeElement(1);
+            }
+            else if (previousKeys.has(event.key)) {
+                event.preventDefault();
+                focusRelativeElement(-1);
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                const popupElement = popupRef.current;
+                (0, keyboardNavigation_1.focusFromKeyboard)((0, keyboardNavigation_1.getFocusableElements)(popupElement)[0], popupElement);
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                const popupElement = popupRef.current;
+                const focusableElements = (0, keyboardNavigation_1.getFocusableElements)(popupElement);
+                (0, keyboardNavigation_1.focusFromKeyboard)(focusableElements[focusableElements.length - 1], popupElement);
+            }
+        };
+        popup.addEventListener('keydown', handleKeyDown);
+        return () => {
+            popup.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [focusRelativeElement]);
     return (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)
-        ? react_dom_1.default.createPortal(react_1.default.createElement(FocusTrap_1.FocusTrap, { enabled: true },
-            react_1.default.createElement("div", { 
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, className: b(), id: id }, children)), headerRef.current)
+        ? react_dom_1.default.createPortal(react_1.default.createElement("div", { className: b(), id: id, ref: popupRef }, children), headerRef.current)
         : null;
 };
 exports.NHNavigationPopup = NHNavigationPopup;

package/build/cjs/components/NewHeader/components/NHNavigationPopup/keyboardNavigation.d.ts

@@ -0,0 +1,4 @@
+export declare const keyboardFocusAttribute = "data-keyboard-focus";
+export declare const focusableElementSelector: string;
+export declare const getFocusableElements: (root?: HTMLElement | null) => HTMLElement[];
+export declare const focusFromKeyboard: (element?: HTMLElement | null, root?: ParentNode | null) => void;

package/build/cjs/components/NewHeader/components/NHNavigationPopup/keyboardNavigation.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusFromKeyboard = exports.getFocusableElements = exports.focusableElementSelector = exports.keyboardFocusAttribute = void 0;
+exports.keyboardFocusAttribute = 'data-keyboard-focus';
+exports.focusableElementSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+const keyboardFocusSelector = `[${exports.keyboardFocusAttribute}='true']`;
+const blurHandlers = new WeakMap();
+const clearKeyboardFocus = (root) => {
+    root.querySelectorAll(keyboardFocusSelector).forEach((element) => {
+        const blurHandler = blurHandlers.get(element);
+        if (blurHandler) {
+            element.removeEventListener('blur', blurHandler);
+            blurHandlers.delete(element);
+        }
+        element.removeAttribute(exports.keyboardFocusAttribute);
+    });
+};
+const getFocusableElements = (root) => Array.from((root === null || root === void 0 ? void 0 : root.querySelectorAll(exports.focusableElementSelector)) || []);
+exports.getFocusableElements = getFocusableElements;
+const focusFromKeyboard = (element, root) => {
+    if (!element) {
+        return;
+    }
+    const focusRoot = root || element.ownerDocument;
+    const handleBlur = () => {
+        element.removeAttribute(exports.keyboardFocusAttribute);
+        element.removeEventListener('blur', handleBlur);
+        blurHandlers.delete(element);
+    };
+    clearKeyboardFocus(focusRoot);
+    element.setAttribute(exports.keyboardFocusAttribute, 'true');
+    element.addEventListener('blur', handleBlur);
+    blurHandlers.set(element, handleBlur);
+    element.focus({ preventScroll: true });
+};
+exports.focusFromKeyboard = focusFromKeyboard;

package/build/cjs/components/NewHeader/components/NHPopupItem/NHPopupItem.css

@@ -57,6 +57,11 @@ unpredictable css rules order in build */
   opacity: 1;
 }
 
+.pc-addons-nh-navigation-popup-item:focus, .pc-addons-nh-navigation-popup-item:focus-visible, .pc-addons-nh-navigation-popup-item[data-keyboard-focus=true] {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 4px;
+}
+
 .pc-addons-nh-navigation-popup-item_disable {
   pointer-events: none;
 }

package/build/esm/components/HeaderStripe/HeaderStripe.css

@@ -122,6 +122,11 @@ unpredictable css rules order in build */
   text-decoration: none;
 }
 
+.pc-addons-header-stripe__item-link:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: -2px;
+}
+
 @media (min-width: 769px) {
   .pc-addons-header-stripe__item-link {
     overflow: hidden;
@@ -147,6 +152,11 @@ unpredictable css rules order in build */
   opacity: 0.6;
 }
 
+.pc-addons-header-stripe__close:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: -2px;
+}
+
 @keyframes expand-mobile {
   from {
     max-height: 0;

package/build/esm/components/HeaderStripe/HeaderStripe.js

@@ -7,12 +7,12 @@ import { CloseIcon } from './CloseIcon';
 import i18n from './i18n';
 import './HeaderStripe.css';
 const b = block('header-stripe');
-const renderItemContent = (item) => {
+const renderItemContent = (item, isActive) => {
     if (typeof item === 'string') {
         return item;
     }
     else if (item.link) {
-        return (React.createElement("a", { className: b('item-link'), href: item.link, target: item.target }, item.text));
+        return (React.createElement("a", { className: b('item-link'), href: item.link, target: item.target, tabIndex: isActive ? undefined : -1 }, item.text));
     }
     else {
         return item.text;
@@ -21,6 +21,7 @@ const renderItemContent = (item) => {
 export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, newDesign, }) => {
     const [activeIndex, setActiveIndex] = useState(0);
     const [isClosing, setIsClosing] = useState(false);
+    const [isFocusInside, setIsFocusInside] = useState(false);
     const isMobile = useMobile();
     const filteredItems = useMemo(() => isMobile
         ? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
@@ -29,13 +30,23 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         setIsClosing(true);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose]);
+    const handleFocus = useCallback(() => {
+        setIsFocusInside(true);
+    }, []);
+    const handleBlur = useCallback((event) => {
+        const nextFocusedElement = event.relatedTarget;
+        if (!(nextFocusedElement instanceof Node) ||
+            !event.currentTarget.contains(nextFocusedElement)) {
+            setIsFocusInside(false);
+        }
+    }, []);
     useEffect(() => {
         if (filteredItems.length > 0) {
             setActiveIndex(0);
         }
     }, [filteredItems.length]);
     useEffect(() => {
-        if (filteredItems.length < 1)
+        if (filteredItems.length < 2 || isFocusInside)
             return undefined;
         const interval = setInterval(() => {
             setActiveIndex((prevIndex) => (prevIndex + 1) % filteredItems.length);
@@ -43,7 +54,7 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         return () => {
             clearInterval(interval);
         };
-    }, [duration, filteredItems.length]);
+    }, [duration, filteredItems.length, isFocusInside]);
     const rootStyle = useMemo(() => {
         const properties = {};
         if (background) {
@@ -78,7 +89,7 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
         }), style: rootStyle },
         React.createElement(Grid, null,
             React.createElement(Col, null,
-                React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle },
+                React.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle, onFocus: handleFocus, onBlur: handleBlur },
                     filteredItems.map((item, index) => {
                         const isActive = index === activeIndex;
                         const isPrev = filteredItems.length > 1 &&
@@ -89,8 +100,8 @@ export const HeaderStripe = ({ duration = 8000, items, textColor, background, ba
                         return (React.createElement("div", { key: String(index), className: b('item', {
                                 active: isActive,
                                 prev: isPrev,
-                            }) },
-                            React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
+                            }), "aria-hidden": !isActive },
+                            React.createElement("div", { className: b('item-content') }, renderItemContent(item, isActive))));
                     }),
                     canClose && (React.createElement("button", { "aria-label": i18n('close'), className: b('close'), onClick: handleClose },
                         React.createElement(Icon, { data: newDesign ? CloseIcon : Xmark, className: b('close-icon'), size: 16 }))))))));

package/build/esm/components/Navigation/containers/Footer/GroupLinks/GroupLinks.js

@@ -5,9 +5,8 @@ import './GroupLinks.css';
 const b = block('group-links');
 const GroupLinks = ({ columnGroup: { title, items }, className }) => {
     return (React.createElement("div", { className: b(null, className), key: title },
-        React.createElement("ul", { className: b('group') },
-            title && React.createElement("h5", { className: b('group-title') }, title),
-            items.map((item) => (React.createElement("li", { key: item.title, className: b('item-wrapper') },
-                React.createElement(EnrichedLink, Object.assign({ className: b('item') }, item))))))));
+        title && React.createElement("h5", { className: b('group-title') }, title),
+        React.createElement("ul", { className: b('group'), "aria-label": title }, items.map((item) => (React.createElement("li", { key: item.title, className: b('item-wrapper') },
+            React.createElement(EnrichedLink, Object.assign({ className: b('item') }, item))))))));
 };
 export default GroupLinks;

package/build/esm/components/NewHeader/NewHeader.css

@@ -172,6 +172,11 @@ unpredictable css rules order in build */
   border-color: rgba(5, 43, 66, 0.25);
 }
 
+.pc-addons-new-header__button:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 2px;
+}
+
 @media (max-width: 1081px) {
   .pc-addons-new-header__left {
     margin-right: 0;

package/build/esm/components/NewHeader/NewHeader.js

@@ -16,6 +16,7 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
     const [isSearchMode, setIsSearchMode] = useState(false);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
     const [pageHasScroll, setPageHasScroll] = useState(false);
+    const [activeNavigationId, setActiveNavigationId] = useState(null);
     const showButtonsContainer = Boolean(buttons);
     const toggleSearch = useCallback((isActive) => setIsSearchMode(isActive), []);
     const toggleMobileNavigationPopup = useCallback((isOpened) => {
@@ -55,10 +56,10 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
                 React.createElement("div", { className: b('left') },
                     logo && React.createElement(NHLogo, { data: logo }),
                     left ? (React.createElement("div", { className: b('navigation') },
-                        React.createElement(NHNavigation, { data: left, headerRef: headerRef }))) : null),
+                        React.createElement(NHNavigation, { activeNavigationId: activeNavigationId, data: left, headerRef: headerRef, navigationId: "left", setActiveNavigationId: setActiveNavigationId }))) : null),
                 React.createElement("div", { className: b('right') },
                     right ? (React.createElement("div", { className: b('navigation') },
-                        React.createElement(NHNavigation, { data: right, headerRef: headerRef }))) : null,
+                        React.createElement(NHNavigation, { activeNavigationId: activeNavigationId, data: right, headerRef: headerRef, navigationId: "right", setActiveNavigationId: setActiveNavigationId }))) : null,
                     React.createElement("div", { className: b('wrap') },
                         renderSearch && (React.createElement("div", { className: b('icons-container') }, renderSearch({ onActiveToggle: toggleSearch }))),
                         React.createElement("div", { className: b('buttons') },

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.css

@@ -1,6 +1,19 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-addons-nh-login-button__wrapper {
+  display: flex;
+}
+
 .pc-addons-nh-login-button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   align-items: center;
   height: 36px;
@@ -17,4 +30,9 @@ unpredictable css rules order in build */
 
 .pc-addons-nh-login-button:hover {
   background: var(--g-color-base-brand-hover);
+}
+
+.pc-addons-nh-login-button:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 2px;
 }

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, useUniqId } from '@gravity-ui/uikit';
 import { block } from '../../../../utils/cn';
 import { SWITCH_MENU_TAB_TIMEOUT } from '../../constants';
 import { ChevronDown } from '../ChevronDown';
@@ -12,19 +12,30 @@ export const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     const [isActive, setIsActive] = useState(false);
     const [pretendentActiveTab, setPretendentAciveTab] = useState(false);
     const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
+    const popupId = useUniqId();
     const handleActiveTab = useCallback((val) => {
         setPreviouslyFocusedElement(document.activeElement);
         setPretendentAciveTab(val);
     }, []);
     const onEscapeKeyDown = useCallback((event) => {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && isActive) {
             setIsActive(false);
             setPretendentAciveTab(false);
             previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
         }
-    }, [previouslyFocusedElement]);
+    }, [isActive, previouslyFocusedElement]);
     const handleMouseEnter = useCallback(() => handleActiveTab(true), [handleActiveTab]);
     const handleMouseLeave = useCallback(() => handleActiveTab(false), [handleActiveTab]);
+    const handleToggle = useCallback(() => {
+        const focusedElement = document.activeElement;
+        const nextIsActive = !isActive;
+        setPreviouslyFocusedElement(focusedElement);
+        setPretendentAciveTab(nextIsActive);
+        setIsActive(nextIsActive);
+        if (!nextIsActive) {
+            focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.focus({ preventScroll: true });
+        }
+    }, [isActive]);
     useEffect(() => {
         const timerId = setTimeout(() => {
             setIsActive(pretendentActiveTab);
@@ -40,9 +51,10 @@ export const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
-    return (React.createElement("div", { className: b(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        data.text,
-        React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 16 }),
-        isActive && (React.createElement(NHNavigationPopup, { headerRef: headerRef },
+    return (React.createElement("div", { className: b('wrapper'), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        React.createElement("button", { className: b(), type: "button", onClick: handleToggle, "aria-expanded": isActive, "aria-controls": popupId },
+            data.text,
+            React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 16 })),
+        isActive && (React.createElement(NHNavigationPopup, { headerRef: headerRef, id: popupId },
             React.createElement(NHLoginPopup, Object.assign({}, data))))));
 };

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css

@@ -29,6 +29,11 @@ unpredictable css rules order in build */
   display: none;
 }
 
+.pc-addons-nh-mobile-navigation__icon:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 2px;
+}
+
 .pc-addons-nh-mobile-navigation__header {
   position: sticky;
   top: 0;
@@ -48,6 +53,11 @@ unpredictable css rules order in build */
   gap: 8px;
 }
 
+.pc-addons-nh-mobile-navigation__close-button:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 2px;
+}
+
 .pc-addons-nh-mobile-navigation__search-container {
   display: flex;
   align-items: center;

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button as PCButton } from '@doyourjob/gravity-ui-page-constructor';
 import { Bars, Xmark } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
+import { Button, Icon, useUniqId } from '@gravity-ui/uikit';
 import { block } from '../../../../utils/cn';
 import { NHLogo } from '../NHLogo/NHLogo';
 import { NHMobileNavigationItem } from '../NHMobileNavigationItem/NHMobileNavigationItem';
@@ -11,17 +11,22 @@ import './NHMobileNavigation.css';
 const b = block('nh-mobile-navigation');
 export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }) => {
     var _a, _b;
+    const popupId = useUniqId();
     return (React.createElement("div", { className: b() },
-        React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+        React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), extraProps: {
+                'aria-label': isOpened ? 'Close navigation menu' : 'Open navigation menu',
+                'aria-expanded': isOpened,
+                'aria-controls': popupId,
+            }, onClick: (e) => {
                 e.stopPropagation();
                 toogleOpen(!isOpened);
             } },
             React.createElement(Icon, { data: isOpened ? Xmark : Bars, size: 24 })),
-        React.createElement(NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+        React.createElement(NHMobileNavigationPopup, { id: popupId, isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
             React.createElement("div", { className: b('header') },
                 (data === null || data === void 0 ? void 0 : data.logo) && React.createElement(NHLogo, { data: data.logo }),
                 React.createElement("div", { className: b('header-right') },
-                    React.createElement(Button, { view: "flat", size: "l", className: b('close-button'), onClick: () => toogleOpen(false) },
+                    React.createElement(Button, { view: "flat", size: "l", className: b('close-button'), extraProps: { 'aria-label': 'Close navigation menu' }, onClick: () => toogleOpen(false) },
                         React.createElement(Icon, { data: Xmark, size: 24 })))),
             React.createElement("nav", { className: b('nav') },
                 React.createElement("ul", { className: b('list') }, (_a = data === null || data === void 0 ? void 0 : data.left) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement("li", { className: b('item'), key: index },

package/build/esm/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.css

@@ -8,6 +8,11 @@ unpredictable css rules order in build */
   align-items: center;
 }
 
+.pc-addons-nh-mobile-navigation-item:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 2px;
+}
+
 .pc-addons-nh-mobile-navigation-item_type_link {
   color: inherit;
   text-decoration: none;

package/build/esm/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.js

@@ -12,6 +12,7 @@ export const NHMobileNavigationItem = ({ item }) => {
     }, [isOpened]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
             toggleOpen();
         }
     }, [toggleOpen]);
@@ -20,7 +21,7 @@ export const NHMobileNavigationItem = ({ item }) => {
             return (React.createElement("a", Object.assign({ href: item.data.url, className: b({ type: 'link' }) }, getLinkProps(item.data.url || '', undefined, item.data.target)), item.title));
         }
         return (React.createElement(Fragment, null,
-            React.createElement("div", { className: b(), onClick: toggleOpen, role: "button", tabIndex: 0, onKeyDown: handleKeyDown },
+            React.createElement("div", { className: b(), onClick: toggleOpen, role: "button", tabIndex: 0, "aria-expanded": isOpened, onKeyDown: handleKeyDown },
                 React.createElement("div", { className: b('text') }, item.title),
                 React.createElement("div", { className: b('arrow') },
                     React.createElement(ToggleArrow, { size: 12, type: "vertical", open: isOpened, iconType: "navigation" }))),

package/build/esm/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import './NHMobileNavigationPopup.css';
 interface MobileNavigationPopupProps {
+    id?: string;
     isOpened: boolean;
     onClose: () => void;
     children: React.ReactNode;
     onMenuScroll: (scrollTop: number) => void;
 }
-export declare const NHMobileNavigationPopup: ({ isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
+export declare const NHMobileNavigationPopup: ({ id, isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
 export {};

package/build/esm/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.js

@@ -7,7 +7,7 @@ import { block } from '../../../../utils/cn';
 import './NHMobileNavigationPopup.css';
 const b = block('nh-mobile-navigation-popup');
 const TRANSITION_TIME = 400;
-export const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
+export const NHMobileNavigationPopup = ({ id, isOpened, onClose, children, onMenuScroll, }) => {
     const [body, setBody] = useState();
     const ref = useRef(null);
     const handleScroll = useCallback(() => {
@@ -35,5 +35,5 @@ export const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScr
     }
     return ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpened, classNames: b('transition'), unmountOnExit: true, timeout: TRANSITION_TIME },
         React.createElement(OutsideClick, { className: b(), onOutsideClick: onClose },
-            React.createElement("div", { ref: ref, className: b('container') }, children))), body);
+            React.createElement("div", { ref: ref, className: b('container'), id: id }, children))), body);
 };

package/build/esm/components/NewHeader/components/NHNavigation/NHNavigation.d.ts

@@ -3,9 +3,12 @@ import React from 'react';
 import { NHNavigationItemData, SetupRouteChangeHandler } from '../../models';
 import './NHNavigation.css';
 interface NavigationProps {
+    activeNavigationId: string | null;
     data: NHNavigationItemData[];
     headerRef?: RefObject<HTMLDivElement>;
+    navigationId: string;
     setupRouteChangeHandler?: SetupRouteChangeHandler;
+    setActiveNavigationId: (navigationId: string | null) => void;
 }
-export declare const NHNavigation: ({ data, headerRef, setupRouteChangeHandler }: NavigationProps) => React.JSX.Element;
+export declare const NHNavigation: ({ activeNavigationId, data, headerRef, navigationId, setupRouteChangeHandler, setActiveNavigationId, }: NavigationProps) => React.JSX.Element;
 export {};

package/build/esm/components/NewHeader/components/NHNavigation/NHNavigation.js

@@ -5,6 +5,7 @@ import { NHNavigationItemType } from '../../models';
 import { NHDefaultPopup } from '../NHDefaultPopup/NHDefaultPopup';
 import { NHNavigationItem } from '../NHNavigationItem/NHNavigationItem';
 import { NHNavigationPopup } from '../NHNavigationPopup/NHNavigationPopup';
+import { focusFromKeyboard, getFocusableElements } from '../NHNavigationPopup/keyboardNavigation';
 import './NHNavigation.css';
 const b = block('nh-navigation');
 const tooltipPrefixId = 'navigation-item-key';
@@ -16,36 +17,98 @@ const getPopupContent = (sectionData) => {
             return null;
     }
 };
-export const NHNavigation = ({ data, headerRef, setupRouteChangeHandler }) => {
+export const NHNavigation = ({ activeNavigationId, data, headerRef, navigationId, setupRouteChangeHandler, setActiveNavigationId, }) => {
     const [activeTab, setActiveTab] = useState(NO_MENU_TAB_SELECTED);
     const [pretendentActiveTab, setPretendentAciveTab] = useState(NO_MENU_TAB_SELECTED);
     const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
+    const [popupTabToFocus, setPopupTabToFocus] = useState(null);
+    const setNavigationTab = useCallback((currentIndex) => {
+        setPretendentAciveTab(currentIndex);
+        setActiveTab(currentIndex);
+        setPopupTabToFocus(null);
+        setActiveNavigationId(currentIndex === NO_MENU_TAB_SELECTED ? null : navigationId);
+    }, [navigationId, setActiveNavigationId]);
     const handleActiveTab = useCallback((currentIndex) => {
         setPreviouslyFocusedElement(document.activeElement);
         setPretendentAciveTab(currentIndex);
     }, []);
+    const handleToggleTab = useCallback((currentIndex) => {
+        const focusedElement = document.activeElement;
+        const nextActiveTab = activeTab === currentIndex ? NO_MENU_TAB_SELECTED : currentIndex;
+        setPreviouslyFocusedElement(focusedElement);
+        setNavigationTab(nextActiveTab);
+        if (nextActiveTab === NO_MENU_TAB_SELECTED) {
+            focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.focus({ preventScroll: true });
+        }
+    }, [activeTab, setNavigationTab]);
+    const handleFocusTabPopup = useCallback((currentIndex) => {
+        setPreviouslyFocusedElement(document.activeElement);
+        setPretendentAciveTab(currentIndex);
+        setActiveTab(currentIndex);
+        setPopupTabToFocus(currentIndex);
+        setActiveNavigationId(navigationId);
+    }, [navigationId, setActiveNavigationId]);
+    const handleFocusTab = useCallback((currentIndex) => {
+        if (activeNavigationId === null) {
+            return;
+        }
+        setPreviouslyFocusedElement(document.activeElement);
+        setNavigationTab(currentIndex);
+    }, [activeNavigationId, setNavigationTab]);
+    const handleCloseTab = useCallback(() => {
+        setNavigationTab(NO_MENU_TAB_SELECTED);
+        previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+    }, [previouslyFocusedElement, setNavigationTab]);
+    const handleBlur = useCallback((event) => {
+        if (activeTab === NO_MENU_TAB_SELECTED) {
+            return;
+        }
+        const nextFocusedElement = event.relatedTarget;
+        const popup = document.getElementById(`${tooltipPrefixId}-${activeTab}`);
+        if (nextFocusedElement &&
+            (event.currentTarget.contains(nextFocusedElement) ||
+                (popup === null || popup === void 0 ? void 0 : popup.contains(nextFocusedElement)))) {
+            return;
+        }
+        setNavigationTab(NO_MENU_TAB_SELECTED);
+    }, [activeTab, setNavigationTab]);
     const onEscapeKeyDown = useCallback((event) => {
-        if (event.key === 'Escape') {
-            setActiveTab(NO_MENU_TAB_SELECTED);
-            setPretendentAciveTab(NO_MENU_TAB_SELECTED);
-            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+        if (event.key === 'Escape' && activeTab !== NO_MENU_TAB_SELECTED) {
+            handleCloseTab();
         }
-    }, [previouslyFocusedElement]);
+    }, [activeTab, handleCloseTab]);
     useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleActiveTab(NO_MENU_TAB_SELECTED);
     }), [setupRouteChangeHandler, handleActiveTab]);
     useEffect(() => {
         const timerId = setTimeout(() => {
             setActiveTab(pretendentActiveTab);
+            setActiveNavigationId(pretendentActiveTab === NO_MENU_TAB_SELECTED ? null : navigationId);
         }, SWITCH_MENU_TAB_TIMEOUT);
         return () => clearTimeout(timerId);
-    }, [activeTab, pretendentActiveTab]);
+    }, [activeTab, navigationId, pretendentActiveTab, setActiveNavigationId]);
+    useEffect(() => {
+        if (activeNavigationId !== navigationId && activeTab !== NO_MENU_TAB_SELECTED) {
+            setActiveTab(NO_MENU_TAB_SELECTED);
+            setPretendentAciveTab(NO_MENU_TAB_SELECTED);
+            setPopupTabToFocus(null);
+        }
+    }, [activeNavigationId, activeTab, navigationId]);
+    useEffect(() => {
+        if (popupTabToFocus === null || activeTab !== popupTabToFocus) {
+            return;
+        }
+        const popup = document.getElementById(`${tooltipPrefixId}-${popupTabToFocus}`);
+        const [firstFocusableElement] = getFocusableElements(popup);
+        focusFromKeyboard(firstFocusableElement, popup);
+        setPopupTabToFocus(null);
+    }, [activeTab, popupTabToFocus]);
     useEffect(() => {
         document.addEventListener('keydown', onEscapeKeyDown);
         return () => {
             document.removeEventListener('keydown', onEscapeKeyDown);
         };
     }, [onEscapeKeyDown]);
-    return (React.createElement("nav", null,
-        React.createElement("ul", { className: b() }, data.map((item, i) => (React.createElement(NHNavigationItem, { key: i, item: item, handleActiveTab: handleActiveTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== NHNavigationItemType.Link && (React.createElement(NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
+    return (React.createElement("nav", { onBlur: handleBlur },
+        React.createElement("ul", { className: b() }, data.map((item, i) => (React.createElement(NHNavigationItem, { key: i, item: item, handleActiveTab: handleActiveTab, handleFocusTabPopup: handleFocusTabPopup, handleFocusTab: handleFocusTab, handleToggleTab: handleToggleTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== NHNavigationItemType.Link && (React.createElement(NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
 };

package/build/esm/components/NewHeader/components/NHNavigationItem/NHNavigationItem.css

@@ -55,6 +55,11 @@ unpredictable css rules order in build */
   cursor: default;
 }
 
+.pc-addons-nh-navigation-item__text:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 2px;
+}
+
 .pc-addons-nh-navigation-item:first-child .pc-addons-nh-navigation-item__text {
   margin-left: 0;
 }