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

package/README.md

@@ -10,6 +10,18 @@
 npm install @gravity-ui/page-constructor-addons
 ```
 
+## Release patch
+
+Run from a clean branch with an upstream configured:
+
+```shell
+pnpm bump-patch-release
+```
+
+The script fetches the upstream remote, refuses to continue if upstream has commits missing
+locally, bumps the package patch version, commits `chore: release vX.Y.Z`, creates the
+`vX.Y.Z` tag, then pushes the commit and tag.
+
 ## Development
 
 ```bash

package/build/cjs/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/cjs/components/HeaderStripe/HeaderStripe.js

@@ -10,12 +10,12 @@ const cn_1 = require("../../utils/cn");
 const CloseIcon_1 = require("./CloseIcon");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, cn_1.block)('header-stripe');
-const renderItemContent = (item) => {
+const renderItemContent = (item, isActive) => {
     if (typeof item === 'string') {
         return item;
     }
     else if (item.link) {
-        return (react_1.default.createElement("a", { className: b('item-link'), href: item.link, target: item.target }, item.text));
+        return (react_1.default.createElement("a", { className: b('item-link'), href: item.link, target: item.target, tabIndex: isActive ? undefined : -1 }, item.text));
     }
     else {
         return item.text;
@@ -24,6 +24,7 @@ const renderItemContent = (item) => {
 const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, canClose, onClose, newDesign, }) => {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const [isClosing, setIsClosing] = (0, react_1.useState)(false);
+    const [isFocusInside, setIsFocusInside] = (0, react_1.useState)(false);
     const isMobile = (0, uikit_1.useMobile)();
     const filteredItems = (0, react_1.useMemo)(() => isMobile
         ? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
@@ -32,13 +33,23 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
         setIsClosing(true);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose]);
+    const handleFocus = (0, react_1.useCallback)(() => {
+        setIsFocusInside(true);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        const nextFocusedElement = event.relatedTarget;
+        if (!(nextFocusedElement instanceof Node) ||
+            !event.currentTarget.contains(nextFocusedElement)) {
+            setIsFocusInside(false);
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         if (filteredItems.length > 0) {
             setActiveIndex(0);
         }
     }, [filteredItems.length]);
     (0, react_1.useEffect)(() => {
-        if (filteredItems.length < 1)
+        if (filteredItems.length < 2 || isFocusInside)
             return undefined;
         const interval = setInterval(() => {
             setActiveIndex((prevIndex) => (prevIndex + 1) % filteredItems.length);
@@ -46,7 +57,7 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
         return () => {
             clearInterval(interval);
         };
-    }, [duration, filteredItems.length]);
+    }, [duration, filteredItems.length, isFocusInside]);
     const rootStyle = (0, react_1.useMemo)(() => {
         const properties = {};
         if (background) {
@@ -81,7 +92,7 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
         }), style: rootStyle },
         react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
             react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
-                react_1.default.createElement("div", { className: b('content', { 'with-close': Boolean(onClose) }), style: contentStyle },
+                react_1.default.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 &&
@@ -92,8 +103,8 @@ const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroun
                         return (react_1.default.createElement("div", { key: String(index), className: b('item', {
                                 active: isActive,
                                 prev: isPrev,
-                            }) },
-                            react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
+                            }), "aria-hidden": !isActive },
+                            react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item, isActive))));
                     }),
                     canClose && (react_1.default.createElement("button", { "aria-label": (0, i18n_1.default)('close'), className: b('close'), onClick: handleClose },
                         react_1.default.createElement(uikit_1.Icon, { data: newDesign ? CloseIcon_1.CloseIcon : icons_1.Xmark, className: b('close-icon'), size: 16 }))))))));

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

