chore(overlay): overlay-trigger adds receives focus attribute

Rajdeepc commented 3 months ago

Description

Currently if we use a slotted button content in sp-dialog-wrapper, the focus is moving in inside a overlay-trigger since we don't bring in receivesFocus from overlay. Adding receivesFocus makes sure that the focus can be switched off inside the dialog components

Related issue(s)

4562

Motivation and context

How has this been tested?

[x] Test case 1
1. Go here
2. Click on Open
3. Press ESC and close the Dialog
4. Click or Press Enter
5. See there is no focus on any element

Screenshots (if appropriate)

Types of changes

[x] 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

[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.
[ ] 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

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[bot] commented 3 months ago

Branch preview

Visual regression test results

github-actions[bot] commented 3 months 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.722 kB	210.72 kB 🏆	210.819 kB
Scripts	53.878 kB	48.29 kB 🏆	48.471 kB
Stylesheet	34.887 kB	30.393 kB	30.388 kB 🏆
Document	6.008 kB	5.30 kB 🏆	5.301 kB
Font	126.949 kB	126.737 kB	126.659 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 3 months ago

Tachometer results

Chrome

## action-bar [_permalink_](#user-content-action-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 485 kB | 51.38ms - 53.89ms | - | faster ✔
1% - 7%
0.40ms - 3.93ms | | branch | 472 kB | 53.55ms - 56.05ms | slower ❌
1% - 8%
0.40ms - 3.93ms | - | ## action-menu [_permalink_](#user-content-action-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 647 kB | 136.04ms - 139.31ms | - | faster ✔
5% - 8%
6.71ms - 11.72ms | | branch | 634 kB | 144.99ms - 148.79ms | slower ❌
5% - 9%
6.71ms - 11.72ms | - | ### test-directive [_permalink_](#user-content-action-menu-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 604 kB | 62.82ms - 64.39ms | - | faster ✔
6% - 10%
3.87ms - 7.33ms | | branch | 591 kB | 67.66ms - 70.74ms | slower ❌
6% - 12%
3.87ms - 7.33ms | - | ### test-lazy [_permalink_](#user-content-action-menu-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 603 kB | 61.62ms - 63.03ms | - | faster ✔
4% - 7%
2.51ms - 4.94ms | | branch | 590 kB | 65.05ms - 67.04ms | slower ❌
4% - 8%
2.51ms - 4.94ms | - | ### test-open-close-directive [_permalink_](#user-content-action-menu-test-open-close-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 790 kB | 1874.52ms - 1877.60ms | - | unsure 🔍
-0% - +0%
-3.58ms - +0.84ms | | branch | 777 kB | 1875.84ms - 1879.02ms | unsure 🔍
-0% - +0%
-0.84ms - +3.58ms | - | ### test-open-close [_permalink_](#user-content-action-menu-test-open-close) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 788 kB | 1860.66ms - 1863.60ms | - | unsure 🔍
-0% - +0%
-2.27ms - +2.01ms | | branch | 775 kB | 1860.70ms - 1863.81ms | unsure 🔍
-0% - +0%
-2.01ms - +2.27ms | - | ## combobox [_permalink_](#user-content-combobox) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 36.25ms - 36.84ms | - | faster ✔
5% - 8%
2.10ms - 3.25ms | | branch | 697 kB | 38.72ms - 39.72ms | slower ❌
6% - 9%
2.10ms - 3.25ms | - | ### light-dom-test [_permalink_](#user-content-combobox-light-dom-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 397.71ms - 405.42ms | - | faster ✔
2% - 4%
6.99ms - 16.95ms | | branch | 698 kB | 410.39ms - 416.68ms | slower ❌
2% - 4%
6.99ms - 16.95ms | - | ## contextual-help [_permalink_](#user-content-contextual-help) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 641 kB | 51.25ms - 53.29ms | - | faster ✔
3% - 8%
1.81ms - 4.32ms | | branch | 628 kB | 54.59ms - 56.07ms | slower ❌
3% - 8%
1.81ms - 4.32ms | - | ## menu [_permalink_](#user-content-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 476 kB | 214.67ms - 219.05ms | - | faster ✔
1% - 4%
2.96ms - 8.63ms | | branch | 463 kB | 220.85ms - 224.45ms | slower ❌
1% - 4%
2.96ms - 8.63ms | - | ## overlay [_permalink_](#user-content-overlay) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 675 kB | 428.10ms - 432.43ms | - | faster ✔
1% - 2%
2.70ms - 10.18ms | | branch | 667 kB | 433.66ms - 439.76ms | slower ❌
1% - 2%
2.70ms - 10.18ms | - | ### directive-test [_permalink_](#user-content-overlay-directive-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 790 kB | 22.68ms - 23.16ms | - | faster ✔
7% - 10%
1.68ms - 2.41ms | | branch | 776 kB | 24.70ms - 25.25ms | slower ❌
7% - 11%
1.68ms - 2.41ms | - | ### element-test [_permalink_](#user-content-overlay-element-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 764 kB | 352.85ms - 357.57ms | - | faster ✔
1% - 3%
4.35ms - 12.21ms | | branch | 750 kB | 360.36ms - 366.63ms | slower ❌
1% - 3%
4.35ms - 12.21ms | - | ### lazy-test [_permalink_](#user-content-overlay-lazy-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 41.88ms - 42.92ms | - | faster ✔
5% - 8%
2.11ms - 3.64ms | | branch | 548 kB | 44.71ms - 45.84ms | slower ❌
5% - 9%
2.11ms - 3.64ms | - | ## picker [_permalink_](#user-content-picker) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 513 kB | 535.46ms - 543.88ms | - | faster ✔
1% - 4%
7.76ms - 19.73ms | | branch | 500 kB | 549.16ms - 557.66ms | slower ❌
1% - 4%
7.76ms - 19.73ms | - | ## popover [_permalink_](#user-content-popover) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 384 kB | 11.70ms - 11.87ms | - | faster ✔
1% - 3%
0.06ms - 0.30ms | | branch | 372 kB | 11.88ms - 12.05ms | slower ❌
1% - 3%
0.06ms - 0.30ms | - | ## split-button [_permalink_](#user-content-split-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 723 kB | 1861.05ms - 1865.21ms | - | unsure 🔍
-0% - +0%
-3.46ms - +2.38ms | | branch | 710 kB | 1861.61ms - 1865.73ms | unsure 🔍
-0% - +0%
-2.38ms - +3.46ms | - | ## tooltip [_permalink_](#user-content-tooltip) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 34.17ms - 34.92ms | - | faster ✔
4% - 6%
1.27ms - 2.34ms | | branch | 538 kB | 35.96ms - 36.74ms | slower ❌
4% - 7%
1.27ms - 2.34ms | - | ### test-directive [_permalink_](#user-content-tooltip-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 545 kB | 23.42ms - 24.05ms | - | faster ✔
5% - 9%
1.25ms - 2.21ms | | branch | 521 kB | 25.10ms - 25.83ms | slower ❌
5% - 9%
1.25ms - 2.21ms | - | ### test-element [_permalink_](#user-content-tooltip-test-element) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 52.94ms - 54.16ms | - | faster ✔
3% - 6%
1.63ms - 3.32ms | | branch | 643 kB | 55.44ms - 56.62ms | slower ❌
3% - 6%
1.63ms - 3.32ms | - | ### test-lazy [_permalink_](#user-content-tooltip-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 632 kB | 42.39ms - 43.19ms | - | faster ✔
7% - 11%
3.44ms - 5.18ms | | branch | 619 kB | 46.33ms - 47.87ms | slower ❌
8% - 12%
3.44ms - 5.18ms | - | ## truncated [_permalink_](#user-content-truncated) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 529 kB | 59.97ms - 61.43ms | - | faster ✔
2% - 5%
1.23ms - 3.07ms | | branch | 516 kB | 62.28ms - 63.42ms | slower ❌
2% - 5%
1.23ms - 3.07ms | - |

Firefox

## action-bar [_permalink_](#user-content-action-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 485 kB | 114.75ms - 120.29ms | - | faster ✔
2% - 8%
1.98ms - 10.38ms | | branch | 472 kB | 120.54ms - 126.86ms | slower ❌
2% - 9%
1.98ms - 10.38ms | - | ## action-menu [_permalink_](#user-content-action-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 647 kB | 288.02ms - 290.78ms | - | faster ✔
12% - 14%
39.18ms - 45.22ms | | branch | 634 kB | 328.91ms - 334.29ms | slower ❌
14% - 16%
39.18ms - 45.22ms | - | ### test-directive [_permalink_](#user-content-action-menu-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 604 kB | 137.63ms - 141.21ms | - | unsure 🔍
-1% - +2%
-1.72ms - +2.80ms | | branch | 591 kB | 137.50ms - 140.26ms | unsure 🔍
-2% - +1%
-2.80ms - +1.72ms | - | ### test-lazy [_permalink_](#user-content-action-menu-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 603 kB | 139.12ms - 146.84ms | - | unsure 🔍
-0% - +6%
-0.25ms - +8.57ms | | branch | 590 kB | 136.68ms - 140.96ms | unsure 🔍
-6% - +0%
-8.57ms - +0.25ms | - | ### test-open-close-directive [_permalink_](#user-content-action-menu-test-open-close-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 790 kB | 1896.39ms - 1904.17ms | - | slower ❌
0% - 1%
3.06ms - 11.66ms | | branch | 777 kB | 1891.08ms - 1894.76ms | faster ✔
0% - 1%
3.06ms - 11.66ms | - | ### test-open-close [_permalink_](#user-content-action-menu-test-open-close) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 788 kB | 1890.56ms - 1896.60ms | - | unsure 🔍
-0% - +0%
-4.68ms - +3.68ms | | branch | 775 kB | 1891.19ms - 1896.97ms | unsure 🔍
-0% - +0%
-3.68ms - +4.68ms | - | ## combobox [_permalink_](#user-content-combobox) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 62.05ms - 63.83ms | - | unsure 🔍
-2% - +1%
-1.04ms - +0.88ms | | branch | 697 kB | 62.66ms - 63.38ms | unsure 🔍
-1% - +2%
-0.88ms - +1.04ms | - | ### light-dom-test [_permalink_](#user-content-combobox-light-dom-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 710 kB | 769.91ms - 786.73ms | - | slower ❌
3% - 6%
20.63ms - 45.45ms | | branch | 698 kB | 736.16ms - 754.40ms | faster ✔
3% - 6%
20.63ms - 45.45ms | - | ## contextual-help [_permalink_](#user-content-contextual-help) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 641 kB | 110.63ms - 115.93ms | - | faster ✔
4% - 11%
4.22ms - 13.70ms | | branch | 628 kB | 118.31ms - 126.17ms | slower ❌
4% - 12%
4.22ms - 13.70ms | - | ## menu [_permalink_](#user-content-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 476 kB | 444.09ms - 460.15ms | - | unsure 🔍
-4% - +0%
-18.90ms - +1.10ms | | branch | 463 kB | 455.06ms - 466.98ms | unsure 🔍
-0% - +4%
-1.10ms - +18.90ms | - | ## overlay [_permalink_](#user-content-overlay) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 770 kB | 698.22ms - 718.86ms | - | slower ❌
6% - 9%
37.37ms - 61.91ms | | branch | 757 kB | 652.26ms - 665.54ms | faster ✔
5% - 9%
37.37ms - 61.91ms | - | ### directive-test [_permalink_](#user-content-overlay-directive-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 774 kB | 47.62ms - 48.26ms | - | faster ✔
4% - 7%
2.20ms - 3.48ms | | branch | 761 kB | 50.22ms - 51.34ms | slower ❌
5% - 7%
2.20ms - 3.48ms | - | ### element-test [_permalink_](#user-content-overlay-element-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 764 kB | 709.53ms - 720.91ms | - | slower ❌
5% - 7%
31.30ms - 48.70ms | | branch | 750 kB | 668.64ms - 681.80ms | faster ✔
4% - 7%
31.30ms - 48.70ms | - | ### lazy-test [_permalink_](#user-content-overlay-lazy-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 91.15ms - 93.13ms | - | faster ✔
7% - 10%
6.71ms - 10.33ms | | branch | 548 kB | 99.15ms - 102.17ms | slower ❌
7% - 11%
6.71ms - 10.33ms | - | ## picker [_permalink_](#user-content-picker) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 513 kB | 1066.31ms - 1077.09ms | - | faster ✔
5% - 7%
50.68ms - 83.44ms | | branch | 500 kB | 1123.29ms - 1154.23ms | slower ❌
5% - 8%
50.68ms - 83.44ms | - | ## popover [_permalink_](#user-content-popover) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 384 kB | 30.42ms - 34.98ms | - | unsure 🔍
-13% - +3%
-4.50ms - +1.18ms | | branch | 372 kB | 32.67ms - 36.05ms | unsure 🔍
-4% - +14%
-1.18ms - +4.50ms | - | ## split-button [_permalink_](#user-content-split-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 723 kB | 1877.91ms - 1882.17ms | - | unsure 🔍
-0% - +0%
-5.54ms - +1.26ms | | branch | 710 kB | 1879.54ms - 1884.82ms | unsure 🔍
-0% - +0%
-1.26ms - +5.54ms | - | ## tooltip [_permalink_](#user-content-tooltip) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 82.96ms - 86.96ms | - | slower ❌
10% - 16%
7.54ms - 11.78ms | | branch | 643 kB | 74.61ms - 75.99ms | faster ✔
9% - 14%
7.54ms - 11.78ms | - | ### test-directive [_permalink_](#user-content-tooltip-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 534 kB | 48.55ms - 49.65ms | - | faster ✔
7% - 15%
3.89ms - 8.39ms | | branch | 521 kB | 53.05ms - 57.43ms | slower ❌
8% - 17%
3.89ms - 8.39ms | - | ### test-element [_permalink_](#user-content-tooltip-test-element) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 132.19ms - 141.49ms | - | slower ❌
2% - 10%
2.99ms - 13.21ms | | branch | 643 kB | 126.63ms - 130.85ms | faster ✔
2% - 9%
2.99ms - 13.21ms | - | ### test-lazy [_permalink_](#user-content-tooltip-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 632 kB | 93.88ms - 97.24ms | - | faster ✔
8% - 14%
8.88ms - 15.04ms | | branch | 619 kB | 104.94ms - 110.10ms | slower ❌
9% - 16%
8.88ms - 15.04ms | - | ## truncated [_permalink_](#user-content-truncated) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 529 kB | 107.25ms - 115.07ms | - | unsure 🔍
-5% - +3%
-6.07ms - +3.87ms | | branch | 516 kB | 109.19ms - 115.33ms | unsure 🔍
-4% - +5%
-3.87ms - +6.07ms | - |

adobe / spectrum-web-components