Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip: Escape key not dismissing tooltip (WCAG 2.1 1.4.13) #6680

Closed
kishore5242 opened this issue May 27, 2024 · 2 comments · Fixed by #6687, leoo1992/GeradorQRCode#57 or leoo1992/GeradorQRCode#80 · May be fixed by nhattpn/BTL_LTNC#56
Closed
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA
Milestone

Comments

@kishore5242
Copy link

Describe the bug

The tooltip displayed may obscure adjacent contents and user may want to dismiss it by pressing Esc key without moving the mouse.

image

image

image

Prime React document also says that we support escape key.
image

Also as per WCAG 1.4.13 -
image

Reproducer

https://stackblitz.com/edit/vitejs-vite-sihhuh?file=src%2FApp.tsx

PrimeReact version

10.5.3

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

  1. Hover over a component that displays a Tooltip
  2. Try to dismiss the tooltip by pressing escape key

Expected behavior

escape key closes the Tooltip

@kishore5242 kishore5242 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 27, 2024
@melloware melloware added Component: Accessibility Issue or pull request is related to WCAG or ARIA and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels May 27, 2024
@melloware
Copy link
Member

Thanks for reporting. Definitely a missing feature.

@akshayaqburst
Copy link
Contributor

akshayaqburst commented May 27, 2024

Created a PR for the issue.
Anyway, We have to explicitly specify closeOnEscape in the tooltipOptions prop, which is already specified in the documentation.

            <InputText value={value} onChange={(e) => setValue(e.target.value)}  tooltip="tooltip content" tooltipOptions={{closeOnEscape: true}} />

akshayaqburst pushed a commit to qburst/primereact_qb_31 that referenced this issue May 27, 2024
akshayaqburst pushed a commit to qburst/primereact_qb_31 that referenced this issue May 27, 2024
akshayaqburst pushed a commit to qburst/primereact_qb_31 that referenced this issue May 27, 2024
akshayaqburst pushed a commit to qburst/primereact_qb_31 that referenced this issue May 27, 2024
akshayaqburst pushed a commit to qburst/primereact_qb_31 that referenced this issue May 27, 2024
@melloware melloware added this to the 10.7.0 milestone May 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment