@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.98 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/higher-order/navigate-regions/index.tsx"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n previous: [{\n modifier: 'ctrlShift',\n character: '`'\n }, {\n modifier: 'ctrlShift',\n character: '~'\n }, {\n modifier: 'access',\n character: 'p'\n }],\n next: [{\n modifier: 'ctrl',\n character: '`'\n }, {\n modifier: 'access',\n character: 'n'\n }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n const ref = useRef(null);\n const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n function focusRegion(offset) {\n const regions = Array.from(ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]') ?? []);\n if (!regions.length) {\n return;\n }\n let nextRegion = regions[0];\n // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n if (selectedIndex !== -1) {\n let nextIndex = selectedIndex + offset;\n nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n nextRegion = regions[nextIndex];\n }\n nextRegion.focus();\n setIsFocusingRegions(true);\n }\n const clickRef = useRefEffect(element => {\n function onClick() {\n setIsFocusingRegions(false);\n }\n element.addEventListener('click', onClick);\n return () => {\n element.removeEventListener('click', onClick);\n };\n }, [setIsFocusingRegions]);\n return {\n ref: useMergeRefs([ref, clickRef]),\n className: isFocusingRegions ? 'is-focusing-regions' : '',\n onKeyDown(event) {\n if (shortcuts.previous.some(({\n modifier,\n character\n }) => {\n return isKeyboardEvent[modifier](event, character);\n })) {\n focusRegion(-1);\n } else if (shortcuts.next.some(({\n modifier,\n character\n }) => {\n return isKeyboardEvent[modifier](event, character);\n })) {\n focusRegion(1);\n }\n }\n };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => function NavigateRegions({\n shortcuts,\n ...props\n}) {\n return /*#__PURE__*/_jsx(\"div\", {\n ...useNavigateRegions(shortcuts),\n children: /*#__PURE__*/_jsx(Component, {\n ...props\n })\n });\n}, 'navigateRegions');"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAAuE;AACvE,sBAAgC;AAChC,yBAA4B;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,UAAM,uBAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,yBAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,UAAM,UAAU,MAAM,KAAK,IAAI,SAAS,iBAAiB,gCAAgC,KAAK,CAAC,CAAC;AAChG,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,eAAW,6BAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,SAAK,6BAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gCAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gCAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,+BAAQ,2CAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,uCAAAA,KAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
"names": ["_jsx"]
}