A11y | Keep inactive card text at 4.5:1

[BrianGenisio]

Summary

Closes #29 (Activities audit D1). Inactive Horizontal Cards keep text at ≥4.5:1. The centered card still reads as focused through chrome, not dimmed type.

Changes

Drop opacity: 0.5 on inactive cards. Opacity on the card composites every descendant, which dropped Matching descriptions and “Best response” below 4.5:1.

Inactive cards use an inset Stroke-Light edge. The active card keeps the existing drop shadow. No transform: scale(): the carousel measures getBoundingClientRect() width, and scaling inactive cards would break centering.

Nav disabled opacity is unchanged (1.4.3 exemption). Matching A7 choice tokens stay in the consumer.

Test plan

• npm test — light and dark, inactive opacity is 1, title/description/placeholder ≥4.5:1 with ancestor opacity composited, cards are not aria-hidden, scoped axe color-contrast on inactive cards
• Visual: side cards still read as side cards via shadow vs inset stroke
• Activities a11y:ci after the submodule bump (separate consumer PR)

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 70b52f53-69d7-4569-a5d3-b5d73e521a18

📥 Commits

Reviewing files that changed from the base of the PR and between d0604a8 and 66b721c.

📒 Files selected for processing (5)

• agents.md
• components/horizontal-cards/README.md
• components/horizontal-cards/horizontal-cards.css
• llms.txt
• tests/horizontal-cards-a11y.spec.js

Included review availability: 4 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

---

📝 Walkthrough

Walkthrough

Horizontal Cards no longer apply opacity: 0.5 to inactive cards. Inactive cards use an inset border, while active cards retain a shadow. New Playwright tests verify opacity, text contrast, accessibility attributes, axe results, color schemes, and scrolling states. Accessibility descriptions now document full-contrast text for inactive cards.

Merge Risk: ⚪ Minimal · up to 66b72

This localized styling change removes dimming from inactive card text while preserving visual distinction through the card edge treatment; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the accessibility change: inactive card text remains at the 4.5:1 contrast minimum.
Description check	✅ Passed	The description directly explains the contrast issue, CSS changes, visual treatment, preserved behavior, and test coverage.
Linked Issues check	✅ Passed	The changes address issue #29 by removing inactive-card opacity, preserving text contrast in light and dark themes, retaining accessibility-tree exposure, maintaining active and inactive visual distin…
Out of Scope Changes check	✅ Passed	The CSS, accessibility tests, and related documentation updates support the linked issue objectives. No unrelated code changes or Activities A7 token changes are identified.

Full details: Linked Issues check

Explanation

The changes address issue #29 by removing inactive-card opacity, preserving text contrast in light and dark themes, retaining accessibility-tree exposure, maintaining active and inactive visual distinction, and avoiding new user-facing copy. The tests cover the stated contrast and accessibility requirements.

---

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