Skip to content

Comments

bugfix(react-dialog): removes tabindex -1 from DialogSurface if not required#29340

Closed
bsunderhus wants to merge 1 commit intomicrosoft:masterfrom
bsunderhus:react-dialog/bugfix--removes-tabindex--1-from-surface-if-not-required
Closed

bugfix(react-dialog): removes tabindex -1 from DialogSurface if not required#29340
bsunderhus wants to merge 1 commit intomicrosoft:masterfrom
bsunderhus:react-dialog/bugfix--removes-tabindex--1-from-surface-if-not-required

Conversation

@bsunderhus
Copy link
Contributor

Previous Behavior

DialogSurface by default has tabIndex set to -1, which is required for it to work properly on some edge cases #25150, but may cause some problems on some other #28404

New Behavior

  1. Removes tabIndex=-1 by default
  2. adds callback to add tabindex -1 on mount in cases where is necessary

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 29, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 80 72 10 Possible regression
InfoButton mount 9 15 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 622 623 5000
Button mount 301 309 5000
Field mount 1107 1125 5000
FluentProvider mount 782 685 5000
FluentProviderWithTheme mount 73 84 10
FluentProviderWithTheme virtual-rerender 64 69 10
FluentProviderWithTheme virtual-rerender-with-unmount 80 72 10 Possible regression
InfoButton mount 9 15 5000 Possible regression
MakeStyles mount 852 851 50000
Persona mount 1744 1688 5000
SpinButton mount 1376 1363 5000

@bsunderhus bsunderhus force-pushed the react-dialog/bugfix--removes-tabindex--1-from-surface-if-not-required branch from a920811 to a111556 Compare September 29, 2023 14:08
@fabricteam
Copy link
Collaborator

fabricteam commented Sep 29, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.227 kB
19.584 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.783 kB
59.085 kB
react-components
react-components: FluentProvider & webLightTheme
40.793 kB
13.521 kB
react-dialog
Dialog (including children components)
88.307 kB
26.334 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
🤖 This report was generated against b5f4971b4b04d5a02983ec472c4cc565ebd98d80

@codesandbox-ci
Copy link

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 a111556:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
silly-microservice-zkk3pf Issue #28404

@size-auditor
Copy link

size-auditor bot commented Sep 29, 2023

Asset size changes

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

Baseline commit: b5f4971b4b04d5a02983ec472c4cc565ebd98d80 (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

(dialog: HTMLElement | null) => {
if (
dialog &&
findFirstFocusable(dialog) === null &&
Copy link
Contributor

@ling1726 ling1726 Oct 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to fix this? We've only seen one case where this is an issue because users were using focus and blur events, and even that was worked around.

I propose moving this issue to the backlog and see if there are more standard use cases that are affected by the -1 tabindex on the DialogSurface

@bsunderhus bsunderhus closed this Oct 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on anything non-focusable in the dialog focuses the dialog

3 participants