Skip to content

Conversation

@sopranopillow
Copy link
Contributor

Previous Behavior

Modal attributes were applied even when trap focus was set to false.

New Behavior

Modal attributes are now applied only when trapping focus.

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 625 619 5000
Button mount 316 320 5000
Field mount 1154 1128 5000
FluentProvider mount 695 687 5000
FluentProviderWithTheme mount 77 78 10
FluentProviderWithTheme virtual-rerender 63 64 10
FluentProviderWithTheme virtual-rerender-with-unmount 74 72 10
InfoButton mount 12 10 5000
MakeStyles mount 862 844 50000
Persona mount 1749 1756 5000
SpinButton mount 1397 1387 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 21, 2023

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 30b727c:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.781 kB
57.916 kB
203.786 kB
57.921 kB
5 B
5 B
react-infobutton
InfoButton
125.515 kB
39.344 kB
125.52 kB
39.348 kB
5 B
4 B
react-infobutton
InfoLabel
129.186 kB
40.516 kB
129.191 kB
40.52 kB
5 B
4 B
react-popover
Popover
114.817 kB
35.996 kB
114.822 kB
36 kB
5 B
4 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-alert
Alert
81.836 kB
22.031 kB
react-avatar
Avatar
47.01 kB
14.502 kB
react-avatar
AvatarGroup
16.116 kB
6.431 kB
react-avatar
AvatarGroupItem
61.789 kB
18.912 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.614 kB
18.512 kB
react-components
react-components: FluentProvider & webLightTheme
37.787 kB
12.387 kB
react-datepicker-compat
DatePicker Compat
207.372 kB
57.465 kB
react-persona
Persona
53.905 kB
16.371 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-table
DataGrid
152.77 kB
42.242 kB
react-table
Table (Primitives only)
39.638 kB
12.129 kB
react-table
Table as DataGrid
126.224 kB
33.612 kB
react-table
Table (Selection only)
71.594 kB
18.91 kB
react-table
Table (Sort only)
70.213 kB
18.511 kB
react-tags-preview
InteractionTag
11.031 kB
4.528 kB
react-tags-preview
Tag
25.398 kB
8.396 kB
react-tags-preview
TagGroup
69.607 kB
20.482 kB
🤖 This report was generated against d7f04c2b9e5b36267f7d822fe493fc57cf5bc492

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@size-auditor
Copy link

size-auditor bot commented Jul 21, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: afcfb2ebe322e2a8e204ac192e68f48f1164107f (build)

@sopranopillow sopranopillow requested a review from a team as a code owner August 14, 2023 22:55
ling1726
ling1726 previously approved these changes Aug 22, 2023
@ling1726 ling1726 dismissed their stale review August 22, 2023 08:26

need more clarification

@sopranopillow
Copy link
Contributor Author

Looks like this issue comes from Tabster, here's an issue to track it: microsoft/tabster#303

@sopranopillow sopranopillow enabled auto-merge (squash) August 23, 2023 17:45
@sopranopillow sopranopillow merged commit 8919d6c into microsoft:master Aug 23, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 23, 2023
* master:
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  applying package updates
  bugfix: ensure interop between assertSlots and old API (microsoft#28957)
  chore: rename imports from react-tree to react-components (microsoft#28946)
  applying package updates
  fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)
@sopranopillow sopranopillow deleted the popover-trapfocus-modal branch August 23, 2023 22:24
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 23, 2023
* master: (27 commits)
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  applying package updates
  bugfix: ensure interop between assertSlots and old API (microsoft#28957)
  chore: rename imports from react-tree to react-components (microsoft#28946)
  applying package updates
  fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)
  Accordion : updated styles for accordion header cursor (microsoft#28850)
  Additional VR tests Charting Library (microsoft#28777)
  feat(react-motion): create react-motion-preview package scaffolding (microsoft#28947)
  chore: updates generator to use new slot API (microsoft#28916)
  chore: bumps version of esbuild-loader to v3.2.0 (microsoft#28878)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 25, 2023
…e-motion

* feat/use-motion-presence-hook: (25 commits)
  fix: revert changes to CODEOWNERS
  fix: remove duplicated code due to a merge conflict
  fix: upgrade tests
  fix: set motion as active when animations are disabled
  fix: remove debug function
  feat: refactor useMotion to a much more clean/performant logic
  fix:  use correct type for MotionOptions
  fix: improve typings and documentation
  feat: Add documentKeyboardEvent to OnVisibleChangeData when Tooltip is hidden via Escape (microsoft#28951)
  fix: use correct boolean values
  RFC: Component CSS Transitions/Animations on mount/unmount (microsoft#27328)
  8.0 Azure Theme: Details list row focus contrast a11y bug fix  (microsoft#28966)
  fix: remove outdated changefile
  chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949)
  fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613)
  feat(react-table, react-components): export DataGridContextProvider (microsoft#28955)
  chore: decrease bundle size & adds fixtures (microsoft#28962)
  feat(react-utilities): create useAnimationFrame hook (microsoft#28948)
  fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765)
  docs(react-accordion): Added subcomponents to index story (microsoft#28956)
  ...
ling1726 added a commit to ling1726/fluentui that referenced this pull request Sep 8, 2023
Follow up from microsoft#28613. Not applying any of the `useModalAttributes()`
resulted in focus restoration not working for popovers that don't trap
focus.

Now the modalizer attributes are handled from the `useModalAttributes()`
hook. This way the popover will still apply the focus restoration
attributes if there is no focus trap configured.
ling1726 added a commit that referenced this pull request Sep 8, 2023
#29110)

* fix: don't apply modalizer attributes when focus trap isn't configured

Follow up from #28613. Not applying any of the `useModalAttributes()`
resulted in focus restoration not working for popovers that don't trap
focus.

Now the modalizer attributes are handled from the `useModalAttributes()`
hook. This way the popover will still apply the focus restoration
attributes if there is no focus trap configured.

* changefile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants