fix: #6680, Tooltip: Escape key not dismissing tooltip (WCAG 2.1 1.4.…

…13) (#6687)
primefaces · May 27, 2024 · f5237b1 · f5237b1
1 parent 5b6b09b
commit f5237b1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -51151,6 +51151,14 @@
                             "default": "",
                             "description": "Content to be displayed in tooltip."
                         },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies if pressing escape key should hide the tooltip."
+                        },
                         {
                             "name": "disabled",
                             "optional": true,

diff --git a/components/lib/hooks/useGlobalOnEscapeKey.js b/components/lib/hooks/useGlobalOnEscapeKey.js
@@ -14,7 +14,8 @@ export const ESC_KEY_HANDLING_PRIORITIES = {
     PASSWORD: 700,
     CASCADE_SELECT: 800,
     SPLIT_BUTTON: 900,
-    SPEED_DIAL: 1000
+    SPEED_DIAL: 1000,
+    TOOLTIP: 1200
 };
 
 /**

diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
 import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { TooltipBase } from './TooltipBase';
@@ -32,6 +32,13 @@ export const Tooltip = React.memo(
         const { ptm, cx, sx, isUnstyled } = TooltipBase.setMetaData(metaData);
 
         useHandleStyle(TooltipBase.css.styles, isUnstyled, { name: 'tooltip' });
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: props.closeOnEscape,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, 0]
+        });
         const elementRef = React.useRef(null);
         const textRef = React.useRef(null);
         const currentTargetRef = React.useRef(null);

diff --git a/components/lib/tooltip/TooltipBase.js b/components/lib/tooltip/TooltipBase.js
@@ -103,6 +103,7 @@ export const TooltipBase = ComponentBase.extend({
         autoZIndex: true,
         baseZIndex: 0,
         className: null,
+        closeOnEscape: false,
         content: null,
         disabled: false,
         event: null,

diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts
@@ -58,6 +58,11 @@ export interface TooltipOptions {
      * Style class of the tooltip.
      */
     className?: string | undefined;
+    /**
+     * Specifies if pressing escape key should hide the tooltip.
+     * @defaultValue false
+     */
+    closeOnEscape?: boolean | undefined;
     /**
      * When present, it specifies that the tooltip should be hidden.
      * @defaultValue false