Skip to content

feat(web-components): adopt focusgroup and its polyfill#35884

Merged
marchbox merged 86 commits into
microsoft:masterfrom
marchbox:users/machi/focusgroup
May 5, 2026
Merged

feat(web-components): adopt focusgroup and its polyfill#35884
marchbox merged 86 commits into
microsoft:masterfrom
marchbox:users/machi/focusgroup

Conversation

@marchbox
Copy link
Copy Markdown
Contributor

@marchbox marchbox commented Mar 19, 2026

This PR removes bespoke code for directional navigation in favor of HTML’s focusgroup, the new feature is polyfilled by @microsoft/focusgroup-polyfill.

Noticeable changes:

  • 4 sets of components adopted focusgroup: menu-list/menu-item, radio-group/radio, tablist/tab, tree/tree-item
  • Removed bespoke directional navigation code from *.base.ts, as well as some tabindex management code
  • Use FocusGroup from the polyfill in *.ts
  • Implemented ArrayItemCollection in utils/focusgroup.ts
  • Rewrote tablist and styles to reduce complexity, moved the indicator animation to pure CSS with anchor positioning (and fallback to no animation)

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 19, 2026

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

Comment thread packages/web-components/.storybook/preview-head.html
@marchbox marchbox force-pushed the users/machi/focusgroup branch from c6832d2 to 370c7a1 Compare March 30, 2026 22:10
Copy link
Copy Markdown
Contributor

@davatron5000 davatron5000 left a comment

Choose a reason for hiding this comment

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

LGTM, had a couple questions around this.menuChildren, but doesn't need to block.

Comment thread packages/web-components/src/menu-list/menu-list.base.ts Outdated
Comment thread packages/web-components/src/menu-list/menu-list.base.ts
Comment thread packages/web-components/src/tab/tab.ts Outdated
@marchbox marchbox merged commit 5b7ded8 into microsoft:master May 5, 2026
14 checks passed
@marchbox marchbox deleted the users/machi/focusgroup branch May 5, 2026 22:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

5 participants