fix(overlay): ensure hint Overlays within shadow roots open as expected #4443

Westbrook · 2024-05-10T20:20:01Z

Description

type="hint" Overlays should query their target not the document.activeElement when deciding whether there is :focus-visible enough for them to open.

fixes #4482

How has this been tested?

Test case 1
1. Go here
2. Tab into a button with a self managed Tooltip
3. See that the Tooltip actual opens

Types of changes

Bug fix (non-breaking change which fixes an issue)

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

github-actions · 2024-05-10T20:22:36Z

Branch preview

Visual regression test results

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

github-actions · 2024-05-10T20:24:21Z

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.99
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	221.046 kB	210.506 kB	210.275 kB 🏆
Scripts	53.315 kB	48.215 kB	48.099 kB 🏆
Stylesheet	35.053 kB	30.493 kB	30.37 kB 🏆
Document	5.895 kB	5.166 kB 🏆	5.184 kB
Font	126.783 kB	126.632 kB	126.622 kB 🏆

Request Count

Category	Latest	Main	Branch
Total	45	45	45
Scripts	37	37	37
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

github-actions · 2024-05-10T20:58:35Z

Tachometer results

Chrome

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	484 kB	49.96ms - 51.78ms	-	faster ✔ 3% - 8% 1.58ms - 4.36ms
branch	472 kB	52.79ms - 54.89ms	slower ❌ 3% - 9% 1.58ms - 4.36ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	647 kB	130.46ms - 132.70ms	-	faster ✔ 7% - 9% 9.39ms - 13.39ms
branch	634 kB	141.32ms - 144.63ms	slower ❌ 7% - 10% 9.39ms - 13.39ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	604 kB	61.24ms - 62.21ms	-	faster ✔ 6% - 8% 3.62ms - 5.39ms
branch	591 kB	65.49ms - 66.98ms	slower ❌ 6% - 9% 3.62ms - 5.39ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	603 kB	59.55ms - 60.61ms	-	faster ✔ 5% - 7% 2.97ms - 4.74ms
branch	590 kB	63.23ms - 64.64ms	slower ❌ 5% - 8% 2.97ms - 4.74ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	789 kB	1870.60ms - 1874.02ms	-	unsure 🔍 -0% - +0% -3.04ms - +1.42ms
branch	777 kB	1871.69ms - 1874.55ms	unsure 🔍 -0% - +0% -1.42ms - +3.04ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	788 kB	1858.20ms - 1861.50ms	-	unsure 🔍 -0% - +0% -1.62ms - +2.75ms
branch	775 kB	1857.85ms - 1860.72ms	unsure 🔍 -0% - +0% -2.75ms - +1.62ms	-

card permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	502 kB	37.58ms - 38.48ms	-	faster ✔ 0% - 3% 0.16ms - 1.30ms
branch	489 kB	38.41ms - 39.11ms	slower ❌ 0% - 3% 0.16ms - 1.30ms	-

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	35.23ms - 35.64ms	-	faster ✔ 5% - 7% 1.75ms - 2.46ms
branch	697 kB	37.25ms - 37.83ms	slower ❌ 5% - 7% 1.75ms - 2.46ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	383.51ms - 390.83ms	-	faster ✔ 2% - 4% 6.75ms - 15.77ms
branch	697 kB	395.79ms - 401.07ms	slower ❌ 2% - 4% 6.75ms - 15.77ms	-

illustrated-message permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	404 kB	13.48ms - 13.70ms	-	faster ✔ 1% - 4% 0.19ms - 0.53ms
branch	393 kB	13.82ms - 14.08ms	slower ❌ 1% - 4% 0.19ms - 0.53ms	-

menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	475 kB	204.40ms - 208.92ms	-	faster ✔ 1% - 4% 3.09ms - 8.34ms
branch	463 kB	211.04ms - 213.71ms	slower ❌ 1% - 4% 3.09ms - 8.34ms	-