@@ -7,9 +7,8 @@ const EnrichedLink_1 = require("../../../../EnrichedLink/EnrichedLink");
 const b = (0, cn_1.block)('group-links');
 const GroupLinks = ({ columnGroup: { title, items }, className }) => {
     return (react_1.default.createElement("div", { className: b(null, className), key: title },
-        react_1.default.createElement("ul", { className: b('group') },
-            title && react_1.default.createElement("h5", { className: b('group-title') }, title),
-            items.map((item) => (react_1.default.createElement("li", { key: item.title, className: b('item-wrapper') },
-                react_1.default.createElement(EnrichedLink_1.EnrichedLink, Object.assign({ className: b('item') }, item))))))));
+        title && react_1.default.createElement("h5", { className: b('group-title') }, title),
+        react_1.default.createElement("ul", { className: b('group'), "aria-label": title }, items.map((item) => (react_1.default.createElement("li", { key: item.title, className: b('item-wrapper') },
+            react_1.default.createElement(EnrichedLink_1.EnrichedLink, Object.assign({ className: b('item') }, item))))))));
 };
 exports.default = GroupLinks;

package/build/cjs/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/cjs/components/NewHeader/NewHeader.js

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

package/build/cjs/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/cjs/components/NewHeader/components/NHLoginButton/NHLoginButton.js

@@ -15,19 +15,30 @@ const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     const [isActive, setIsActive] = (0, react_1.useState)(false);
     const [pretendentActiveTab, setPretendentAciveTab] = (0, react_1.useState)(false);
     const [previouslyFocusedElement, setPreviouslyFocusedElement] = (0, react_1.useState)(null);
+    const popupId = (0, uikit_1.useUniqId)();
     const handleActiveTab = (0, react_1.useCallback)((val) => {
         setPreviouslyFocusedElement(document.activeElement);
         setPretendentAciveTab(val);
     }, []);
     const onEscapeKeyDown = (0, react_1.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 = (0, react_1.useCallback)(() => handleActiveTab(true), [handleActiveTab]);
     const handleMouseLeave = (0, react_1.useCallback)(() => handleActiveTab(false), [handleActiveTab]);
+    const handleToggle = (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         const timerId = setTimeout(() => {
             setIsActive(pretendentActiveTab);
@@ -43,10 +54,11 @@ const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
     (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
-    return (react_1.default.createElement("div", { className: b(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        data.text,
-        react_1.default.createElement(uikit_1.Icon, { data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 }),
-        isActive && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef },
+    return (react_1.default.createElement("div", { className: b('wrapper'), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        react_1.default.createElement("button", { className: b(), type: "button", onClick: handleToggle, "aria-expanded": isActive, "aria-controls": popupId },
+            data.text,
+            react_1.default.createElement(uikit_1.Icon, { data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 })),
+        isActive && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef, id: popupId },
             react_1.default.createElement(NHLoginPopup_1.NHLoginPopup, Object.assign({}, data))))));
 };
 exports.NHLoginButton = NHLoginButton;

package/build/cjs/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/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js

@@ -14,17 +14,22 @@ const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
 const b = (0, cn_1.block)('nh-mobile-navigation');
 const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }) => {
     var _a, _b;
+    const popupId = (0, uikit_1.useUniqId)();
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+        react_1.default.createElement(uikit_1.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_1.default.createElement(uikit_1.Icon, { data: isOpened ? icons_1.Xmark : icons_1.Bars, size: 24 })),
-        react_1.default.createElement(NHMobileNavigationPopup_1.NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+        react_1.default.createElement(NHMobileNavigationPopup_1.NHMobileNavigationPopup, { id: popupId, isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
             react_1.default.createElement("div", { className: b('header') },
                 (data === null || data === void 0 ? void 0 : data.logo) && react_1.default.createElement(NHLogo_1.NHLogo, { data: data.logo }),
                 react_1.default.createElement("div", { className: b('header-right') },
-                    react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('close-button'), onClick: () => toogleOpen(false) },
+                    react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('close-button'), extraProps: { 'aria-label': 'Close navigation menu' }, onClick: () => toogleOpen(false) },
                         react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 24 })))),
             react_1.default.createElement("nav", { className: b('nav') },
                 react_1.default.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_1.default.createElement("li", { className: b('item'), key: index },

package/build/cjs/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/cjs/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.js

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

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

@@ -1,9 +1,10 @@
 import React from 'react';
 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/cjs/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.js

@@ -10,7 +10,7 @@ const react_transition_group_1 = require("react-transition-group");
 const cn_1 = require("../../../../utils/cn");
 const b = (0, cn_1.block)('nh-mobile-navigation-popup');
 const TRANSITION_TIME = 400;
-const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
+const NHMobileNavigationPopup = ({ id, isOpened, onClose, children, onMenuScroll, }) => {
     const [body, setBody] = (0, react_1.useState)();
     const ref = (0, react_1.useRef)(null);
     const handleScroll = (0, react_1.useCallback)(() => {
@@ -38,6 +38,6 @@ const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, })
     }
     return react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpened, classNames: b('transition'), unmountOnExit: true, timeout: TRANSITION_TIME },
         react_1.default.createElement(gravity_ui_page_constructor_1.OutsideClick, { className: b(), onOutsideClick: onClose },
-            react_1.default.createElement("div", { ref: ref, className: b('container') }, children))), body);
+            react_1.default.createElement("div", { ref: ref, className: b('container'), id: id }, children))), body);
 };
 exports.NHMobileNavigationPopup = NHMobileNavigationPopup;

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

