test(sanitizer-accessibility): verify Accessibility Standards & Screen Reader Aria Compliance #4875
+115
−0
Annotations
4 errors and 11 warnings
|
Run Unit Tests (Vitest)
Process completed with exit code 1.
|
|
Run Unit Tests (Vitest):
components/dashboard/ActivityLandscape.test.tsx#L78
TestingLibraryElementError: Unable to find a label with the text of: /contributions from .+ to .+/i
Ignored nodes: comments, script, style
<body>
<div>
<div
animate="[object Object]"
class="overflow-hidden rounded-xl border border-black/10 bg-white p-6 dark:border-[rgba(255,255,255,0.08)] dark:bg-[#0a0a0a]"
initial="[object Object]"
transition="[object Object]"
>
<div
class="mb-8 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center"
>
<div>
<h2
class="flex items-center gap-2 text-base font-semibold tracking-tight text-gray-900 dark:text-white"
>
Activity Landscape
</h2>
<p
class="mt-1 text-xs text-[#A1A1AA]"
>
Commit frequency over time
</p>
</div>
<div
class="flex flex-wrap items-center gap-3"
>
<div
class="flex items-center rounded-lg border border-black/5 bg-gray-100 p-0.5 dark:border-[rgba(255,255,255,0.08)] dark:bg-[#111]"
>
<button
class="cursor-pointer rounded-md px-3 py-1.5 text-xs font-semibold transition-all border border-black/5 bg-white text-black shadow-sm dark:border-white/5 dark:bg-[#222] dark:text-white"
>
Commits
</button>
<button
class="cursor-pointer rounded-md px-3 py-1.5 text-xs font-semibold transition-all text-gray-500 hover:text-black dark:hover:text-white"
>
Lines of Code
</button>
</div>
<div
class="flex overflow-hidden rounded-lg border border-black/10 dark:border-[rgba(255,255,255,0.08)]"
>
<button
class="cursor-pointer border-r border-black/10 px-3.5 py-1.5 text-xs font-medium transition-all duration-200 last:border-r-0 dark:border-[rgba(255,255,255,0.08)] bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-black dark:bg-transparent dark:text-white/65 dark:hover:bg-[rgba(255,255,255,0.05)] dark:hover:text-white"
>
1W
</button>
<button
class="cursor-pointer border-r border-black/10 px-3.5 py-1.5 text-xs font-medium transition-all duration-200 last:border-r-0 dark:border-[rgba(255,255,255,0.08)] bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-black dark:bg-transparent dark:text-white/65 dark:hover:bg-[rgba(255,255,255,0.05)] dark:hover:text-white"
>
1M
</button>
<button
class="cursor-pointer border-r border-black/10 px-3.5 py-1.5 text-xs font-medium transition-all duration-200 last:border-r-0 dark:border-[rgba(255,255,255,0.08)] bg-black text-white dark:bg-white dark:text-black"
>
3M
</button>
<button
class="cursor-pointer border-r border-black/10 px-3.5 py-1.5 text-xs font-medium transition-all duration-200 last:border-r-0 dark:border-[rgba(255,255,255,0.08)] bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-black dark:bg-transparent dark:text-white/65 dark:hover:bg-[rgba(255,255,255,0.05)] dark:hover:text-white"
>
1Y
</button>
</div>
</div>
</div>
<div
aria-label="Activity chart showing contribution frequency over time"
class="relative flex h-[200px] w-full items-end justify-between gap-0.5"
role="img"
>
<div
aria-label="23 contributions dashboard.activity.aria_range"
class="group/bar relative flex h-full flex-1 cursor-pointer items-end outline-none"
tabindex="0"
>
<div
animate="[object Object]"
class="w-full rounded-t-[2px] transition-all duration-200 bg-zinc-500 hover:bg-zinc-700 dark:bg-zinc-600 dark:hover:bg-zinc-400"
initial="[object Object]"
transition="[object Object]"
/>
</div>
<div
aria-label="27 con
|
|
Run Unit Tests (Vitest):
app/page.test.tsx#L538
TestingLibraryElementError: Unable to find an element with the text: Unable to load stats. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="min-h-screen overflow-x-hidden bg-transparent font-sans text-black dark:text-white selection:bg-black/20 dark:selection:bg-white/20"
>
<div
class="pointer-events-none fixed inset-0 overflow-hidden"
>
<div
class="absolute -left-[10%] -top-[10%] h-[40%] w-[40%] rounded-full bg-emerald-500/5 blur-[120px]"
/>
<div
class="absolute -right-[10%] top-[20%] h-[30%] w-[30%] rounded-full bg-cyan-500/5 blur-[120px]"
/>
</div>
<main
class="relative z-10 mx-auto max-w-6xl px-6 mt-32"
>
<div
class="mb-16 text-center"
>
<button
data-testid="discord-button"
>
Discord Button
</button>
<div>
<h1
class="hero-text opacity-0 translate-y-10 mb-8 bg-gradient-to-br from-gray-900 via-black to-gray-600 dark:from-white dark:via-gray-100 dark:to-gray-500 bg-clip-text text-transparent text-5xl font-black tracking-tighter md:text-8xl pb-2"
>
Elevate Your
<br />
<span
class="contribution-text inline-block bg-[length:300%_300%] bg-gradient-to-r from-emerald-400 via-cyan-500 to-purple-500 bg-clip-text text-transparent drop-shadow-sm"
>
Contribution
</span>
Story.
</h1>
</div>
<p
class="mx-auto max-w-2xl text-sm sm:text-lg leading-relaxed text-gray-600 dark:text-white/65 md:text-xl "
data-testid="motion-p"
>
CommitPulse converts your GitHub commit history into a live, 3D animated badge. The more you commit, the taller your city grows! Embed it in your profile README with one line.
</p>
</div>
<section
class="mx-auto mb-16 max-w-4xl relative z-20"
>
<div
class="rounded-3xl border border-black/5 bg-white/60 p-4 shadow-xl shadow-black/5 backdrop-blur-xl dark:border-white/10 dark:bg-[#0a0a0a]/80 dark:shadow-2xl dark:shadow-black/50 md:p-8"
>
<form
class="flex flex-col gap-4 w-full"
>
<div
class="flex flex-col sm:flex-row gap-4 w-full"
>
<div
class="relative flex-1 flex items-center"
>
<span
class="absolute left-4 text-zinc-400 dark:text-zinc-500"
>
<svg
aria-hidden="true"
class="lucide lucide-search"
fill="none"
height="18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m21 21-4.34-4.34"
/>
<circle
cx="11"
cy="11"
r="8"
/>
</svg>
</span>
<input
aria-label="Enter GitHub username to generate badge"
class="flex-1 rounded-2xl border border-black/10 bg-white pl-12 pr-10 py-4 text-sm text-black outline-none transition-all duration-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent dark:border-white/10 dark:bg
|
|
Run Unit Tests (Vitest):
app/page.test.tsx#L400
TestingLibraryElementError: Unable to find a label with the text of: Dismiss guide
Ignored nodes: comments, script, style
<body>
<div>
<div
class="min-h-screen overflow-x-hidden bg-transparent font-sans text-black dark:text-white selection:bg-black/20 dark:selection:bg-white/20"
>
<div
class="pointer-events-none fixed inset-0 overflow-hidden"
>
<div
class="absolute -left-[10%] -top-[10%] h-[40%] w-[40%] rounded-full bg-emerald-500/5 blur-[120px]"
/>
<div
class="absolute -right-[10%] top-[20%] h-[30%] w-[30%] rounded-full bg-cyan-500/5 blur-[120px]"
/>
</div>
<main
class="relative z-10 mx-auto max-w-6xl px-6 mt-32"
>
<div
class="mb-16 text-center"
>
<button
data-testid="discord-button"
>
Discord Button
</button>
<div>
<h1
class="hero-text opacity-0 translate-y-10 mb-8 bg-gradient-to-br from-gray-900 via-black to-gray-600 dark:from-white dark:via-gray-100 dark:to-gray-500 bg-clip-text text-transparent text-5xl font-black tracking-tighter md:text-8xl pb-2"
>
Elevate Your
<br />
<span
class="contribution-text inline-block bg-[length:300%_300%] bg-gradient-to-r from-emerald-400 via-cyan-500 to-purple-500 bg-clip-text text-transparent drop-shadow-sm"
>
Contribution
</span>
Story.
</h1>
</div>
<p
class="mx-auto max-w-2xl text-sm sm:text-lg leading-relaxed text-gray-600 dark:text-white/65 md:text-xl "
data-testid="motion-p"
>
CommitPulse converts your GitHub commit history into a live, 3D animated badge. The more you commit, the taller your city grows! Embed it in your profile README with one line.
</p>
</div>
<section
class="mx-auto mb-16 max-w-4xl relative z-20"
>
<div
class="rounded-3xl border border-black/5 bg-white/60 p-4 shadow-xl shadow-black/5 backdrop-blur-xl dark:border-white/10 dark:bg-[#0a0a0a]/80 dark:shadow-2xl dark:shadow-black/50 md:p-8"
>
<form
class="flex flex-col gap-4 w-full"
>
<div
class="flex flex-col sm:flex-row gap-4 w-full"
>
<div
class="relative flex-1 flex items-center"
>
<span
class="absolute left-4 text-zinc-400 dark:text-zinc-500"
>
<svg
aria-hidden="true"
class="lucide lucide-search"
fill="none"
height="18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m21 21-4.34-4.34"
/>
<circle
cx="11"
cy="11"
r="8"
/>
</svg>
</span>
<input
aria-label="Enter GitHub username to generate badge"
class="flex-1 rounded-2xl border border-black/10 bg-white pl-12 pr-10 py-4 text-sm text-black outline-none transition-all duration-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent dark:border-white/10 dark:bg-black/60 dark:text-white dark:placeholder:text-gray-500 shadow-inner"
maxlength="39"
placeholder="Enter GitHub Username"
|
|
Complete job
Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/setup-node@v4. Actions will be forced to run with Node.js 24 by default starting June 16th, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L34
'whileInView' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L33
'whileDrag' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L32
'whileFocus' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L31
'whileTap' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L30
'whileHover' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L29
'variants' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L28
'transition' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L27
'exit' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L26
'initial' is defined but never used
|
|
Run ESLint:
app/compare/CompareClient.accessibility.test.tsx#L25
'animate' is defined but never used
|
background
wait
wait-all
cancel
Loading