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

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

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

@@ -6,6 +6,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/esm/components/NewHeader/components/NHNavigationItem/NHNavigationItem.js

@@ -9,21 +9,30 @@ import { ChevronDown } from '../ChevronDown';
 import { ChevronUp } from '../ChevronUp';
 import './NHNavigationItem.css';
 const b = block('nh-navigation-item');
-export const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
+export const NHNavigationItem = ({ item, isActive, handleActiveTab, handleFocusTab, handleFocusTabPopup, handleToggleTab, index, children, tooltipId, }) => {
     var _a, _b, _c, _d;
     const setupRouteChangeHandler = useContext(RouteChangeHandlerContext);
     const handleMouseEnter = useCallback(() => handleActiveTab(index), [handleActiveTab, index]);
     const handleMouseLeave = useCallback(() => handleActiveTab(NO_MENU_TAB_SELECTED), [handleActiveTab]);
+    const handleToggle = useCallback(() => handleToggleTab(index), [handleToggleTab, index]);
+    const handlePopupFocus = useCallback(() => handleFocusTab(index), [handleFocusTab, index]);
+    const handleLinkFocus = useCallback(() => handleFocusTab(NO_MENU_TAB_SELECTED), [handleFocusTab]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            handleFocusTabPopup(index);
+        }
+    }, [handleFocusTabPopup, index]);
     useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
     if (item.type === NHNavigationItemType.Link) {
         return (React.createElement("li", { className: b({ disable: !((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-            React.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url }, 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.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url, onFocus: handleLinkFocus }, 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.createElement("li", { className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        React.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId },
+        React.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.createElement(Icon, { className: b('icon'), data: isActive ? ChevronUp : ChevronDown, size: 16 })),
         children));

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

@@ -1,14 +1,66 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { FocusTrap } from '../../../../utils/FocusTrap';
 import { block } from '../../../../utils/cn';
+import { focusFromKeyboard, getFocusableElements } from './keyboardNavigation';
 import './NHNavigationPopup.css';
 const b = 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;
+};
 export const NHNavigationPopup = ({ headerRef, children, id }) => {
+    const popupRef = useRef(null);
+    const focusRelativeElement = useCallback((offset) => {
+        const popup = popupRef.current;
+        const focusableElements = 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);
+        focusFromKeyboard(focusableElements[nextIndex], popup);
+    }, []);
+    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;
+                focusFromKeyboard(getFocusableElements(popupElement)[0], popupElement);
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                const popupElement = popupRef.current;
+                const focusableElements = getFocusableElements(popupElement);
+                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)
-        ? ReactDOM.createPortal(React.createElement(FocusTrap, { enabled: true },
-            React.createElement("div", { 
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, className: b(), id: id }, children)), headerRef.current)
+        ? ReactDOM.createPortal(React.createElement("div", { className: b(), id: id, ref: popupRef }, children), headerRef.current)
         : null;
 };

package/build/esm/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/esm/components/NewHeader/components/NHNavigationPopup/keyboardNavigation.js

@@ -0,0 +1,38 @@
+export const keyboardFocusAttribute = 'data-keyboard-focus';
+export const focusableElementSelector = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+const keyboardFocusSelector = `[${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(keyboardFocusAttribute);
+    });
+};
+export const getFocusableElements = (root) => Array.from((root === null || root === void 0 ? void 0 : root.querySelectorAll(focusableElementSelector)) || []);
+export const focusFromKeyboard = (element, root) => {
+    if (!element) {
+        return;
+    }
+    const focusRoot = root || element.ownerDocument;
+    const handleBlur = () => {
+        element.removeAttribute(keyboardFocusAttribute);
+        element.removeEventListener('blur', handleBlur);
+        blurHandlers.delete(element);
+    };
+    clearKeyboardFocus(focusRoot);
+    element.setAttribute(keyboardFocusAttribute, 'true');
+    element.addEventListener('blur', handleBlur);
+    blurHandlers.set(element, handleBlur);
+    element.focus({ preventScroll: true });
+};

package/build/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor-addons",
-  "version": "2.1.46",
+  "version": "2.1.47",
   "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
   "license": "MIT",
   "repository": {