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

Westbrook commented 1 month ago

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

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

Checklist

[x] I have signed the Adobe Open Source CLA.
[x] 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.
[x] I have read the CONTRIBUTING document.
[x] I have added tests to cover my changes.
[x] All new and existing tests passed.
[x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

github-actions[bot] commented 1 month ago

Branch preview

Visual regression test results

github-actions[bot] commented 1 month ago

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](https://github.com/GoogleChrome/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[bot] commented 1 month ago

Tachometer results

Chrome

## action-bar [_permalink_](#user-content-action-bar) ### 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_](#user-content-action-menu) ### 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_](#user-content-action-menu-test-directive) | 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_](#user-content-action-menu-test-lazy) | 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_](#user-content-action-menu-test-open-close-directive) | 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_](#user-content-action-menu-test-open-close) | 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_](#user-content-card) ### 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_](#user-content-combobox) ### 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_](#user-content-combobox-light-dom-test) | 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_](#user-content-illustrated-message) ### 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_](#user-content-menu) ### 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_](#user-content-overlay) ### 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_](#user-content-overlay-directive-test) | 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_](#user-content-overlay-element-test) | 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_](#user-content-overlay-lazy-test) | 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_](#user-content-picker) ### 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_](#user-content-popover) ### 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_](#user-content-slider) ### 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_](#user-content-split-button) ### 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_](#user-content-tooltip) ### 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_](#user-content-tooltip-test-directive) | 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_](#user-content-tooltip-test-element) | 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_](#user-content-tooltip-test-lazy) | 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_](#user-content-truncated) ### 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_](#user-content-action-bar) ### 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_](#user-content-action-menu) ### 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_](#user-content-action-menu-test-directive) | 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_](#user-content-action-menu-test-lazy) | 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_](#user-content-action-menu-test-open-close-directive) | 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_](#user-content-action-menu-test-open-close) | 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_](#user-content-card) ### 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_](#user-content-combobox) ### 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_](#user-content-combobox-light-dom-test) | 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_](#user-content-illustrated-message) ### 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_](#user-content-menu) ### 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_](#user-content-overlay) ### 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_](#user-content-overlay-directive-test) | 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_](#user-content-overlay-element-test) | 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_](#user-content-overlay-lazy-test) | 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_](#user-content-picker) ### 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_](#user-content-popover) ### 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_](#user-content-slider) ### 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_](#user-content-split-button) ### 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_](#user-content-tooltip) ### 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_](#user-content-tooltip-test-directive) | 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_](#user-content-tooltip-test-element) | 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_](#user-content-tooltip-test-lazy) | 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_](#user-content-truncated) ### 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 | - |

adobe / spectrum-web-components