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

fix(overlay): allow overlay to persist on hover #3706

Merged
merged 4 commits into from Oct 10, 2023

Conversation

najikahalsema
Copy link
Collaborator

@najikahalsema najikahalsema commented Oct 6, 2023

Description

A timer based approach to allowing hover content to persist so that a user can hover over it.

Related issue(s)

Motivation and context

Blocks Coachmark PR and Rich Tooltip PR. This also matches the expected behaviour for tooltips outlined by WACG.

How has this been tested?

  • Before
    1. Go here
    2. Hover over any of the trigger elements
    3. Attempt to hover over a tooltip
    4. See that it is not possible!
    5. You can also try the same test here
  • After
    1. Go here
    2. Hover over any of the trigger elements
    3. Attempt to hover over a tooltip
    4. See that it is now possible!
    5. Once you leave the triggerElement and go somewhere that isn't the overlay, the tooltip should close shortly after.
    6. You can try the same test here.

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@github-actions
Copy link

github-actions bot commented Oct 6, 2023

Tachometer results

Chrome

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 477 kB 152.03ms - 155.34ms - unsure 🔍
-2% - +1%
-2.46ms - +2.30ms
branch 472 kB 152.06ms - 155.48ms unsure 🔍
-1% - +2%
-2.30ms - +2.46ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 630 kB 300.38ms - 308.24ms - unsure 🔍
-2% - +2%
-5.42ms - +5.11ms
branch 625 kB 300.96ms - 307.97ms unsure 🔍
-2% - +2%
-5.11ms - +5.42ms
-

menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 452 kB 434.90ms - 439.90ms - faster ✔
0% - 2%
2.00ms - 11.04ms
branch 447 kB 440.15ms - 447.69ms slower ❌
0% - 3%
2.00ms - 11.04ms
-

overlay permalink

Version Bytes Avg Time vs remote vs branch
npm latest 478 kB 125.81ms - 129.38ms - unsure 🔍
-3% - +2%
-3.22ms - +2.11ms
branch 496 kB 126.17ms - 130.13ms unsure 🔍
-2% - +3%
-2.11ms - +3.22ms
-

picker permalink

Version Bytes Avg Time vs remote vs branch
npm latest 496 kB 1003.61ms - 1020.28ms - unsure 🔍
-2% - +1%
-20.15ms - +5.75ms
branch 491 kB 1009.24ms - 1029.06ms unsure 🔍
-1% - +2%
-5.75ms - +20.15ms
-

popover permalink

Version Bytes Avg Time vs remote vs branch
npm latest 374 kB 45.77ms - 47.21ms - unsure 🔍
-1% - +3%
-0.65ms - +1.26ms
branch 369 kB 45.55ms - 46.82ms unsure 🔍
-3% - +1%
-1.26ms - +0.65ms
-

split-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 701 kB 1906.10ms - 1909.88ms - unsure 🔍
-0% - +0%
-2.71ms - +4.37ms
branch 695 kB 1904.17ms - 1910.15ms unsure 🔍
-0% - +0%
-4.37ms - +2.71ms
-

tooltip permalink

Version Bytes Avg Time vs remote vs branch
npm latest 558 kB 107.82ms - 110.36ms - unsure 🔍
-3% - +1%
-2.93ms - +0.69ms
branch 551 kB 108.92ms - 111.49ms unsure 🔍
-1% - +3%
-0.69ms - +2.93ms
-
Firefox

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 477 kB 295.96ms - 319.04ms - unsure 🔍
-6% - +4%
-18.14ms - +13.10ms
branch 472 kB 299.49ms - 320.55ms unsure 🔍
-4% - +6%
-13.10ms - +18.14ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 630 kB 435.68ms - 461.16ms - unsure 🔍
-4% - +5%
-16.19ms - +20.95ms
branch 625 kB 432.54ms - 459.54ms unsure 🔍
-5% - +4%
-20.95ms - +16.19ms
-

menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 452 kB 641.36ms - 671.52ms - unsure 🔍
-3% - +3%
-22.83ms - +19.31ms
branch 447 kB 643.49ms - 672.91ms unsure 🔍
-3% - +3%
-19.31ms - +22.83ms
-

overlay permalink

Version Bytes Avg Time vs remote vs branch
npm latest 570 kB 200.68ms - 214.80ms - unsure 🔍
-9% - +1%
-19.25ms - +2.09ms
branch 565 kB 208.32ms - 224.32ms unsure 🔍
-1% - +9%
-2.09ms - +19.25ms
-

picker permalink

Version Bytes Avg Time vs remote vs branch
npm latest 496 kB 1130.54ms - 1165.98ms - unsure 🔍
-2% - +2%
-23.58ms - +23.30ms
branch 491 kB 1133.05ms - 1163.75ms unsure 🔍
-2% - +2%
-23.30ms - +23.58ms
-

popover permalink

Version Bytes Avg Time vs remote vs branch
npm latest 374 kB 101.24ms - 115.12ms - unsure 🔍
-15% - +3%
-17.68ms - +4.28ms
branch 369 kB 106.38ms - 123.38ms unsure 🔍
-4% - +17%
-4.28ms - +17.68ms
-

split-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 701 kB 1616.75ms - 1627.13ms - unsure 🔍
-0% - +1%
-5.20ms - +8.28ms
branch 695 kB 1616.10ms - 1624.70ms unsure 🔍
-1% - +0%
-8.28ms - +5.20ms
-

tooltip permalink

Version Bytes Avg Time vs remote vs branch
npm latest 635 kB 163.73ms - 168.03ms - unsure 🔍
-4% - +2%
-7.07ms - +3.27ms
branch 629 kB 163.08ms - 172.48ms unsure 🔍
-2% - +4%
-3.27ms - +7.07ms
-

await nextFrame();
await nextFrame();
// allow "hover" content to close by waiting for its timer to complete
await aTimeout(400);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the tooltip should be “closed” at this point, could we leverage an sp-closed listener instead?

Copy link
Collaborator

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's double check that the tests you change continues to test what it did while adapting to this new feature. At least the comments seem out of date, but it's not clear that we're serving both the original and new intent appropriately.

packages/overlay/test/overlay.test.ts Outdated Show resolved Hide resolved
@@ -53,6 +53,7 @@ import { PlacementController } from './PlacementController.js';
import styles from './overlay.css.js';

const LONGPRESS_DURATION = 300;
const HOVER_DELAY = 300;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how did you arrive at the 300ms duration? what likelihood is this going to be a tunable value?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great question! And great catch! I actually just picked an arbitrary number. I think I started with 400 and subconsciously changed it to 300 when I put this variable next to the longpress one 😅 I'll circle back on this and put some rationale behind this number and change it if needed!

Copy link
Collaborator

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work here! That removal of the old half logic might make this a new loss in end user JS, too 🚀

:shipit:

@Westbrook Westbrook merged commit 7707040 into main Oct 10, 2023
47 checks passed
@Westbrook Westbrook deleted the halsema/overlay-hover-handler branch October 10, 2023 14:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug][a11y]: Tooltip content not hoverable
3 participants