diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 3fb09787..361cda6b 100644 --- a/src/locales/en/translation.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/renderer/src/pages/achievements/achievements-content.tsx b/src/renderer/src/pages/achievements/achievements-content.tsx index 72dfe83f..2c21c111 100644 --- a/src/renderer/src/pages/achievements/achievements-content.tsx +++ b/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 @@ -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)}