fix(overlay): safari :focus-visible inconsistency when using overlay type modal #4912

mizgaionutalexandru · 2024-11-07T10:34:21Z

Description

This PR makes so that the tooltip isn't shown after a click overlay (e.g. popover) is opened in Safari in a type="modal" overlay, to have the same behaviour as in Chrome/Firefox. The inconsistency comes from the different heuristics Webkit uses to apply the focus-visible pseudo-class on elements.

Related issue(s)

[Bug]: sp-button receives focus indicator again in Safari iOS after overlay closes #4813

Motivation and context

The main motivation is consistency across browsers/engines.

How has this been tested?

These test cases have been tested in Safari as well as other supported browsers (e.g. Chrome).

Test case 1
1. Open the storybook on an overlay with type="modal" and a click and hover effect
2. Click on the button to open the popover (the 'click' content)
3. Click outside the popover to close it
4. Observe that the button does NOT have a focus ring around it and the tooltip does NOT open
Test case 2
1. Open the storybook on an overlay with type="modal" and a click and hover effect
2. Tab to the button
3. Observe that the tooltip is opened and the focus ring appears
4. Press 'Enter' to open the popover (the 'click' content)
5. Press 'Escape' to close the popover
6. Observe that the tooltip is opened and the focus ring appears
7. Repeat with Tab and Shift+Tab
Did it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?

Screenshots (if appropriate)

Before the fix:

before.mov

After the fix:

after.mov

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 · 2024-11-07T10:36:38Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

coveralls · 2024-11-07T10:41:48Z

Pull Request Test Coverage Report for Build 12986995120

Details

45 of 50 (90.0%) changed or added relevant lines in 4 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage decreased (-0.02%) to 98.189%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/overlay/src/HoverController.ts	30	35	85.71%

Totals
Change from base Build 12951330367:	-0.02%
Covered Lines:	33052
Relevant Lines:	33481

💛 - Coveralls

packages/overlay/src/HoverController.ts

github-actions · 2024-11-07T10:44:36Z

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.97	0.97
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	249.656 kB	236.132 kB 🏆	236.536 kB
Scripts	59.829 kB	54.253 kB 🏆	54.469 kB
Stylesheet	53.954 kB	47.346 kB 🏆	47.598 kB
Document	6.235 kB	5.513 kB	5.462 kB 🏆
Font	126.882 kB	126.606 kB 🏆	126.657 kB

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

github-actions · 2024-11-07T11:31:30Z

Tachometer results

Currently, no packages are changed by this PR...

mizgaionutalexandru · 2024-11-07T13:28:00Z

packages/overlay/test/overlay-trigger-hover-click.test.ts

+
+        // This fails but when manually tested it works in the browser
+        // in the test it shows that the tooltip is open (overlayTrigger.open === 'hover')
+        // expect(overlayTrigger.open).to.be.undefined;


Would appreciate any feedback/ideas on why would this be flaky, couldn't yet figure out why this would fail if manually tested it works.

iinnnteresting

mizgaionutalexandru · 2024-11-07T13:28:17Z

packages/overlay/test/overlay-trigger-hover-click.test.ts

+        await closed;
+
+        // Manually testing this in the browser doesn't fail without the handleKeyup method but it should
+        // expect(overlayTrigger.open).to.equal('hover');


Same thing here as in the previous test.

Rajdeepc · 2024-11-12T09:01:04Z

@mizgaionutalexandru Thanks for doing this! Shaping up well! By any chance were you able to test this in a touch interface?

mizgaionutalexandru · 2024-11-14T08:20:50Z

@mizgaionutalexandru Thanks for doing this! Shaping up well! By any chance were you able to test this in a touch interface?

Yes, I have tested this on mobile and tablet simulators as well as a real iPad device. It seems to work just fine. I don't know why the written tests fail though.

packages/overlay/src/HoverController.ts

TarunAdobe

This needs to be updated so as to make sure the hover tooltip opens in the following case on other browsers too.

Click on the trigger open the popover
press escape
(expect the hover to be opened again)

changeset-bot · 2025-01-13T14:29:41Z

⚠️ No Changeset found

Latest commit: 8bd89c7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

…5021)

packages/overlay/test/overlay.test.ts

rubencarvalho · 2025-01-14T10:29:03Z

If we can just remove that forgotten .only, I am good to merge this! 👍

rubencarvalho

Thank you for this! 😃

TarunAdobe