overlay permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	678 kB	419.27ms - 421.96ms	-	faster ✔ 1% - 2% 4.87ms - 9.73ms
branch	665 kB	425.89ms - 429.94ms	slower ❌ 1% - 2% 4.87ms - 9.73ms	-

directive-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	790 kB	21.97ms - 22.36ms	-	faster ✔ 8% - 11% 1.98ms - 2.62ms
branch	777 kB	24.21ms - 24.72ms	slower ❌ 9% - 12% 1.98ms - 2.62ms	-

element-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	763 kB	344.10ms - 347.60ms	-	faster ✔ 1% - 3% 5.18ms - 9.74ms
branch	750 kB	351.84ms - 354.77ms	slower ❌ 1% - 3% 5.18ms - 9.74ms	-

lazy-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	561 kB	40.50ms - 41.40ms	-	faster ✔ 5% - 8% 2.36ms - 3.66ms
branch	548 kB	43.50ms - 44.43ms	slower ❌ 6% - 9% 2.36ms - 3.66ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	513 kB	518.84ms - 525.75ms	-	faster ✔ 3% - 5% 14.34ms - 25.10ms
branch	500 kB	537.89ms - 546.14ms	slower ❌ 3% - 5% 14.34ms - 25.10ms	-

popover permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	384 kB	11.36ms - 11.47ms	-	faster ✔ 2% - 7% 0.23ms - 0.81ms
branch	372 kB	11.65ms - 12.22ms	slower ❌ 2% - 7% 0.23ms - 0.81ms	-

slider permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	74.44ms - 76.08ms	-	faster ✔ 3% - 7% 2.54ms - 5.22ms
branch	467 kB	78.08ms - 80.20ms	slower ❌ 3% - 7% 2.54ms - 5.22ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	723 kB	1856.82ms - 1860.17ms	-	unsure 🔍 -0% - +0% -3.77ms - +1.45ms
branch	710 kB	1857.65ms - 1861.65ms	unsure 🔍 -0% - +0% -1.45ms - +3.77ms	-

tooltip permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	550 kB	33.16ms - 33.88ms	-	faster ✔ 3% - 6% 1.09ms - 2.12ms
branch	538 kB	34.75ms - 35.50ms	slower ❌ 3% - 6% 1.09ms - 2.12ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	543 kB	22.93ms - 23.40ms	-	faster ✔ 5% - 8% 1.25ms - 2.04ms
branch	531 kB	24.49ms - 25.12ms	slower ❌ 5% - 9% 1.25ms - 2.04ms	-

test-element permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	656 kB	51.26ms - 52.19ms	-	faster ✔ 3% - 6% 1.88ms - 3.19ms
branch	643 kB	53.80ms - 54.72ms	slower ❌ 4% - 6% 1.88ms - 3.19ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	632 kB	41.55ms - 42.75ms	-	faster ✔ 6% - 9% 2.60ms - 4.21ms
branch	619 kB	45.02ms - 46.10ms	slower ❌ 6% - 10% 2.60ms - 4.21ms	-

truncated permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	528 kB	54.43ms - 56.39ms	-	faster ✔ 2% - 6% 1.10ms - 3.32ms
branch	516 kB	57.09ms - 58.15ms	slower ❌ 2% - 6% 1.10ms - 3.32ms	-

Firefox

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	484 kB	111.07ms - 116.01ms	-	faster ✔ 4% - 11% 5.31ms - 13.29ms
branch	472 kB	119.70ms - 125.98ms	slower ❌ 5% - 12% 5.31ms - 13.29ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	647 kB	278.95ms - 282.01ms	-	faster ✔ 12% - 14% 38.02ms - 44.26ms
branch	634 kB	318.90ms - 324.34ms	slower ❌ 14% - 16% 38.02ms - 44.26ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	604 kB	131.96ms - 134.76ms	-	unsure 🔍 -1% - +1% -1.98ms - +1.22ms
branch	591 kB	132.96ms - 134.52ms	unsure 🔍 -1% - +1% -1.22ms - +1.98ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	603 kB	154.33ms - 160.07ms	-	slower ❌ 9% - 15% 12.55ms - 20.29ms
branch	590 kB	138.18ms - 143.38ms	faster ✔ 8% - 13% 12.55ms - 20.29ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	789 kB	1908.90ms - 1919.94ms	-	slower ❌ 1% - 2% 19.61ms - 31.39ms
branch	777 kB	1886.86ms - 1890.98ms	faster ✔ 1% - 2% 19.61ms - 31.39ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	788 kB	1884.29ms - 1889.63ms	-	unsure 🔍 -0% - +0% -5.75ms - +2.19ms
branch	775 kB	1885.81ms - 1891.67ms	unsure 🔍 -0% - +0% -2.19ms - +5.75ms	-

card permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	502 kB	76.22ms - 83.22ms	-	unsure 🔍 -6% - +5% -4.93ms - +4.13ms
branch	489 kB	77.25ms - 82.99ms	unsure 🔍 -5% - +6% -4.13ms - +4.93ms	-

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	60.55ms - 64.85ms	-	unsure 🔍 -1% - +6% -0.77ms - +3.73ms
branch	697 kB	60.55ms - 61.89ms	unsure 🔍 -6% - +1% -3.73ms - +0.77ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	728.73ms - 738.67ms	-	slower ❌ 0% - 4% 2.65ms - 28.03ms
branch	697 kB	706.69ms - 730.03ms	faster ✔ 0% - 4% 2.65ms - 28.03ms	-

illustrated-message permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	404 kB	25.51ms - 26.77ms	-	unsure 🔍 -4% - +3% -1.09ms - +0.69ms
branch	393 kB	25.71ms - 26.97ms	unsure 🔍 -3% - +4% -0.69ms - +1.09ms	-

menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	475 kB	430.68ms - 439.96ms	-	faster ✔ 1% - 5% 5.31ms - 22.37ms
branch	463 kB	442.00ms - 456.32ms	slower ❌ 1% - 5% 5.31ms - 22.37ms	-

overlay permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	770 kB	629.05ms - 645.71ms	-	slower ❌ 2% - 5% 15.00ms - 33.00ms
branch	757 kB	609.97ms - 616.79ms	faster ✔ 2% - 5% 15.00ms - 33.00ms	-

directive-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	773 kB	45.97ms - 46.43ms	-	faster ✔ 4% - 6% 1.93ms - 3.19ms
branch	761 kB	48.17ms - 49.35ms	slower ❌ 4% - 7% 1.93ms - 3.19ms	-

element-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	763 kB	655.34ms - 662.06ms	-	slower ❌ 5% - 6% 28.80ms - 36.68ms
branch	750 kB	623.90ms - 628.02ms	faster ✔ 4% - 6% 28.80ms - 36.68ms	-

lazy-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	561 kB	96.64ms - 105.16ms	-	slower ❌ 3% - 12% 2.61ms - 11.23ms
branch	548 kB	93.34ms - 94.62ms	faster ✔ 3% - 11% 2.61ms - 11.23ms	-

picker permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	513 kB	1016.45ms - 1027.55ms	-	faster ✔ 4% - 8% 46.97ms - 85.95ms
branch	500 kB	1069.78ms - 1107.14ms	slower ❌ 5% - 8% 46.97ms - 85.95ms	-

popover permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	384 kB	29.81ms - 33.51ms	-	unsure 🔍 -9% - +8% -2.82ms - +2.50ms
branch	372 kB	29.91ms - 33.73ms	unsure 🔍 -8% - +9% -2.50ms - +2.82ms	-

slider permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	164.02ms - 169.26ms	-	faster ✔ 1% - 5% 1.66ms - 9.30ms
branch	467 kB	169.34ms - 174.90ms	slower ❌ 1% - 6% 1.66ms - 9.30ms	-

split-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	723 kB	1879.16ms - 1883.36ms	-	unsure 🔍 -0% - +0% -0.52ms - +5.20ms
branch	710 kB	1876.97ms - 1880.87ms	unsure 🔍 -0% - +0% -5.20ms - +0.52ms	-

