From ae8c3a076940f564891bd4a836ef2ff257adcb9f Mon Sep 17 00:00:00 2001
From: glsee <457429+glsee@users.noreply.github.com>
Date: Fri, 12 Jun 2026 05:45:32 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20accessibili?=
 =?UTF-8?q?ty=20in=20Achievements=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit improves the accessibility of the Achievements component by:
1. Adding a descriptive aria-label to the progress badge (e.g., "2 out of 5 achievements unlocked").
2. Adding visually hidden status text ("Locked" or "Unlocked") to achievement titles.

These changes ensure that screen reader users can understand their overall progress and the status of individual achievements.

Refactored the component to store the unlocked count in a variable for better readability.
---
 registry/new-york/components/achievements.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/registry/new-york/components/achievements.tsx b/registry/new-york/components/achievements.tsx
index 2be0fef..790be61 100644
--- a/registry/new-york/components/achievements.tsx
+++ b/registry/new-york/components/achievements.tsx
@@ -38,14 +38,18 @@ export function Achievements({
   className,
   ...props
 }: AchievementsProps) {
+  const unlockedCount = achievements.filter((a) => !a.isLocked).length;
+
   return (
     <Card className={cn("w-full", className)} {...props}>
       <CardHeader>
         <div className="flex items-center justify-between">
           <CardTitle>{title}</CardTitle>
-          <Badge variant="secondary">
-            {achievements.filter((a) => !a.isLocked).length} /{" "}
-            {achievements.length}
+          <Badge
+            variant="secondary"
+            aria-label={`${unlockedCount} out of ${achievements.length} achievements unlocked`}
+          >
+            {unlockedCount} / {achievements.length}
           </Badge>
         </div>
         {description && <CardDescription>{description}</CardDescription>}
@@ -76,6 +80,9 @@ export function Achievements({
             <div className="flex-1 space-y-1">
               <div className="flex items-center justify-between gap-2">
                 <p className="font-medium leading-none">
+                  <span className="sr-only">
+                    {achievement.isLocked ? "Locked: " : "Unlocked: "}
+                  </span>
                   {achievement.isSecret && achievement.isLocked
                     ? "Secret Achievement"
                     : achievement.title}