fix(button): announce loading once and fix icon-only name duplication #70

[airikej]

Summary by CodeRabbit

• Accessibility Improvements
  • Improved loading-state announcements for buttons and spinners.
  • Decorative spinners are now hidden from assistive technologies.
  • Added visual-only tooltip behavior for icon-only buttons, preventing redundant announcements.
  • Improved accessible naming and labeling for buttons and tooltips.
  • Added support for hiding non-essential overlay content from screen readers.

[coderabbitai]

Warning

Review limit reached

@airikej, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 48 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 11a0e260-2567-4a90-a325-a35fdf0b8a7a

📥 Commits

Reviewing files that changed from the base of the PR and between ccbf404 and c4a4941.

📒 Files selected for processing (2)

• src/tedi/components/buttons/button-content/button-content.spec.tsx
• src/tedi/components/loaders/spinner/spinner.spec.tsx

📝 Walkthrough

Walkthrough

Spinner and overlay accessibility semantics now support decorative loading indicators and visual-only tooltips. Button loading and icon-only tooltip tests verify the resulting ARIA attributes, roles, hidden content, and accessible names.

Changes

Accessibility semantics

Layer / File(s)	Summary
Decorative spinner semantics src/tedi/components/loaders/spinner/spinner.tsx, src/tedi/components/loaders/spinner/spinner.spec.tsx	Spinner supports decorative, which sets aria-hidden, removes status semantics, and omits the screen-reader label.
Visual-only overlay accessibility src/tedi/components/overlays/overlay/*, src/tedi/components/overlays/tooltip/tooltip.spec.tsx	Overlays propagate ariaHidden, disable role wiring, hide content, and omit tooltip aria-describedby associations when enabled.
Button loading and tooltip integration src/tedi/components/buttons/button-content/*	Button loading spinners are decorative, and icon-only tooltips use visual-only overlay semantics while retaining the button’s accessible name.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: mart-sessman, ly-tempel-bitweb

Sequence Diagram(s)

sequenceDiagram
  participant ButtonContent
  participant Tooltip
  participant OverlayContent
  ButtonContent->>Tooltip: Pass ariaHidden for icon-only tooltip
  Tooltip->>OverlayContent: Render tooltip content as aria-hidden

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main changes: loading-state accessibility and icon-only button name duplication fixes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/70-button-wcag-react-issues-1

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/tedi/components/loaders/spinner/spinner.spec.tsx (1)

64-71: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Assert that decorative mode removes aria-live too.

The implementation changes both role and aria-live, but this test only guards the role and label. Add a negative aria-live assertion so a future live-region regression cannot reintroduce announcements.

Proposed assertion

    expect(spinner).toHaveAttribute('aria-hidden', 'true');
+   expect(spinner).not.toHaveAttribute('aria-live');
    expect(queryByRole('status')).not.toBeInTheDocument();

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/tedi/components/loaders/spinner/spinner.spec.tsx` around lines 64 - 71,
Update the decorative Spinner test to also assert that the rendered
.tedi-spinner does not have an aria-live attribute. Keep the existing
aria-hidden, status-role, and label assertions unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/tedi/components/buttons/button-content/button-content.spec.tsx`:
- Around line 122-127: Update the regression test around the ButtonContent
render to set showTooltip to true, trigger the tooltip’s open behavior, and
assert the resulting tooltip overlay is aria-hidden. Preserve the accessible
name assertion and ensure the test specifically exercises the Tooltip ariaHidden
branch rather than passing with the default tooltip-disabled state.

---

Nitpick comments:
In `@src/tedi/components/loaders/spinner/spinner.spec.tsx`:
- Around line 64-71: Update the decorative Spinner test to also assert that the
rendered .tedi-spinner does not have an aria-live attribute. Keep the existing
aria-hidden, status-role, and label assertions unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b0151bcf-7ea9-4e30-808a-bdad259694d2

📥 Commits

Reviewing files that changed from the base of the PR and between dfbddc4 and ccbf404.

📒 Files selected for processing (8)

• src/tedi/components/buttons/button-content/button-content.spec.tsx
• src/tedi/components/buttons/button-content/button-content.tsx
• src/tedi/components/loaders/spinner/spinner.spec.tsx
• src/tedi/components/loaders/spinner/spinner.tsx
• src/tedi/components/overlays/overlay/overlay-content.tsx
• src/tedi/components/overlays/overlay/overlay-trigger.tsx
• src/tedi/components/overlays/overlay/overlay.tsx
• src/tedi/components/overlays/tooltip/tooltip.spec.tsx