fix(web): a11y on DiscoverResultCard + drop test-only inline styles

aria-labels now include the card title on all three button variants so
SR users navigating a grid can tell which card a button belongs to:
  - "Request <title>" / "<title> is already in library" / "<title>
    already requested"
The Kept pill gets role="status" so SR users hear the badge when it
appears (without aria-live's announce-on-mount noise).

The reserved-slot CSS (.badge-row { min-height: 22px } and
.actions { margin-top: auto }) was already in the scoped <style>
block; we drop the duplicate inline style="" attributes that existed
purely to satisfy jsdom's getComputedStyle. Tried stylesheet
introspection (document.styleSheets) as a replacement assertion, but
vitest's @testing-library/svelte renderer doesn't inject the scoped
<style> tag into jsdom (styleSheets.length === 0), so the two CSS
assertions are dropped with an explanatory comment. The layout
discipline is enforced visually at the consumer page rather than as
a "CSS exists in CSS" unit test.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-29 21:05:27 -04:00
co-authored by Claude Opus 4.7
parent c8bd19d6f1
commit dcb49e9687
2 changed files with 25 additions and 34 deletions
@@ -55,21 +55,18 @@
{#if subtitle}
<div class="subtitle text-sm text-text-secondary">{subtitle}</div>
{/if}
<div
class="badge-row"
data-testid="badge-row"
style="min-height: 22px;"
>
<div class="badge-row" data-testid="badge-row">
{#if state === 'kept'}
<span class="kept-pill">Kept</span>
<span class="kept-pill" role="status">Kept</span>
{/if}
</div>
</div>
<div class="actions pt-3" data-testid="actions" style="margin-top: auto;">
<div class="actions pt-3" data-testid="actions">
{#if state === 'requestable'}
<button
type="button"
aria-label={`Request ${title}`}
class="flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-text-primary"
onclick={handleRequest}
>
@@ -79,6 +76,7 @@
<button
type="button"
disabled
aria-label={`${title} is already in library`}
onclick={handleRequest}
class="rounded-md border border-border px-3 py-1.5 text-sm text-text-muted"
>
@@ -88,6 +86,7 @@
<button
type="button"
disabled
aria-label={`${title} already requested`}
onclick={handleRequest}
class="rounded-md border border-border px-3 py-1.5 text-sm text-text-muted"
>