diff --git a/static/app-strings.json b/static/app-strings.json index 1c82b4533..185ec6f77 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -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--" } diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index cb342f926..88bafe9e7 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -194,18 +194,32 @@ const ClaimPreview = forwardRef((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((props: Props, ref: any) => { )} - {!hideMenu && ( - - )} + {!hideMenu && } );