@@ -2,9 +2,12 @@ import type { RefObject } from 'react';
 import React from 'react';
 import { NHNavigationItemData, SetupRouteChangeHandler } from '../../models';
 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/cjs/components/NewHeader/components/NHNavigation/NHNavigation.js

@@ -9,6 +9,7 @@ const models_1 = require("../../models");
 const NHDefaultPopup_1 = require("../NHDefaultPopup/NHDefaultPopup");
 const NHNavigationItem_1 = require("../NHNavigationItem/NHNavigationItem");
 const NHNavigationPopup_1 = require("../NHNavigationPopup/NHNavigationPopup");
+const keyboardNavigation_1 = require("../NHNavigationPopup/keyboardNavigation");
 const b = (0, cn_1.block)('nh-navigation');
 const tooltipPrefixId = 'navigation-item-key';
 const getPopupContent = (sectionData) => {
@@ -19,37 +20,99 @@ const getPopupContent = (sectionData) => {
             return null;
     }
 };
-const NHNavigation = ({ data, headerRef, setupRouteChangeHandler }) => {
+const NHNavigation = ({ activeNavigationId, data, headerRef, navigationId, setupRouteChangeHandler, setActiveNavigationId, }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(constants_1.NO_MENU_TAB_SELECTED);
     const [pretendentActiveTab, setPretendentAciveTab] = (0, react_1.useState)(constants_1.NO_MENU_TAB_SELECTED);
     const [previouslyFocusedElement, setPreviouslyFocusedElement] = (0, react_1.useState)(null);
+    const [popupTabToFocus, setPopupTabToFocus] = (0, react_1.useState)(null);
+    const setNavigationTab = (0, react_1.useCallback)((currentIndex) => {
+        setPretendentAciveTab(currentIndex);
+        setActiveTab(currentIndex);
+        setPopupTabToFocus(null);
+        setActiveNavigationId(currentIndex === constants_1.NO_MENU_TAB_SELECTED ? null : navigationId);
+    }, [navigationId, setActiveNavigationId]);
     const handleActiveTab = (0, react_1.useCallback)((currentIndex) => {
         setPreviouslyFocusedElement(document.activeElement);
         setPretendentAciveTab(currentIndex);
     }, []);
+    const handleToggleTab = (0, react_1.useCallback)((currentIndex) => {
+        const focusedElement = document.activeElement;
+        const nextActiveTab = activeTab === currentIndex ? constants_1.NO_MENU_TAB_SELECTED : currentIndex;
+        setPreviouslyFocusedElement(focusedElement);
+        setNavigationTab(nextActiveTab);
+        if (nextActiveTab === constants_1.NO_MENU_TAB_SELECTED) {
+            focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.focus({ preventScroll: true });
+        }
+    }, [activeTab, setNavigationTab]);
+    const handleFocusTabPopup = (0, react_1.useCallback)((currentIndex) => {
+        setPreviouslyFocusedElement(document.activeElement);
+        setPretendentAciveTab(currentIndex);
+        setActiveTab(currentIndex);
+        setPopupTabToFocus(currentIndex);
+        setActiveNavigationId(navigationId);
+    }, [navigationId, setActiveNavigationId]);
+    const handleFocusTab = (0, react_1.useCallback)((currentIndex) => {
+        if (activeNavigationId === null) {
+            return;
+        }
+        setPreviouslyFocusedElement(document.activeElement);
+        setNavigationTab(currentIndex);
+    }, [activeNavigationId, setNavigationTab]);
+    const handleCloseTab = (0, react_1.useCallback)(() => {
+        setNavigationTab(constants_1.NO_MENU_TAB_SELECTED);
+        previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+    }, [previouslyFocusedElement, setNavigationTab]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        if (activeTab === constants_1.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(constants_1.NO_MENU_TAB_SELECTED);
+    }, [activeTab, setNavigationTab]);
     const onEscapeKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.key === 'Escape') {
-            setActiveTab(constants_1.NO_MENU_TAB_SELECTED);
-            setPretendentAciveTab(constants_1.NO_MENU_TAB_SELECTED);
-            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+        if (event.key === 'Escape' && activeTab !== constants_1.NO_MENU_TAB_SELECTED) {
+            handleCloseTab();
         }
-    }, [previouslyFocusedElement]);
+    }, [activeTab, handleCloseTab]);
     (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleActiveTab(constants_1.NO_MENU_TAB_SELECTED);
     }), [setupRouteChangeHandler, handleActiveTab]);
     (0, react_1.useEffect)(() => {
         const timerId = setTimeout(() => {
             setActiveTab(pretendentActiveTab);
+            setActiveNavigationId(pretendentActiveTab === constants_1.NO_MENU_TAB_SELECTED ? null : navigationId);
         }, constants_1.SWITCH_MENU_TAB_TIMEOUT);
         return () => clearTimeout(timerId);
-    }, [activeTab, pretendentActiveTab]);
+    }, [activeTab, navigationId, pretendentActiveTab, setActiveNavigationId]);
+    (0, react_1.useEffect)(() => {
+        if (activeNavigationId !== navigationId && activeTab !== constants_1.NO_MENU_TAB_SELECTED) {
+            setActiveTab(constants_1.NO_MENU_TAB_SELECTED);
+            setPretendentAciveTab(constants_1.NO_MENU_TAB_SELECTED);
+            setPopupTabToFocus(null);
+        }
+    }, [activeNavigationId, activeTab, navigationId]);
+    (0, react_1.useEffect)(() => {
+        if (popupTabToFocus === null || activeTab !== popupTabToFocus) {
+            return;
+        }
+        const popup = document.getElementById(`${tooltipPrefixId}-${popupTabToFocus}`);
+        const [firstFocusableElement] = (0, keyboardNavigation_1.getFocusableElements)(popup);
+        (0, keyboardNavigation_1.focusFromKeyboard)(firstFocusableElement, popup);
+        setPopupTabToFocus(null);
+    }, [activeTab, popupTabToFocus]);
     (0, react_1.useEffect)(() => {
         document.addEventListener('keydown', onEscapeKeyDown);
         return () => {
             document.removeEventListener('keydown', onEscapeKeyDown);
         };
     }, [onEscapeKeyDown]);
