Icon button

# Implement Icon button in your agent

## Objective
Implement Icon button for this verified behavior: A compact button represented visually by an icon but still given its own stable accessible action name.

## Prerequisites
- Inspect the repository, design system, and existing tests first.
- Preserve unrelated changes and keep the file scope bounded.
- Confirm that Icon button matches the need before writing code.

## Required behavior
- Pointer, Enter, or Space activation runs one named action exactly once.
- Pointer hover or keyboard focus reveals the information after a short delay.

## States to cover
- Copy code ready
- Code copied

## Accessibility
- ARIA role: button
- The primary control or named region for Icon button has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
- The full button target, not only the glyph, receives a visible focus indicator.
- The button itself does not dismiss; any surface it controls follows that surface's separate contract.
- A stable aria-label or visually hidden text names the action; Tooltip is never the only accessible name.
- Tab focuses the icon button
- Enter and Space activate it
- Escape dismisses any supplementary tooltip

## When not to use
- The icon is ambiguous for the audience
- There is enough room for a clearer visible text button

## Acceptance criteria
- The button has its own stable accessible name
- The icon is from the project's single icon family
- The touch target remains comfortably operable beyond the glyph
- Tooltip is supplementary and keyboard reachable

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• Web platform
• Requires · Access to the repository, design system, and tests

# Verify Icon button after implementation

## Objective
Audit the Icon button implementation against its behavior, states, and accessibility requirements without changing it automatically.

## Checks
- Replay the smallest representative journey.
- Check keyboard behavior, focus, accessible name, and announcements.
- Tie each gap to a specific acceptance criterion.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:6a4e60c8afcdd14b6d0ddd48116015ea5ea837975c9d95d6d7046e83d338e94f

# Debug Icon button in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Reproduce the issue with the smallest relevant journey.
- Compare behavior with the documented states and transitions for Icon button.
- Verify keyboard behavior, focus, accessible name, and announcements.

## Possible causes
- The chosen primitive does not match the expected behavior.
- A state, transition, or focus return is missing.
- A neighboring component captures an event or hides an accessible signal.

## Bounded corrections
- Fix the reproduced cause without recreating neighboring components.
- Preserve the public contract and add a focused regression test.
- Do not install dependencies or change remote state without authorization.

## Final verification
- The button has its own stable accessible name
- The icon is from the project's single icon family
- The touch target remains comfortably operable beyond the glyph
- Tooltip is supplementary and keyboard reachable

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• Web platform
• Requires · Access to the repository, design system, and tests

# Prevent the Icon button regression

## Objective
Turn the reproduced cause into a focused regression test and compare Icon button with neighboring concepts before widening the fix.

## Checks
- Prove that the test fails before the fix.
- Prove that it passes after the bounded fix.
- Verify that no neighboring component changed behavior.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:0864c026c15d9f1c9c3aa9f4e231c51f43f2fa246f14797f5706fa0a41ed4f48