[Bug]: v9 Focus outline disappears on component rerender

[smhigley]

Library

React Components / v9 (@fluentui/react-components)

Are you reporting Accessibility issue?

yes

Reproduction

ToggleButton shows the issue, but it can also be reproduced on other components by causing className to change: https://react.fluentui.dev/?path=/docs/components-button-togglebutton--default

Bug Description

When a v9 component render changes the className prop, it overwrites the react-tabster focus visible class and causes the focus outline to disappear.

This is currently visible in the ToggleButton examples, if you toggle the button with enter/space. It's also possible to update Accordion, MenuItemCheckbox, etc. to show the same bug if you mutate className on the focused element to change based on the open/checked/etc. state.

The problem is that FOCUS_VISIBLE_CLASS is applied using HTMLElement.className.add in focusVisiblePolyfill.ts in response to changes in keyborg.isNavigatingWithKeyboard(), which updates based on focus changes, mousedown events, and the tab/esc keys. This only works if no other logic replaces the className string without also triggering a keyborg.isNavigatingWithKeyboard update.

There are multiple cases where our React components will re-render and update className based on logic that doesn't involve changing the focus or tabbing/esc, causing the focusVisible className to be removed.

https://user-images.githubusercontent.com/3819570/191383444-3d88c804-d259-4222-bcaf-1bf3bdfafae8.mp4