[Maintenance] Investigate replacing RovingTabindexController with focusgroup #3187

Summary

Investigate whether the focusgroup HTML attribute can replace our custom RovingTabindexController. A polyfill is now available that makes this viable.

Motivation

Our RovingTabindexController is very complex and not very user-friendly to work with. Replacing it with focusgroup — a web standard currently in progress — would simplify our codebase and align us with the platform. Even while the standard is still being finalized, we can use the polyfill to get started and eventually drop it once browsers ship native support.

Background

The focusgroup HTML attribute is a proposed web standard that provides native roving tabindex behavior declaratively, eliminating the need for custom JavaScript controllers.

A polyfill is available: @microsoft/focusgroup-polyfill

Current usage

RovingTabindexController is currently used in the following components:

• tool-bar
• select
• checkbox-group
• radio-group
• tab-group
• menu
• tag-list
• toggle-group

The controller is defined in packages/components/shared/src/controllers/roving-tabindex.ts.

Tasks

Phase 1: Proof of concept

• Check polyfill maturity, bundle size, and browser support
• Prototype replacing RovingTabindexController with focusgroup in a single component (e.g. tool-bar)
• Verify all existing behavior and tests still pass

Phase 2: Broader rollout (if PoC is successful)

• Evaluate which other components can be migrated — note that the polyfill may not cover all RovingTabindexController use cases (e.g. focusInIndex, isFocusableElement callbacks)
• Migrate remaining components where focusgroup is a viable replacement
• Keep RovingTabindexController for any components where focusgroup falls short