Native First Interaction Components

Purpose

Preserve browser semantics, focus, forms, keyboard behavior, and assistive-technology support before considering custom widgets.

When to Use

• An interactive component uses click or keyboard logic on a non-native element.
• Buttons, links, inputs, dialogs, disclosures, lists, tables, or custom controls are introduced or changed.

Do

• Identify semantic role and native element first, then enhance through styling or attribute-selector components.
• Preserve labels, form participation, disabled behavior, focus, keyboard handling, DOM order, and visible focus.
• Escalate only to proven ARIA or headless patterns when native behavior cannot satisfy requirements; test name, role, state, keyboard, touch, and high contrast.

Do Not