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", "added to": "added to",
"removed from": "removed from", "removed from": "removed from",
"Skip Navigation": "Skip Navigation", "Skip Navigation": "Skip Navigation",
"by %channelTitle%": "by %channelTitle%",
"Reset": "Reset", "Reset": "Reset",
"Reset to original (previous) publish date": "Reset to original (previous) publish date", "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--" "--end--": "--end--"
} }

View file

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