Skip to content

[P1] Implement the complete ARIA tabs and tabpanel interaction model #19

Description

@Banegasn

Objective

Make m3-tabs a complete, resilient implementation of the ARIA tabs pattern and reconcile its documented API with runtime behavior.

Evidence

  • packages/m3-tabs/src/m3-tabs.ts handles clicks only; ArrowLeft/Right, Home/End, orientation, and activation policy are absent.
  • Tabs have role=tab and roving tabindex but no tabpanel aria-controls/aria-labelledby relationship.
  • activeTab is not clamped when tabs are removed/disabled.
  • Indicator measurement does not react to resize, font loading, or content layout changes.
  • README documents variants/properties/event detail that do not match the implementation.

Scope

Implement keyboard focus/activation, tabpanel linkage, disabled/dynamic recovery, orientation, resize observation, and a single typed/documented event contract. Reconcile README and demo examples.

Acceptance criteria

  • Arrow/Home/End behavior follows the documented orientation/activation policy and skips disabled tabs.
  • Exactly one enabled tab is selected/focusable.
  • Every tab/panel pair has valid bidirectional ID relationships.
  • Invalid active indices and dynamic add/remove/disable recover predictably.
  • Indicator remains aligned after resize/content/font changes.
  • README, types, demo, and tests expose the same API.

Verification

Cross-browser keyboard tests plus automated accessibility checks.

Dependencies

Blocked by #5 and #6.

Autonomous execution contract

Keep behavior and documentation in the same PR; do not add visual variants unless the intended API is explicitly preserved.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: accessibilityAccessibility and inclusive interactionarea: componentsComponent behavior, APIs, or stylingblockedBlocked by another issue or external decisionbugSomething isn't workingpriority: p1High-impact improvement

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions