From 483cba979ba070f105b5867c07fe5a18d8e1cc94 Mon Sep 17 00:00:00 2001
From: Theophilus Adesola <margarettadebolaa@gmail.com>
Date: Sat, 29 Aug 2026 18:05:19 +0100
Subject: [PATCH 1/4] feat: add back button component for nested navigation

---
 .../[courseId]/modules/[moduleId]/page.tsx    | 11 ++--------
 src/app/courses/[courseId]/page.tsx           |  2 ++
 src/app/courses/[courseId]/quiz/page.tsx      | 11 ++--------
 src/app/credentials/[credentialId]/page.tsx   |  2 ++
 src/components/shared/back-button.tsx         | 22 +++++++++++++++++++
 5 files changed, 30 insertions(+), 18 deletions(-)
 create mode 100644 src/components/shared/back-button.tsx

diff --git a/src/app/courses/[courseId]/modules/[moduleId]/page.tsx b/src/app/courses/[courseId]/modules/[moduleId]/page.tsx
index 4075384..79ea4b5 100644
--- a/src/app/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/src/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -5,6 +5,7 @@ import { useModule, useCourseDetail } from "@/lib/hooks/use-courses";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
+import { BackButton } from "@/components/shared/back-button";
 import { ProgressBar } from "@/components/course/progress-bar";
 import { useCourseStore } from "@/store/course-store";
 import { useToastContext } from "@/components/shared/toast";
