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

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.48",
   "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,7 @@
     "*.scss"
   ],
   "scripts": {
+    "bump-patch-release": "node ./scripts/bump-patch.mjs",
     "deps:install": "npm ci",
     "deps:truncate": "npm prune --production",
     "lint:fix": "run-s lint:js:fix lint:styles:fix lint:prettier:fix typecheck",