Tests are still failing when run parallel to other ones. They're only passing if we only run those tests separately. We'll have to take another look :(

mizgaionutalexandru commented Nov 7, 2024

View reviewed changes

packages/overlay/src/HoverController.ts Outdated Show resolved Hide resolved

mizgaionutalexandru commented Nov 7, 2024

View reviewed changes

mizgaionutalexandru marked this pull request as ready for review November 7, 2024 13:37

mizgaionutalexandru requested a review from a team as a code owner November 7, 2024 13:37

mizgaionutalexandru force-pushed the imizga/ios-focus-indicator branch from d33732c to 9c7e5eb Compare November 14, 2024 12:23

TarunAdobe reviewed Nov 22, 2024

View reviewed changes

packages/overlay/src/HoverController.ts Outdated Show resolved Hide resolved

TarunAdobe requested changes Nov 22, 2024

View reviewed changes

mizgaionutalexandru added 8 commits January 13, 2025 16:14

fix(overlay): safari focus-indicator

f7f1123

chore: revert lint changes

8385006

test: uncomment

fc66d6b

chore: moved SAFARI_FOCUS_RING_CLASS declaration

ee86368

fix: fixed test naming

73c9908

test: update comment

232cbf3

fix: not showing hover when closing popover with escape

5af409d

chore: remove flaky assertion

6f4fca8

mizgaionutalexandru force-pushed the imizga/ios-focus-indicator branch from 19f8cee to 6f4fca8 Compare January 13, 2025 14:29

mizgaionutalexandru and others added 2 commits January 14, 2025 09:20

chore: revert tests

fbde310

chore(overlay): add test for focus-ring consistency across browsers (#…

64601f3

…5021)

rubencarvalho reviewed Jan 14, 2025

View reviewed changes

packages/overlay/test/overlay.test.ts Outdated Show resolved Hide resolved

mizgaionutalexandru and others added 2 commits January 14, 2025 12:35

chore: remove .only

bbeb207

Merge branch 'main' into imizga/ios-focus-indicator

553000c

rubencarvalho approved these changes Jan 14, 2025

View reviewed changes

TarunAdobe requested changes Jan 14, 2025

View reviewed changes

TarunAdobe added 2 commits January 27, 2025 16:01

chore: separate test for focus-ring in overlay

4b05ae8

Merge branch 'main' into imizga/ios-focus-indicator

8bd89c7

TarunAdobe requested a review from rubencarvalho January 27, 2025 10:38

rubencarvalho approved these changes Jan 27, 2025

View reviewed changes

TarunAdobe approved these changes Jan 27, 2025

View reviewed changes

TarunAdobe merged commit 7a5f786 into main Jan 27, 2025
27 checks passed

TarunAdobe deleted the imizga/ios-focus-indicator branch January 27, 2025 13:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(overlay): safari :focus-visible inconsistency when using overlay type modal #4912

fix(overlay): safari :focus-visible inconsistency when using overlay type modal #4912

mizgaionutalexandru commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

coveralls commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

mizgaionutalexandru Nov 7, 2024

TarunAdobe Nov 14, 2024

mizgaionutalexandru Nov 7, 2024

Rajdeepc commented Nov 12, 2024

mizgaionutalexandru commented Nov 14, 2024

TarunAdobe left a comment

changeset-bot bot commented Jan 13, 2025 •

edited

Loading

rubencarvalho commented Jan 14, 2025

rubencarvalho left a comment

TarunAdobe left a comment

fix(overlay): safari :focus-visible inconsistency when using overlay type modal #4912

fix(overlay): safari :focus-visible inconsistency when using overlay type modal #4912

Conversation

mizgaionutalexandru commented Nov 7, 2024 • edited Loading

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

github-actions bot commented Nov 7, 2024 • edited Loading

Branch preview

Review the following VRT differences

coveralls commented Nov 7, 2024 • edited Loading

Pull Request Test Coverage Report for Build 12986995120

Details

💛 - Coveralls

github-actions bot commented Nov 7, 2024 • edited Loading

Lighthouse scores

Transfer Size

Request Count

github-actions bot commented Nov 7, 2024 • edited Loading

Tachometer results

mizgaionutalexandru Nov 7, 2024

Choose a reason for hiding this comment

TarunAdobe Nov 14, 2024

Choose a reason for hiding this comment

mizgaionutalexandru Nov 7, 2024

Choose a reason for hiding this comment

Rajdeepc commented Nov 12, 2024

mizgaionutalexandru commented Nov 14, 2024

TarunAdobe left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Jan 13, 2025 • edited Loading

⚠️ No Changeset found

rubencarvalho commented Jan 14, 2025

rubencarvalho left a comment

Choose a reason for hiding this comment

TarunAdobe left a comment

Choose a reason for hiding this comment

mizgaionutalexandru commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

coveralls commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

changeset-bot bot commented Jan 13, 2025 •

edited

Loading