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) {
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,