Skip to content

TEST Fix dialog focus flakiness - #2645

Open
Roman Lutz (romanlutz) wants to merge 1 commit into
microsoft:mainfrom
romanlutz:romanlutz-configuration-dialog-flakiness
Open

TEST Fix dialog focus flakiness#2645
Roman Lutz (romanlutz) wants to merge 1 commit into
microsoft:mainfrom
romanlutz:romanlutz-configuration-dialog-flakiness

Conversation

@romanlutz

Copy link
Copy Markdown
Contributor

Description

Addresses intermittent Configuration dialog failures such as this Frontend Tests run, without increasing timeouts or querying hidden dialogs.

The dialog is already mounted when it becomes inaccessible. JSDOM's missing layout prevents Fluent UI from finding a focusable input, so it focuses the dialog surface. When Tabster registers the modal after that focus event, it misses activation because focus is on the surface rather than a descendant. Its deferred 250 ms update then sets aria-hidden="true" on the open dialog. Waiting longer cannot recover it.

  • Provide minimal, display-aware JSDOM layout for focus management. Hidden and disabled controls remain excluded from focus. This is not a general layout simulator.
  • Add a deterministic regression that advances the 250 ms timer and checks the dialog through normal accessible-role queries. Remove the Configuration-specific timeout overrides while preserving the registration flow with userEvent.
  • Use a named accessible preview query in ScenarioFlow and wait for the destination heading to become accessible after modal cleanup.

Production UI, dependencies, scorer behavior, and coverage thresholds are unchanged.

Tests and Documentation

  • Verified that the deterministic Configuration regression fails without the layout shim and passes with it.
  • Added checks for detached, hidden, CSS-hidden, aria-hidden, disabled, and disabled-fieldset controls.
  • Final diff: three repeated focused runs passed all 66 tests across six suites, including Configuration, initializer flows, ScenarioDetail, and ScenarioFlow.
  • Final diff: two Node 22 npm run test:coverage runs each passed all 1,432 tests across 72 suites. Coverage: statements 93.11%, branches 85.89%, functions 91.57%, lines 94.45%.
  • npm run type-check and npm run lint passed.
  • Updated frontend test instructions to document the focus-layout shim and accessible queries after modal cleanup.

Validation used Node v22.23.2 on Windows, not a new Ubuntu Actions run. The uncontrolled Configuration failure did not recur in eight baseline file runs; the failure mechanism was reproduced with the controlled timer regression.

JupyText: N/A (frontend test-only changes).

Provide a display-aware JSDOM layout shim so Fluent UI focuses a dialog control before Tabster's deferred accessibility update. Add the 250 ms regression, remove timeout workarounds, and wait for accessible navigation after modal cleanup.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
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.

1 participant