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:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user