From 50303251a2cf61dd4e356e846478c17e6274dd66 Mon Sep 17 00:00:00 2001
From: cj-do-gta-sander <brepacks@proton.me>
Date: Thu, 24 Oct 2024 09:57:11 -0300
Subject: [PATCH] feat: add semantic roles and aria labels to achievement list

---
 .../achievements/achievements-content.tsx     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx
index 2c21c111..2b4f38a0 100644
--- a/src/renderer/src/pages/achievements/achievements-content.tsx
+++ b/src/renderer/src/pages/achievements/achievements-content.tsx
@@ -56,6 +56,15 @@ const ariaLabelSummary = (
   });
 };
 
+const ariaLabelAchievement = (
+  t: TFunction,
+  achievement: UserAchievement
+): string => {
+  return `${
+    achievement.unlocked ? t("achievement_unlocked") : t("achievement_locked")
+  }, ${achievement.displayName}, ${achievement.description}`;
+};
+
 function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
   const { t } = useTranslation("achievement");
   const { userDetails, hasActiveSubscription } = useUserDetails();
@@ -195,9 +204,15 @@ function AchievementList({ achievements }: AchievementListProps) {
   const { formatDateTime } = useDate();
 
   return (
-    <ul className={styles.list}>
+    <ul className={styles.list} role="list">
       {achievements.map((achievement, index) => (
-        <li key={index} className={styles.listItem} style={{ display: "flex" }}>
+        <li
+          key={index}
+          className={styles.listItem}
+          style={{ display: "flex" }}
+          role="listitem"
+          aria-label={ariaLabelAchievement(t, achievement)}
+        >
           <img
             className={styles.listItemImage({
               unlocked: achievement.unlocked,