@doyourjob/gravity-ui-page-constructor-addons 2.1.45 → 2.1.47

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;
@@ -27,6 +32,7 @@ unpredictable css rules order in build */
 
 .pc-addons-nh-mobile-navigation-item__arrow {
   color: var(--g-color-text-secondary);
+  display: flex;
 }
 
 .pc-addons-nh-mobile-navigation-item__content {

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;
 }

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/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;