feat: add semantic roles and aria labels to achievement list

This commit is contained in:
cj-do-gta-sander 2024-10-24 09:57:11 -03:00
parent 012f872f60
commit 50303251a2

View file

@ -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) { function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
const { t } = useTranslation("achievement"); const { t } = useTranslation("achievement");
const { userDetails, hasActiveSubscription } = useUserDetails(); const { userDetails, hasActiveSubscription } = useUserDetails();
@ -195,9 +204,15 @@ function AchievementList({ achievements }: AchievementListProps) {
const { formatDateTime } = useDate(); const { formatDateTime } = useDate();
return ( return (
<ul className={styles.list}> <ul className={styles.list} role="list">
{achievements.map((achievement, index) => ( {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 <img
className={styles.listItemImage({ className={styles.listItemImage({
unlocked: achievement.unlocked, unlocked: achievement.unlocked,