@@ -83,15 +84,7 @@ export default function ModulePage({
   return (
     <div className="mx-auto max-w-3xl px-4 py-8">
       {/* Breadcrumb */}
-      <div className="mb-6">
-        <Link
-          href={`/courses/${courseId}`}
-          className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-        >
-          <ArrowLeft className="h-4 w-4" />
-          Back to Course
-        </Link>
-      </div>
+      <BackButton />
 
       {/* Progress */}
       {courseProgress && (
diff --git a/src/app/courses/[courseId]/page.tsx b/src/app/courses/[courseId]/page.tsx
index 136ed0f..512a896 100644
--- a/src/app/courses/[courseId]/page.tsx
+++ b/src/app/courses/[courseId]/page.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge, difficultyVariant } from "@/components/ui/badge";
 import { AutoBreadcrumb } from "@/components/ui/breadcrumb";
+import { BackButton } from "@/components/shared/back-button";
 import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
 import { useToastContext } from "@/components/shared/toast";
 import {
@@ -86,6 +87,7 @@ export default function CourseDetailPage({
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-8">
+      <BackButton />
       <AutoBreadcrumb
         className="mb-6"
         labels={{ [courseId]: course.title }}
diff --git a/src/app/courses/[courseId]/quiz/page.tsx b/src/app/courses/[courseId]/quiz/page.tsx
index 77a5218..ba519a6 100644
--- a/src/app/courses/[courseId]/quiz/page.tsx
+++ b/src/app/courses/[courseId]/quiz/page.tsx
@@ -3,6 +3,7 @@
 import { lazy, Suspense, useState, useCallback } from "react";
 import { useQuiz } from "@/lib/hooks/use-quiz";
 import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
+import { BackButton } from "@/components/shared/back-button";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
@@ -79,15 +80,7 @@ export default function QuizPage({
 
   return (
     <div className="mx-auto max-w-3xl px-4 py-8">
-      <div className="mb-6">
-        <Link
-          href={`/courses/${courseId}`}
-          className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
-        >
-          <ArrowLeft className="h-4 w-4" />
-          Back to Course
-        </Link>
-      </div>
+      <BackButton />
 
       <Suspense fallback={<LoadingSkeleton count={3} />}>
         <QuizInterface
diff --git a/src/app/credentials/[credentialId]/page.tsx b/src/app/credentials/[credentialId]/page.tsx
index 837248e..8031d96 100644
--- a/src/app/credentials/[credentialId]/page.tsx
+++ b/src/app/credentials/[credentialId]/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useCredentialDetail } from "@/lib/hooks/use-credentials";
 import { CredentialBadge } from "@/components/credentials/credential-badge";
 import { QrCode } from "@/components/credentials/qr-code";
+import { BackButton } from "@/components/shared/back-button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
@@ -111,6 +112,7 @@ export default function CredentialDetailPage({
 
   return (
     <div className="mx-auto max-w-2xl px-4 py-8">
+      <BackButton />
       {/* Badge */}
       <div className="flex justify-center mb-8">
         <CredentialBadge
diff --git a/src/components/shared/back-button.tsx b/src/components/shared/back-button.tsx
new file mode 100644
index 0000000..6e11f55
--- /dev/null
+++ b/src/components/shared/back-button.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function BackButton() {
+  const router = useRouter();
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => router.back()}
+      className="mb-4 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+      aria-label="Go back to previous page"
+    >
+      <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
+      Back
+    </Button>
+  );
+}

From 04b4383f64c688fd3859d24ccc4de40f3335fe9f Mon Sep 17 00:00:00 2001
From: Theophilus Adesola <margarettadebolaa@gmail.com>
Date: Sat, 29 Aug 2026 18:07:28 +0100
Subject: [PATCH 2/4] feat: add share button component with web share api
 support

---
 src/app/courses/[courseId]/page.tsx         |  14 +-
 src/app/credentials/[credentialId]/page.tsx |  15 ++-
 src/components/shared/share-button.tsx      | 136 ++++++++++++++++++++
 3 files changed, 154 insertions(+), 11 deletions(-)
 create mode 100644 src/components/shared/share-button.tsx

diff --git a/src/app/courses/[courseId]/page.tsx b/src/app/courses/[courseId]/page.tsx
index 512a896..e4b56ef 100644
--- a/src/app/courses/[courseId]/page.tsx
+++ b/src/app/courses/[courseId]/page.tsx
@@ -10,6 +10,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge, difficultyVariant } from "@/components/ui/badge";
 import { AutoBreadcrumb } from "@/components/ui/breadcrumb";
 import { BackButton } from "@/components/shared/back-button";
+import { ShareButton } from "@/components/shared/share-button";
 import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
 import { useToastContext } from "@/components/shared/toast";
 import {
@@ -88,10 +89,15 @@ export default function CourseDetailPage({
   return (
     <div className="mx-auto max-w-4xl px-4 py-8">
       <BackButton />
-      <AutoBreadcrumb
-        className="mb-6"
-        labels={{ [courseId]: course.title }}
-      />
+      <div className="flex items-center justify-between mb-6">
+        <AutoBreadcrumb
+          labels={{ [courseId]: course.title }}
+        />
+        <ShareButton 
+          url={typeof window !== "undefined" ? window.location.href : ""} 
+          title={course.title} 
+        />
+      </div>
 
       {/* Hero */}
       <div className="mb-8">
diff --git a/src/app/credentials/[credentialId]/page.tsx b/src/app/credentials/[credentialId]/page.tsx
index 8031d96..9111639 100644
--- a/src/app/credentials/[credentialId]/page.tsx
+++ b/src/app/credentials/[credentialId]/page.tsx
@@ -23,6 +23,7 @@ import {
   Key,
 } from "lucide-react";
 import { useState, useCallback } from "react";
+import { ShareButton } from "@/components/shared/share-button";
 
 export default function CredentialDetailPage({
   params,
@@ -252,13 +253,13 @@ export default function CredentialDetailPage({
               <Download className="h-4 w-4" />
               Download Certificate
             </button>
-            <Link
-              href={`/verify/${credentialId}`}
-              className="flex items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-gray-800 transition-colors"
-            >
-              <ExternalLink className="h-4 w-4" />
-              Share Verification Link
-            </Link>
+            <ShareButton
+              url={verificationUrl}
+              title={credential.courseTitle}
+              text="Check out my verified credential!"
+              variant="default"
+              className="w-full flex items-center justify-center rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-gray-800 transition-colors"
+            />
           </div>
         </CardContent>
       </Card>
diff --git a/src/components/shared/share-button.tsx b/src/components/shared/share-button.tsx
new file mode 100644
index 0000000..b469ebf
--- /dev/null
+++ b/src/components/shared/share-button.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Share2, Copy, Twitter, Linkedin, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { QrCode } from '@/components/credentials/qr-code';
+import { cn } from '@/lib/utils/cn';
+
+interface ShareButtonProps {
+  url: string;
+  title?: string;
+  text?: string;
+  className?: string;
+  variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+}
+
+export function ShareButton({ 
+  url, 
+  title = 'Check this out!', 
+  text = '',
+  className,
+  variant = 'outline'
+}: ShareButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [canShare, setCanShare] = useState(false);
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined' && navigator.share) {
+      setCanShare(true);
+    }
+  }, []);
+
+  const handleShareClick = async () => {
+    if (canShare) {
+      try {
+        await navigator.share({
+          title,
+          text,
+          url,
+        });
+        return;
+      } catch (err) {
+        if ((err as Error).name !== 'AbortError') {
+          console.error('Error sharing', err);
+          setOpen(true);
+        }
+      }
+    } else {
+      setOpen(true);
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy', err);
+    }
+  };
+
+  const shareToTwitter = () => {
+    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text || title)}`;
+    window.open(twitterUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  const shareToLinkedIn = () => {
+    const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+    window.open(linkedinUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <>
+      <Button variant={variant} size="sm" onClick={handleShareClick} className={cn("gap-2", className)}>
+        <Share2 className="h-4 w-4" aria-hidden="true" />
+        Share
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Share link</DialogTitle>
+            <DialogDescription>
+              Share this page with others or scan the QR code.
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="flex flex-col items-center justify-center py-4 space-y-4">
+            <div className="bg-white p-2 rounded-xl">
+              <QrCode value={url} size={160} />
+            </div>
+            
+            <div className="flex items-center space-x-2 w-full">
+              <div className="grid flex-1 gap-2">
+                <input
+                  id="link"
+                  defaultValue={url}
+                  readOnly
+                  className="w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
+                />
+              </div>
+              <Button type="button" size="sm" className="px-3" onClick={handleCopy}>
+                <span className="sr-only">Copy</span>
+                {copied ? (
+                  <Check className="h-4 w-4 text-green-500" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex justify-center space-x-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+            <Button variant="outline" className="w-full gap-2" onClick={shareToTwitter}>
+              <Twitter className="h-4 w-4 text-[#1DA1F2]" />
+              Twitter
+            </Button>
+            <Button variant="outline" className="w-full gap-2" onClick={shareToLinkedIn}>
+              <Linkedin className="h-4 w-4 text-[#0A66C2]" />
+              LinkedIn
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

From 782fb14afc67d92091c229acc303db70fd2aa9fb Mon Sep 17 00:00:00 2001
From: Theophilus Adesola <margarettadebolaa@gmail.com>
Date: Sat, 29 Aug 2026 18:09:03 +0100
Subject: [PATCH 3/4] feat: add avatar upload component with cropping

---
 src/app/settings/page.tsx               |  15 ++
 src/components/shared/avatar-upload.tsx | 178 ++++++++++++++++++++++++
 2 files changed, 193 insertions(+)
 create mode 100644 src/components/shared/avatar-upload.tsx

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index d52441d..6be08c2 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/hooks/use-auth";
 import { useToastContext } from "@/components/shared/toast";
 import { getProfile, updateProfile } from "@/lib/api/auth";
+import { AvatarUpload } from "@/components/shared/avatar-upload";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -115,6 +116,20 @@ export default function SettingsPage() {
           <CardTitle className="text-lg">Profile Information</CardTitle>
         </CardHeader>
         <CardContent className="space-y-6">
+          {/* Avatar Upload */}
+          <div className="flex justify-center mb-6">
+            <AvatarUpload
+              currentAvatarUrl={undefined} // We could load this from profile if the API supported it
+              name={displayName || walletAddress || "User"}
+              onUpload={async (file) => {
+                // In a real app, upload the file to storage and update profile
+                // For now, simulate upload
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+                addToast("Avatar uploaded successfully", "success");
+              }}
+            />
+          </div>
+
           {/* Display Name */}
           <div className="space-y-2">
             <label
diff --git a/src/components/shared/avatar-upload.tsx b/src/components/shared/avatar-upload.tsx
new file mode 100644
index 0000000..d6244fc
--- /dev/null
+++ b/src/components/shared/avatar-upload.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+import React, { useState, useCallback, useRef } from 'react';
+import Cropper, { Area } from 'react-easy-crop';
+import { Camera, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarImage, AvatarFallback, getInitials } from '@/components/ui/avatar';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { useToastContext } from '@/components/shared/toast';
+
+const createImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (error) => reject(error));
+    image.setAttribute('crossOrigin', 'anonymous');
+    image.src = url;
+  });
+
+async function getCroppedImg(
+  imageSrc: string,
+  pixelCrop: Area
+): Promise<File | null> {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  );
+
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        resolve(null);
+        return;
+      }
+      resolve(new File([blob], 'avatar.jpg', { type: 'image/jpeg' }));
+    }, 'image/jpeg');
+  });
+}
+
+interface AvatarUploadProps {
+  currentAvatarUrl?: string;
+  name: string;
+  onUpload: (file: File) => Promise<void>;
+}
+
+export function AvatarUpload({ currentAvatarUrl, name, onUpload }: AvatarUploadProps) {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isCropDialogOpen, setIsCropDialogOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { addToast } = useToastContext();
+
+  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0];
+      if (!file.type.startsWith('image/')) {
+        addToast('Please select an image file', 'error');
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        addToast('Image must be less than 5MB', 'error');
+        return;
+      }
+      const imageDataUrl = URL.createObjectURL(file);
+      setImageSrc(imageDataUrl);
+      setIsCropDialogOpen(true);
+    }
+  };
+
+  const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {
+    setCroppedAreaPixels(croppedAreaPixels);
+  }, []);
+
+  const handleSave = async () => {
+    if (!imageSrc || !croppedAreaPixels) return;
+
+    try {
+      setIsUploading(true);
+      const croppedImageFile = await getCroppedImg(imageSrc, croppedAreaPixels);
+      if (croppedImageFile) {
+        await onUpload(croppedImageFile);
+        addToast('Avatar updated successfully', 'success');
+        setIsCropDialogOpen(false);
+        setImageSrc(null);
+      }
+    } catch (e) {
+      console.error(e);
+      addToast('Failed to crop and upload image', 'error');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className="relative inline-block">
+        <Avatar size="lg" className="h-24 w-24 border-2 border-white shadow-sm dark:border-gray-900">
+          <AvatarImage src={currentAvatarUrl} alt={name} />
+          <AvatarFallback className="text-xl">{getInitials(name)}</AvatarFallback>
+        </Avatar>
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+          aria-label="Upload new avatar"
+        >
+          <Camera className="h-4 w-4" />
+        </button>
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInputRef}
+          onChange={onFileChange}
+          className="hidden"
+          aria-hidden="true"
+        />
+      </div>
+
+      <Dialog open={isCropDialogOpen} onOpenChange={setIsCropDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Crop Image</DialogTitle>
+          </DialogHeader>
+          <div className="relative h-64 w-full sm:h-80 bg-gray-900 overflow-hidden rounded-md">
+            {imageSrc && (
+              <Cropper
+                image={imageSrc}
+                crop={crop}
+                zoom={zoom}
+                aspect={1}
+                onCropChange={setCrop}
+                onCropComplete={onCropComplete}
+                onZoomChange={setZoom}
+              />
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsCropDialogOpen(false)}
+              disabled={isUploading}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={isUploading}>
+              {isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Save Avatar
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

From 064a27d536e1f37fb95ebea5d986549c82259243 Mon Sep 17 00:00:00 2001
From: Theophilus Adesola <margarettadebolaa@gmail.com>
Date: Sat, 29 Aug 2026 18:10:41 +0100
Subject: [PATCH 4/4] chore: enhance aria labels, roles and attributes for
 accessibility

---
 src/components/layout/header.tsx           | 5 ++++-
 src/components/shared/loading-skeleton.tsx | 2 +-
 src/components/shared/toast.tsx            | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index bd71ff2..a602851 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -68,7 +68,10 @@ export function Header() {
           {isAuthenticated && walletAddress && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button className="flex items-center gap-2 outline-none hover:opacity-80 transition-opacity">
+                <button 
+                  className="flex items-center gap-2 outline-none hover:opacity-80 transition-opacity"
+                  aria-label="User account menu"
+                >
                   <Avatar size="sm">
                     <AvatarFallback>{getInitials(walletAddress)}</AvatarFallback>
                   </Avatar>
diff --git a/src/components/shared/loading-skeleton.tsx b/src/components/shared/loading-skeleton.tsx
index 2da6d8d..b8a97b2 100644
--- a/src/components/shared/loading-skeleton.tsx
+++ b/src/components/shared/loading-skeleton.tsx
@@ -22,7 +22,7 @@ export function LoadingSkeleton({
   variant = "card",
 }: LoadingSkeletonProps) {
   return (
-    <div className={cn("space-y-3", className)}>
+    <div className={cn("space-y-3", className)} aria-live="polite" aria-busy="true">
       {Array.from({ length: count }).map((_, i) => {
         if (variant === "text") {
           return <SkeletonText key={i} />;
diff --git a/src/components/shared/toast.tsx b/src/components/shared/toast.tsx
index 1862647..c0771c9 100644
--- a/src/components/shared/toast.tsx
+++ b/src/components/shared/toast.tsx
@@ -104,6 +104,7 @@ export function Toast({
   return (
     <div
       role="status"
+      aria-live="polite"
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}