tooltip permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	656 kB	81.03ms - 85.33ms	-	slower ❌ 10% - 17% 7.37ms - 12.31ms
branch	643 kB	72.13ms - 74.55ms	faster ✔ 9% - 15% 7.37ms - 12.31ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	533 kB	46.75ms - 48.37ms	-	faster ✔ 20% - 27% 11.89ms - 17.71ms
branch	521 kB	59.56ms - 65.16ms	slower ❌ 25% - 37% 11.89ms - 17.71ms	-

test-element permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	656 kB	116.95ms - 123.45ms	-	faster ✔ 2% - 9% 2.94ms - 11.78ms
branch	643 kB	124.56ms - 130.56ms	slower ❌ 2% - 10% 2.94ms - 11.78ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	632 kB	94.66ms - 99.74ms	-	faster ✔ 2% - 8% 1.98ms - 8.38ms
branch	619 kB	100.44ms - 104.32ms	slower ❌ 2% - 9% 1.98ms - 8.38ms	-

truncated permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	528 kB	102.56ms - 109.72ms	-	unsure 🔍 -8% - +1% -8.95ms - +1.35ms
branch	516 kB	106.24ms - 113.64ms	unsure 🔍 -1% - +9% -1.35ms - +8.95ms	-

Rajdeepc

Thanks for landing this! Much Appreciated

Westbrook requested a review from a team May 10, 2024 20:20

Westbrook force-pushed the tooltip-trigger branch 2 times, most recently from a7e9896 to 1202812 Compare May 20, 2024 13:21

fix(overlay): ensure hint Overlays within shadow roots open as expected

719f253

Westbrook force-pushed the tooltip-trigger branch from 1202812 to 719f253 Compare May 22, 2024 11:35

mjawili mentioned this pull request May 22, 2024

[Bug]: Tooltip does not appear on keyboard focus #4482

Closed

1 task

Rajdeepc approved these changes May 24, 2024

View reviewed changes

Westbrook merged commit 7dd64b9 into main May 24, 2024
58 checks passed

Westbrook deleted the tooltip-trigger branch May 24, 2024 13:20

fix(overlay): ensure hint Overlays within shadow roots open as expected #4443

fix(overlay): ensure hint Overlays within shadow roots open as expected #4443

Conversation

Westbrook commented May 10, 2024 • edited

Description

How has this been tested?

Types of changes

Checklist

github-actions bot commented May 10, 2024 • edited

Branch preview

github-actions bot commented May 10, 2024 • edited

Lighthouse scores

Transfer Size

Request Count

github-actions bot commented May 10, 2024 • edited

Tachometer results

action-bar permalink

basic-test

action-menu permalink

test-basic

test-directive permalink

test-lazy permalink

test-open-close-directive permalink

test-open-close permalink

card permalink

test-basic

combobox permalink

basic-test

light-dom-test permalink

illustrated-message permalink

test-basic

menu permalink

test-basic

overlay permalink

basic-test

directive-test permalink

element-test permalink

lazy-test permalink

picker permalink

basic-test

popover permalink

test-basic

slider permalink

test-basic

split-button permalink

basic-test

tooltip permalink

test-basic

test-directive permalink

test-element permalink

test-lazy permalink

truncated permalink

basic-test

action-bar permalink

basic-test

action-menu permalink

test-basic

test-directive permalink

test-lazy permalink

test-open-close-directive permalink

test-open-close permalink

card permalink

test-basic

combobox permalink

basic-test

light-dom-test permalink

illustrated-message permalink

test-basic

menu permalink

test-basic

overlay permalink

basic-test

directive-test permalink

element-test permalink

lazy-test permalink

picker permalink

basic-test

popover permalink

test-basic

slider permalink

Westbrook commented May 10, 2024 •

edited

github-actions bot commented May 10, 2024 •

edited

github-actions bot commented May 10, 2024 •

edited

github-actions bot commented May 10, 2024 •

edited