🎯 CTA Button — Accessibility

Interaction	Behavior
Tab	Moves focus to the button.
Enter / Space	Activates the button action.
Shift + Tab	Moves focus backward in tab order.

Must show a visible focus ring (button.border.focus) with 2:1 contrast against adjacent surfaces.
Focus ring should wrap the entire button area — not just the label.
Maintain consistent focus behavior across appearances (primary, secondary, etc.).

Always use semantic <button> elements or role="button".
Provide a descriptive label that communicates the action (e.g., “Save changes”).
If the button triggers a non-obvious result (e.g., “Export → downloads file”), add an aria-description.
Loading state:
- Add aria-busy="true" while loading.
- Disable button (disabled attribute or aria-disabled="true") to prevent double actions.
Danger actions (e.g., Delete, Remove):
- Add aria-label="Delete project" for clarity.
- Include confirmation if destructive (modal or alert).

Hover, press, and focus transitions should last ≤150ms to avoid motion sensitivity issues.
Use consistent easing curves (motion.easing.standard) for predictable motion.

Element	Contrast Ratio	Note
Text on background	≥ 4.5:1	For normal text
Focus ring vs surface	≥ 3:1	Always visible
Disabled elements	Maintain visibility (do not fully fade)

🧭 Icon Button — Accessibility