mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-03-09 15:40:26 +00:00
feat: add semantic roles and aria labels to achievement list
This commit is contained in:
parent
012f872f60
commit
50303251a2
1 changed files with 17 additions and 2 deletions
|
@ -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,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue