use full sentences with variables for claim preview aria-label

This commit is contained in:
btzr-io 2021-07-22 02:37:57 -05:00
parent c983af927f
commit 2a291366da
2 changed files with 26 additions and 13 deletions

View file

@ -2056,8 +2056,9 @@
"added to": "added to",
"removed from": "removed from",
"Skip Navigation": "Skip Navigation",
"by %channelTitle%": "by %channelTitle%",
"Reset": "Reset",
"Reset to original (previous) publish date": "Reset to original (previous) publish date",
"%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%",
"%title% by %channelTitle% %ariaDate%, %mediaDuration%": "%title% by %channelTitle% %ariaDate%, %mediaDuration%",
"--end--": "--end--"
}

View file

@ -194,18 +194,32 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
}
// Aria-label value for claim preview
let ariaDate = date ? DateTime.getTimeAgoStr(date) : null;
let ariaLabelData = title;
if (!isChannelUri && channelTitle) {
ariaLabelData += ' ' + __('by %channelTitle%', { channelTitle });
}
if (date) {
ariaLabelData += ' ' + DateTime.getTimeAgoStr(date);
}
if (mediaDuration) {
ariaLabelData += ', ' + mediaDuration;
if (mediaDuration) {
if (ariaDate) {
ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%, %mediaDuration%', {
title,
channelTitle,
ariaDate,
mediaDuration,
});
} else {
ariaLabelData += ariaLabelData = __('%title% by %channelTitle%, %mediaDuration%', {
title,
channelTitle,
mediaDuration,
});
}
} else {
if (ariaDate) {
ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%', { title, channelTitle, ariaDate });
} else {
ariaLabelData += ariaLabelData = __('%title% by %channelTitle%', { title, channelTitle });
}
}
}
let navigateUrl = formatLbryUrlForWeb((claim && claim.canonical_url) || uri || '/');
@ -484,9 +498,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
)}
</div>
</div>
{!hideMenu && (
<ClaimMenuList uri={uri} collectionId={listId} />
)}
{!hideMenu && <ClaimMenuList uri={uri} collectionId={listId} />}
</>
</WrapperElement>
);