microsoft
feat: use browser `:focus-visible` if supported
Current Behavior
v9 :focus-visible ponyfill will always be used
New Behavior
Both native :focus-visible and ponyfill styles are written to DOM, but if the ponyfill is never applied, its styles will never be used because there is no selector
:focus-visible native
Changes to
:focus-visiblewill not trigger:focus-within
| time elapsed | fast reject count | match attempts | match count |
|---|---|---|---|
| 116 | 0 | 783 | 265 |
:focus-visible ponyfill 🦄
| time elapsed | fast reject count | match attempts | match count |
|---|---|---|---|
| 377 | 0 | 1484 | 364 |
:focus-visible Improvement in %
| time elapsed | fast reject count | match attempts | match count |
|---|---|---|---|
| 69.2% | 0% | 47.2% | 27.2% |
Related Issue(s)
Addresses #24183
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit bc2f8cbb35aee0e45dd1035e7aec1788faac40e4:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-accordion Accordion (including children components) |
79.485 kB24.082 kB |
81.816 kB24.665 kB |
2.331 kB 583 B |
| react-alert Alert |
82.803 kB20.582 kB |
86.055 kB21.271 kB |
3.252 kB 689 B |
| react-avatar AvatarGroup |
139.268 kB41.173 kB |
140.849 kB41.539 kB |
1.581 kB 366 B |
| react-button Button |
36.396 kB9.575 kB |
39.648 kB10.24 kB |
3.252 kB 665 B |
| react-button CompoundButton |
43.469 kB10.812 kB |
46.721 kB11.474 kB |
3.252 kB 662 B |
| react-button MenuButton |
39.014 kB10.456 kB |
42.266 kB11.116 kB |
3.252 kB 660 B |
| react-button SplitButton |
46.506 kB11.827 kB |
50.148 kB12.65 kB |
3.642 kB 823 B |
| react-button ToggleButton |
51.912 kB11.004 kB |
56.472 kB11.968 kB |
4.56 kB 964 B |
| react-card Card - All |
67.42 kB19.249 kB |
69.936 kB19.83 kB |
2.516 kB 581 B |
| react-card Card |
63.102 kB18.167 kB |
65.618 kB18.747 kB |
2.516 kB 580 B |
| react-combobox Combobox (including child components) |
75.081 kB24.145 kB |
75.123 kB24.166 kB |
42 B 21 B |
| react-combobox Dropdown (including child components) |
74.594 kB24.134 kB |
74.636 kB24.155 kB |
42 B 21 B |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
192.699 kB52.786 kB |
200.655 kB54.926 kB |
7.956 kB 2.14 kB |
| react-components react-components: FluentProvider & webLightTheme |
32.688 kB10.736 kB |
32.73 kB10.757 kB |
42 B 21 B |
| react-dialog Dialog (including children components) |
85.049 kB25.293 kB |
87.422 kB25.926 kB |
2.373 kB 633 B |
| react-link Link |
12.197 kB4.912 kB |
12.452 kB4.976 kB |
255 B 64 B |
| react-menu Menu (including children components) |
118.866 kB36.006 kB |
121.239 kB36.69 kB |
2.373 kB 684 B |
| react-menu Menu (including selectable components) |
122.065 kB36.499 kB |
124.438 kB37.195 kB |
2.373 kB 696 B |
| react-popover Popover |
106.133 kB32.244 kB |
106.175 kB32.264 kB |
42 B 20 B |
| react-portal Portal |
10.49 kB3.845 kB |
10.532 kB3.867 kB |
42 B 22 B |
| react-provider FluentProvider |
15.565 kB5.818 kB |
15.607 kB5.837 kB |
42 B 19 B |
| react-tooltip Tooltip |
45.509 kB15.537 kB |
45.551 kB15.558 kB |
42 B 21 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react-avatar Avatar |
48.533 kB13.78 kB |
| react-avatar AvatarGroupItem |
68.248 kB19.109 kB |
| react-card CardFooter |
8.461 kB3.555 kB |
| react-card CardHeader |
9.504 kB3.896 kB |
| react-card CardPreview |
8.562 kB3.61 kB |
| react-radio Radio |
36.329 kB12.024 kB |
| react-radio RadioGroup |
14.319 kB5.711 kB |
| react-slider Slider |
31.988 kB10.019 kB |
| react-switch Switch |
32.781 kB10.348 kB |
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1598 | 1518 | 5000 | |
| Button | mount | 1152 | 1140 | 5000 | |
| FluentProvider | mount | 1864 | 1871 | 5000 | |
| FluentProviderWithTheme | mount | 730 | 741 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 729 | 690 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 734 | 755 | 10 | |
| MakeStyles | mount | 2247 | 2351 | 50000 | |
| SpinButton | mount | 3107 | 3093 | 5000 |
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: a0e1e0c2780ad6ba73aaeee1aa1525168a4d4045 (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
Waiting on microsoft/keyborg#19 so that we can handle edge cases where screen readers pull focus
Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.
The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.
