Popover: Support WCAG - Hoverable#32934
Popover: Support WCAG - Hoverable#32934r-farkhutdinov wants to merge 4 commits intoDevExpress:26_1from
Conversation
There was a problem hiding this comment.
Pull request overview
Adds WCAG-oriented interaction coverage for Popover/Tooltip and introduces new Popover hover behavior so hover-triggered overlays can remain open when the pointer moves between the target and the overlay content.
Changes:
- Refactors Popover/Tooltip accessibility tests into WCAG “dismissible” / “hoverable” submodules and adds new hoverable test scenarios.
- Implements hoverable overlay behavior in internal Popover logic (including a small default hide delay for hover-hide events).
- Adds React Storybook stories demonstrating WCAG hoverable Tooltip behavior (including delayed hide/show configuration).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/devextreme/testing/tests/DevExpress.ui.widgets/tooltip.tests.js | Adds WCAG-focused Tooltip tests (dismissible + hoverable) and minor selector cleanup. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/popover.tests.js | Adds WCAG-focused Popover tests (dismissible + hoverable), including relatedTarget scenario. |
| packages/devextreme/js/__internal/ui/popover/m_popover.ts | Adds hoverable overlay event handling + default hover-hide delay logic. |
| apps/react-storybook/stories/tooltip/Tooltip.stories.tsx | New Storybook stories showcasing WCAG hoverable Tooltip behavior. |
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Adds WCAG 2.1 “Hoverable” behavior support for Popover (and Tooltip via shared popover logic), ensuring hover-triggered overlays don’t disappear when the pointer moves between the target and the overlay content.
Changes:
- Implement hoverable overlay behavior in the internal Popover logic by wiring hover-in/out handlers on the overlay content and introducing a small default hide delay for hover-hide events.
- Reorganize and extend QUnit accessibility tests for Tooltip and Popover to cover WCAG “dismissible” and “hoverable” expectations.
- Add React Storybook stories demonstrating hoverable tooltip behavior (including show/hide delays).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/devextreme/testing/tests/DevExpress.ui.widgets/tooltip.tests.js | Adds WCAG “dismissible” + “hoverable” test coverage for Tooltip and minor selector refactor. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/popover.tests.js | Adds WCAG “dismissible” + “hoverable” test coverage for Popover. |
| packages/devextreme/js/__internal/ui/popover/m_popover.ts | Implements hoverable overlay behavior and default hover-hide delay in Popover event handling. |
| apps/react-storybook/stories/tooltip/Tooltip.stories.tsx | Adds Storybook demos for hoverable Tooltip behavior (with and without delay). |
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Adds WCAG “hoverable” support for Popover (and Tooltip via inheritance) so the overlay stays open when the pointer moves between the target and the overlay content, and strengthens accessibility-related coverage/docs around that behavior.
Changes:
- Implement hoverable overlay behavior in internal Popover logic (overlay content hover-in/out handling + default hover-hide delay).
- Reorganize/add QUnit accessibility tests for WCAG “dismissible” and “hoverable” behaviors for Popover and Tooltip.
- Add React Storybook stories to manually validate Tooltip hoverable behavior (with and without delays).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/devextreme/testing/tests/DevExpress.ui.widgets/tooltip.tests.js | Adds WCAG “dismissible” + “hoverable” test coverage for Tooltip. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/popover.tests.js | Adds WCAG “dismissible” + “hoverable” test coverage for Popover, including delay/cancel scenarios. |
| packages/devextreme/js/__internal/ui/popover/m_popover.ts | Implements hoverable behavior by binding hover-in/out handlers to overlay content and introducing a small default hover-hide delay. |
| apps/react-storybook/stories/tooltip/Tooltip.stories.tsx | Adds Storybook examples to manually verify hoverable Tooltip behavior and delay interactions. |
You can also share your feedback on Copilot code review. Take the survey.
packages/devextreme/testing/tests/DevExpress.ui.widgets/tooltip.tests.js
Show resolved
Hide resolved
No description provided.