feat: enhance accessibility and testing with data-test attributes and improve error handling
Some checks failed
Workflow / ⚫️ Test (push) Has been cancelled
Workflow / ʦ TypeScript (push) Has been cancelled

This commit is contained in:
T. Zehetbauer
2026-04-01 10:46:44 +02:00
parent 3bcc5c70a3
commit abac22feb1
55 changed files with 1622 additions and 128 deletions

View File

@@ -16,6 +16,7 @@ import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
import { AccountNotFound } from '~/components/account-not-found';
import { CmsPageShell } from '~/components/cms-page-shell';
interface PageProps {
@@ -52,12 +53,12 @@ export default async function CourseDetailPage({ params }: PageProps) {
api.getSessions(courseId),
]);
if (!course) return <div>Kurs nicht gefunden</div>;
if (!course) return <AccountNotFound />;
const c = course as Record<string, unknown>;
const courseData = course as Record<string, unknown>;
return (
<CmsPageShell account={account} title={String(c.name)}>
<CmsPageShell account={account} title={String(courseData.name)}>
<div className="flex w-full flex-col gap-6">
{/* Summary Cards */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -66,7 +67,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
<GraduationCap className="text-primary h-5 w-5" />
<div>
<p className="text-muted-foreground text-xs">Name</p>
<p className="font-semibold">{String(c.name)}</p>
<p className="font-semibold">{String(courseData.name)}</p>
</div>
</CardContent>
</Card>
@@ -76,9 +77,12 @@ export default async function CourseDetailPage({ params }: PageProps) {
<div>
<p className="text-muted-foreground text-xs">Status</p>
<Badge
variant={STATUS_VARIANT[String(c.status)] ?? 'secondary'}
variant={
STATUS_VARIANT[String(courseData.status)] ?? 'secondary'
}
>
{STATUS_LABEL[String(c.status)] ?? String(c.status)}
{STATUS_LABEL[String(courseData.status)] ??
String(courseData.status)}
</Badge>
</div>
</CardContent>
@@ -89,7 +93,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
<div>
<p className="text-muted-foreground text-xs">Dozent</p>
<p className="font-semibold">
{String(c.instructor_id ?? '—')}
{String(courseData.instructor_id ?? '—')}
</p>
</div>
</CardContent>
@@ -100,9 +104,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
<div>
<p className="text-muted-foreground text-xs">Beginn Ende</p>
<p className="font-semibold">
{formatDate(c.start_date as string)}
{formatDate(courseData.start_date as string)}
{' '}
{formatDate(c.end_date as string)}
{formatDate(courseData.end_date as string)}
</p>
</div>
</CardContent>
@@ -113,7 +117,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
<div>
<p className="text-muted-foreground text-xs">Gebühr</p>
<p className="font-semibold">
{c.fee != null ? `${Number(c.fee).toFixed(2)}` : '—'}
{courseData.fee != null
? `${Number(courseData.fee).toFixed(2)}`
: '—'}
</p>
</div>
</CardContent>
@@ -124,7 +130,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
<div>
<p className="text-muted-foreground text-xs">Teilnehmer</p>
<p className="font-semibold">
{participants.length} / {String(c.capacity ?? '∞')}
{participants.length} / {String(courseData.capacity ?? '∞')}
</p>
</div>
</CardContent>