-    return (react_1.default.createElement("nav", null,
-        react_1.default.createElement("ul", { className: b() }, data.map((item, i) => (react_1.default.createElement(NHNavigationItem_1.NHNavigationItem, { key: i, item: item, handleActiveTab: handleActiveTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== models_1.NHNavigationItemType.Link && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
+    return (react_1.default.createElement("nav", { onBlur: handleBlur },
+        react_1.default.createElement("ul", { className: b() }, data.map((item, i) => (react_1.default.createElement(NHNavigationItem_1.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 !== models_1.NHNavigationItemType.Link && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
 };
 exports.NHNavigation = NHNavigation;

package/build/cjs/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;
 }

package/build/cjs/components/NewHeader/components/NHNavigationItem/NHNavigationItem.d.ts

@@ -5,6 +5,9 @@ interface NavigationItemOwnProps {
     item: NHNavigationItemData;
     isActive: boolean;
     handleActiveTab: (currentIndex: number) => void;
+    handleFocusTab: (currentIndex: number) => void;
+    handleFocusTabPopup: (currentIndex: number) => void;
+    handleToggleTab: (currentIndex: number) => void;
     children?: ReactNode;
     tooltipId?: string;
 }

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

@@ -12,21 +12,30 @@ const models_1 = require("../../models");
 const ChevronDown_1 = require("../ChevronDown");
 const ChevronUp_1 = require("../ChevronUp");
 const b = (0, cn_1.block)('nh-navigation-item');
-const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
+const NHNavigationItem = ({ item, isActive, handleActiveTab, handleFocusTab, handleFocusTabPopup, handleToggleTab, index, children, tooltipId, }) => {
     var _a, _b, _c, _d;
     const setupRouteChangeHandler = (0, react_1.useContext)(route_change_1.RouteChangeHandlerContext);
     const handleMouseEnter = (0, react_1.useCallback)(() => handleActiveTab(index), [handleActiveTab, index]);
     const handleMouseLeave = (0, react_1.useCallback)(() => handleActiveTab(constants_1.NO_MENU_TAB_SELECTED), [handleActiveTab]);
+    const handleToggle = (0, react_1.useCallback)(() => handleToggleTab(index), [handleToggleTab, index]);
+    const handlePopupFocus = (0, react_1.useCallback)(() => handleFocusTab(index), [handleFocusTab, index]);
+    const handleLinkFocus = (0, react_1.useCallback)(() => handleFocusTab(constants_1.NO_MENU_TAB_SELECTED), [handleFocusTab]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            handleFocusTabPopup(index);
+        }
+    }, [handleFocusTabPopup, index]);
     (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
     if (item.type === models_1.NHNavigationItemType.Link) {
         return (react_1.default.createElement("li", { className: b({ disable: !((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-            react_1.default.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url }, (0, gravity_ui_page_constructor_1.getLinkProps)(((_c = item.data) === null || _c === void 0 ? void 0 : _c.url) || '', undefined, (_d = item.data) === null || _d === void 0 ? void 0 : _d.target)), item.title),
+            react_1.default.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url, onFocus: handleLinkFocus }, (0, gravity_ui_page_constructor_1.getLinkProps)(((_c = item.data) === null || _c === void 0 ? void 0 : _c.url) || '', undefined, (_d = item.data) === null || _d === void 0 ? void 0 : _d.target)), item.title),
             children));
     }
     return (react_1.default.createElement("li", { className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        react_1.default.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId },
+        react_1.default.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), type: "button", onClick: handleToggle, onFocus: handlePopupFocus, onKeyDown: handleKeyDown, "aria-expanded": isActive, "aria-controls": tooltipId },
             item.title,
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 })),
         children));

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

@@ -8,6 +8,17 @@
   z-index: 10;
 }
 
-.pc-addons-nh-navigation-popup:focus {
-  outline: 0;
+.pc-addons-nh-navigation-popup a:focus-visible, .pc-addons-nh-navigation-popup a[data-keyboard-focus=true],
+.pc-addons-nh-navigation-popup button:focus-visible,
+.pc-addons-nh-navigation-popup button[data-keyboard-focus=true],
+.pc-addons-nh-navigation-popup input:focus-visible,
+.pc-addons-nh-navigation-popup input[data-keyboard-focus=true],
+.pc-addons-nh-navigation-popup select:focus-visible,
+.pc-addons-nh-navigation-popup select[data-keyboard-focus=true],
+.pc-addons-nh-navigation-popup textarea:focus-visible,
+.pc-addons-nh-navigation-popup textarea[data-keyboard-focus=true],
+.pc-addons-nh-navigation-popup [tabindex]:not([tabindex="-1"]):focus-visible,
+.pc-addons-nh-navigation-popup [tabindex]:not([tabindex="-1"])[data-keyboard-focus=true] {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 4px;
 }