Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update internal usage of useModalAttributes to use legacyTrapFocus by default #31801

Merged
merged 4 commits into from
Jun 28, 2024

Conversation

smhigley
Copy link
Contributor

Context

The initial decision around whether to use a hard focus trap (i.e. forcing focus back within a modal when it leaves) vs. a soft one (preventing focus from reaching the background page, but allowing it to reach browser controls) was based around where HTML seemed to be going -- both the dialog element and the inert attribute allow you to reach the browser chrome.

However, both our v9 Dialog and Popover already use the hard focus trap by default now, and user feedback seems to indicate that's preferred anyway. This PR updates DatePicker to be consistent with Dialog & Popover, and updates the useModalAttributes hook to also implement a hard focus trap by default. That seems like the best approach for both internal consistency in v9, and for keyboard & screen reader users.

@smhigley smhigley requested review from sopranopillow, khmakoto and a team as code owners June 24, 2024 20:57
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 24, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 24, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 33 32 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 74 76 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 628 609 5000
Button mount 299 305 5000
Field mount 1106 1127 5000
FluentProvider mount 728 698 5000
FluentProviderWithTheme mount 76 79 10
FluentProviderWithTheme virtual-rerender 33 32 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 74 76 10 Possible regression
MakeStyles mount 862 860 50000
Persona mount 1701 1653 5000
SpinButton mount 1380 1382 5000
SwatchPicker mount 1594 1662 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 24, 2024

📊 Bundle size report

✅ No changes found

@smhigley smhigley changed the title feat: update useModalAttributes to use legacyTrapFocus by default fix: update internal usage of useModalAttributes to use legacyTrapFocus by default Jun 28, 2024
@smhigley
Copy link
Contributor Author

/azp run

Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@smhigley
Copy link
Contributor Author

/azp run

Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@smhigley smhigley closed this Jun 28, 2024
@smhigley smhigley reopened this Jun 28, 2024
@smhigley smhigley merged commit b26b475 into microsoft:master Jun 28, 2024
21 checks passed
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jul 3, 2024
* master: (45 commits)
  Added unit testcases for sparkline chart. (microsoft#31843)
  release: applying package updates - react v8
  release: applying package updates - web-components
  fix(web-components): fix enterkey interaction on menu (microsoft#31894)
  chore(web-components): expose field to package exports (microsoft#31904)
  fix(web-components): slotted elements within fluent-text-input can't be focused (microsoft#31903)
  fix(web-components): fix menu positioning in firefox (microsoft#31895)
  chore: bump @types/node types to v20 and @tsconfig to v18 (microsoft#31510)
  chore: migrate to nx 19.2.3 (microsoft#31828)
  chore: fix install verdacio command (microsoft#31897)
  fix(scripts-prettier): escape file names that are being passed to prettier bin via shell (microsoft#31889)
  release: applying package updates - react-components
  feat:(docs) Adds pattern doc on Basic Recomposition (microsoft#31861)
  chore:(docs) Archive the wiki 🎉 (microsoft#31202)
  feat:(react-nav-preview) Adds NavDivider implementation (microsoft#31848)
  ci(.github): resolve due_on UTC time creation issues (microsoft#31890)
  release: applying package updates - web-components
  fix: update internal usage of useModalAttributes to use legacyTrapFocus by default (microsoft#31801)
  chore: make utils a package export (microsoft#31865)
  fix: add live region around scroll index update (microsoft#31863)
  ...
@smhigley smhigley deleted the update-modalattributes-default branch July 8, 2024 22:10
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