Skip to content

Feat/accessibility animations skeletons #390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DeFiVC merged 6 commits into from
Aug 29, 2026
Merged

Feat/accessibility animations skeletons #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2c50a5d
feat: enhance keyboard navigation across components
adedamolamiposi Aug 28, 2026
d79bc5d
feat: add ARIA labels and attributes for screen readers
adedamolamiposi Aug 28, 2026
51a23a7
feat: add smooth page transitions for route changes
adedamolamiposi Aug 28, 2026
58c9efa
feat: introduce composable skeleton variants for content types
adedamolamiposi Aug 28, 2026
e5d806e
Merge branch 'main' into feat/accessibility-animations-skeletons
adedamolamiposi Aug 28, 2026
60d97b6
Merge branch 'main' into feat/accessibility-animations-skeletons
adedamolamiposi Aug 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export const metadata: Metadata = {
},
};

import { PageTransition } from "@/components/shared/page-transition";

export default function RootLayout({
children,
}: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/course/course-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const CourseCard = memo(function CourseCard({
<div className="absolute top-2 right-2" onClick={(e) => e.preventDefault()} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') e.preventDefault(); }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="p-1.5 text-gray-500 hover:text-gray-900 bg-white/50 hover:bg-white/80 rounded-full transition-colors dark:text-gray-300 dark:hover:text-gray-100 dark:bg-gray-900/50 dark:hover:bg-gray-900/80">
<button aria-label="Course options" className="p-1.5 text-gray-500 hover:text-gray-900 bg-white/50 hover:bg-white/80 rounded-full transition-colors dark:text-gray-300 dark:hover:text-gray-100 dark:bg-gray-900/50 dark:hover:bg-gray-900/80">
<MoreVertical className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
Expand Down
2 changes: 1 addition & 1 deletion src/components/course/module-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function ModuleList({
Course Modules ({modules.length})
</h3>
<ScrollArea className="h-[min(24rem,60vh)] pr-3">
<div className="space-y-1" role="list">
<div className="space-y-1" role="list" aria-label="Module list">
{sorted.map((mod, index) => {
const isCompleted = completedIds.has(mod.id);
const isCurrent = mod.id === currentModuleId;
Expand Down
4 changes: 2 additions & 2 deletions src/components/course/quiz-interface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function QuizInterface({ quiz, onSubmit, onRetry, className }: QuizInterf
// Results view
if (attempt) {
return (
<Card className={cn("max-w-2xl mx-auto", className)}>
<Card className={cn("max-w-2xl mx-auto", className)} aria-live="polite">
<CardHeader className="text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-stellar-purple/10 to-stellar-blue/10">
<Trophy
Expand Down Expand Up @@ -141,7 +141,7 @@ export function QuizInterface({ quiz, onSubmit, onRetry, className }: QuizInterf

// Question view
return (
<Card className={cn("max-w-2xl mx-auto", className)}>
<Card className={cn("max-w-2xl mx-auto", className)} aria-live="polite">
<CardHeader>
<div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-500">
Expand Down
5 changes: 2 additions & 3 deletions src/components/shared/loading-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use client";

import { cn } from "@/lib/utils/cn";
import {
Skeleton,
SkeletonCircle,
SkeletonStack,
Expand Down Expand Up @@ -42,8 +41,8 @@ export function CourseCardSkeleton() {
<SkeletonRect className="h-40 w-full rounded-none" />
<div className="p-4 space-y-3">
<div className="flex gap-2">
<Skeleton className="h-5 w-16 rounded-full" />
<Skeleton className="h-5 w-20 rounded-full" />
<SkeletonRect className="h-5 w-16 rounded-full" />
<SkeletonRect className="h-5 w-20 rounded-full" />
</div>
<SkeletonText className="h-5 w-3/4" />
<SkeletonStack lines={2} />
Expand Down