microsoft / microsoft/polyfills

Export a TypeScript type for the focusgroup attribute

Open Beginner friendly
#67 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
8
Forks
4
Avg merge
2d 1h
Merged PRs (30d)
2

Description

Proposal

Please export a TypeScript type for the focusgroup attribute so consumers can opt into type safety in their own global or framework-specific typings without the polyfill needing to provide React, JSX, or other framework integrations.

For example:

import type { FocusgroupAttribute } from "@microsoft/focusgroup-polyfill";

Consumers could then use the type in their own declarations, such as React’s HTMLAttributes augmentation:

declare module "react" {
  interface HTMLAttributes<T> {
    focusgroup?: FocusgroupAttribute;
  }
}

Suggested implementation

export type FocusgroupBehavior =
  | "toolbar"
  | "menubar"
  | "tablist"
  | "radiogroup"
  | "listbox"
  | "menu"
  | "grid"
  | "feed";

type Axis = "inline" | "block";
type Wrap = "wrap" | "nowrap";
type Memory = "nomemory";

export type FocusgroupAttribute =
  | FocusgroupBehavior
  | `${FocusgroupBehavior} ${Axis}`
  | `${FocusgroupBehavior} ${Wrap}`
  | `${FocusgroupBehavior} ${Memory}`
  | `${FocusgroupBehavior} ${Axis} ${Wrap}`
  | `${FocusgroupBehavior} ${Axis} ${Memory}`
  | `${FocusgroupBehavior} ${Wrap} ${Memory}`
  | `${FocusgroupBehavior} ${Axis} ${Wrap} ${Memory}`;

Suggested scope

  • Export a FocusgroupAttribute type from the package’s main entry point.
  • Include the supported behavior tokens and modifiers, including the Focusgroup V2 tokens where applicable.
  • Keep framework-specific integrations out of scope; consumers can apply the type to React, Vue, custom JSX typings, or other environments themselves.
  • Document whether the type uses a canonical token order or supports all valid token orderings.

This would provide a lightweight, framework-agnostic typing surface for applications using the polyfill.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the package’s main entry point and inspect how public exports and TypeScript declarations are organized. Add the framework-agnostic FocusgroupAttribute type with the supported behavior tokens and modifiers, export it from the main entry point, and document the token-ordering choice; no specific test file is mentioned.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.