useAccessibility.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import KeyCode from "rc-util/es/KeyCode";
  2. import raf from "rc-util/es/raf";
  3. import * as React from "react";
  4. var ESC = KeyCode.ESC,
  5. TAB = KeyCode.TAB;
  6. export default function useAccessibility(_ref) {
  7. var visible = _ref.visible,
  8. triggerRef = _ref.triggerRef,
  9. onVisibleChange = _ref.onVisibleChange,
  10. autoFocus = _ref.autoFocus,
  11. overlayRef = _ref.overlayRef;
  12. var focusMenuRef = React.useRef(false);
  13. var handleCloseMenuAndReturnFocus = function handleCloseMenuAndReturnFocus() {
  14. if (visible) {
  15. var _triggerRef$current, _triggerRef$current$f;
  16. (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || (_triggerRef$current$f = _triggerRef$current.focus) === null || _triggerRef$current$f === void 0 || _triggerRef$current$f.call(_triggerRef$current);
  17. onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
  18. }
  19. };
  20. var focusMenu = function focusMenu() {
  21. var _overlayRef$current;
  22. if ((_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.focus) {
  23. overlayRef.current.focus();
  24. focusMenuRef.current = true;
  25. return true;
  26. }
  27. return false;
  28. };
  29. var handleKeyDown = function handleKeyDown(event) {
  30. switch (event.keyCode) {
  31. case ESC:
  32. handleCloseMenuAndReturnFocus();
  33. break;
  34. case TAB:
  35. {
  36. var focusResult = false;
  37. if (!focusMenuRef.current) {
  38. focusResult = focusMenu();
  39. }
  40. if (focusResult) {
  41. event.preventDefault();
  42. } else {
  43. handleCloseMenuAndReturnFocus();
  44. }
  45. break;
  46. }
  47. }
  48. };
  49. React.useEffect(function () {
  50. if (visible) {
  51. window.addEventListener("keydown", handleKeyDown);
  52. if (autoFocus) {
  53. // FIXME: hack with raf
  54. raf(focusMenu, 3);
  55. }
  56. return function () {
  57. window.removeEventListener("keydown", handleKeyDown);
  58. focusMenuRef.current = false;
  59. };
  60. }
  61. return function () {
  62. focusMenuRef.current = false;
  63. };
  64. }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
  65. }