Enhance Testimonial styling contract parity and attribute selector support

[bradpotts]

This PR enhances the Testimonial component's styling contract to align with project-wide standards. Key improvements include adding support for attribute selectors (:disabled, [aria-disabled], [aria-busy]), refactoring the interactive hover shadow to use the appropriate role variable instead of a raw token, and updating the TypeScript recipe to output forced-state classes (is-hover, is-focus, is-active) for better parity with other components like Card and Badge.

---

PR created automatically by Jules for task 13518685734180582296 started by @bradpotts

Summary by CodeRabbit

• Refactor
  • Improved testimonial component state indicator classes for consistent handling across all interactive states (hover, focus, active).
  • Consolidated disabled state styling with enhanced accessibility features, including proper cursor treatment and ARIA attribute support.
  • Updated shadow styling to use component-specific design tokens for better visual coherence.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 55739e5e-9a22-469d-a854-086d3b6e9688

📥 Commits

Reviewing files that changed from the base of the PR and between 5376ddf and 4da7150.

📒 Files selected for processing (2)

• src/recipes/testimonial.ts
• src/styles/components.css

---

Walkthrough

The Testimonial component recipe now emits additional state indicator classes (is-hover, is-focus, is-active) alongside existing modifier classes. The CSS is updated to refactor disabled/loading selector consolidation with aria-disabled support and cursor: not-allowed, while the interactive hover/focus-within shadow uses a component-level token instead of a generic shadow value.

Changes

Testimonial state indicators and styling

Layer / File(s)	Summary
State indicator class output src/recipes/testimonial.ts	The getTestimonialClasses function appends is-hover, is-focus, and is-active state tokens alongside the existing sp-testimonial--* modifier classes for hovered, focused, and active variants.
Disabled, loading, and interactive styling src/styles/components.css	The CSS refactors testimonial disabled and loading selectors to consolidate under aria-disabled="true" checks with added cursor: not-allowed for disabled state, while preserving pointer-events: none for loading. The interactive hover/focus-within elevated shadow is updated to use --sp-component-testimonial-shadow-elevated instead of the generic --sp-shadow-lg.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• phcdevworks/spectre-ui#85: Both PRs update their respective get*Classes recipes to append is-hover/is-focus/is-active forced-state tokens and refactor component CSS disabled/interactive state handling, with structurally aligned changes (Card ↔ Testimonial).
• phcdevworks/spectre-ui#78: Both PRs update src/recipes/testimonial.ts's getTestimonialClasses to change which sp-testimonial--* modifier/state classes are output and update the corresponding CSS styling in src/styles/components.css.
• phcdevworks/spectre-ui#80: Both PRs update component recipes to emit the same is-hover/is-focus/is-active state-class tokens to synchronize with CSS forced-state handling.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description covers key changes and rationale, but is missing several required checklist items like linked issue confirmation, Type of Change selection, and verification checkmarks.	Complete the required template sections: explicitly note the linked issue, select the appropriate Type of Change, and confirm the verification checklist items have been completed.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main changes: enhancing styling contract parity and adding attribute selector support for the Testimonial component.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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-testimonial-contract-13518685734180582296

---

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 and usage tips.}