feat: add aria label to achievement summary

src/locales/en/translation.json

@@ -375,4 +375,4 @@
     "show_and_compare_achievements": "Show and compare your achievements to other users",
     "animated_profile_banner": "Animated profile banner"
   }
-}
+}

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -16,6 +16,7 @@ import { average } from "color.js";
 import Color from "color";
 import { Link } from "@renderer/components";
 import { ComparedAchievementList } from "./compared-achievement-list";
+import { TFunction } from "i18next/typescript/t";
 
 interface UserInfo {
   id: string;
@@ -39,10 +40,26 @@ interface AchievementSummaryProps {
   isComparison?: boolean;
 }
 
+const ariaLabelSummary = (
+  t: TFunction,
+  gameTitle: string,
+  user: UserInfo
+): string => {
+  return t("aria_achievement_summary", {
+    userDisplayName: user.displayName,
+    gameTitle: gameTitle,
+    userAchievementCount: user.unlockedAchievementCount,
+    userTotalAchievementCount: user.totalAchievementCount,
+    percentage: formatDownloadProgress(
+      user.unlockedAchievementCount / user.totalAchievementCount
+    ),
+  });
+};
+
 function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
   const { t } = useTranslation("achievement");
   const { userDetails, hasActiveSubscription } = useUserDetails();
-  const { handleClickOpenCheckout } = useContext(gameDetailsContext);
+  const { handleClickOpenCheckout, gameTitle } = useContext(gameDetailsContext);
 
   const getProfileImage = (
     user: Pick<UserInfo, "profileImageUrl" | "displayName">
@@ -124,6 +141,8 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
         alignItems: "center",
         padding: `${SPACING_UNIT}px`,
       }}
+      role="region"
+      aria-label={ariaLabelSummary(t, gameTitle, user)}
     >
       {getProfileImage(user)}
       <div