Posted in

[Microsoft Edge adds focusgroup attribute]

Microsoft Edge introduces focusgroup to simplify keyboard navigation. A single HTML attribute gives roving tabindex behavior, arrow-key handling across directions, skips hidden or disabled elements, supports shadow DOM, reduces custom code, and improves load times and consistency for keyboard users.

Microsoft announced an early implementation of the focusgroup feature in Microsoft Edge. The feature standardizes arrow-key navigation inside grouped widgets to improve keyboard accessibility.

Main feature and impact

focusgroup is an HTML-based navigation pattern that enables arrow-key roving within a focus group. It reduces the need for custom tabindex logic and third-party libraries. The browser handles arrow keys, skipped disabled or hidden elements, and respects text direction. Developers gain consistent keyboard behavior across widgets and reduce JavaScript surface area and maintenance.

Practical implications

Developers can add a single attribute to enable predictable arrow-key navigation in menus, toolbars, and tab lists. This lowers development time and bugs related to focus management. Sites can remove roving tabindex scripts, which reduces bundle size and improves load time. focusgroup also works inside shadow DOM and aligns with ARIA Authoring Practices.
“Sites will load faster!”
The feature is available for early testing in Microsoft Edge and Chromium builds. Developers should test focusgroup in their components and report issues to Chromium and OpenUI. Widespread adoption will standardize keyboard patterns and reduce accessibility gaps across the web.

Key points from the article:

  • Single attribute provides roving tabindex behavior
  • Arrow keys handled across all text directions
  • Skips hidden and disabled elements automatically
  • Works with elements inside shadow DOM
  • Reduces custom code and improves page load
  • Related Coverage:

    From the Windows Blog