diff --git a/static/app-strings.json b/static/app-strings.json index 876d0469b..e0e559fa5 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2021,14 +2021,14 @@ "Chat": "Chat", "Tipped": "Tipped", "Fromage": "Fromage", - "In Favorites": "In Favorites", + "In Favorites": "In Favorites", "In Watch Later": "In Watch Later", "In %lastCollectionName%": "In %lastCollectionName%", "Remove from Watch Later": "Remove from Watch Later", "Add to Watch Later": "Add to Watch Later", - "Added": "Added", + "Added": "Added", "Item added to Watch Later": "Item added to Watch Later", - "Item removed from Watch Later": "Item removed from Watch Later", + "Item removed from Watch Later": "Item removed from Watch Later", "Item added to %lastCollectionName%": "Item added to %lastCollectionName%", "Item removed from %lastCollectionName%": "Item removed from %lastCollectionName%", "Your publish is being confirmed and will be live soon": "Your publish is being confirmed and will be live soon", @@ -2057,7 +2057,16 @@ "Only select creators can receive tips at this time": "Only select creators can receive tips at this time", "The payment will be made from your saved card": "The payment will be made from your saved card", "Commenting...": "Commenting...", + "Show %count% replies": "Show %count% replies", + "Show reply": "Show reply", + "added to": "added to", + "removed from": "removed from", + "Skip Navigation": "Skip Navigation", "Reset": "Reset", "Reset to original (previous) publish date": "Reset to original (previous) publish date", + "%title% by %channelTitle%": "%title% by %channelTitle%", + "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%", + "%title% by %channelTitle% %ariaDate%, %mediaDuration%": "%title% by %channelTitle% %ariaDate%, %mediaDuration%", + "Search for something...": "Search for something...", "--end--": "--end--" } diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 3205a4572..891ee6d3b 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -285,6 +285,11 @@ function App(props: Props) { } }, [hasMyChannels, hasNoChannels, hasActiveChannelClaim, setActiveChannelIfNotSet, setIncognito]); + useEffect(() => { + // $FlowFixMe + document.documentElement.setAttribute('lang', language); + }, [language]); + useEffect(() => { if (!languages.includes(language)) { setLanguage(language); diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx index 46d467d05..b8927be06 100644 --- a/ui/component/button/view.jsx +++ b/ui/component/button/view.jsx @@ -97,6 +97,9 @@ const Button = forwardRef((props: Props, ref: any) => { const combinedRef = useCombinedRefs(ref, innerRef, myref); const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default + // Label can be a string or object ( use title instead ) + const ariaLabel = description || (typeof label === 'string' ? label : title); + const content = ( {icon && } @@ -150,6 +153,7 @@ const Button = forwardRef((props: Props, ref: any) => { className={combinedClassName} title={title} onClick={onClick} + aria-label={ariaLabel} > {content} @@ -196,6 +200,7 @@ const Button = forwardRef((props: Props, ref: any) => { disabled={disable} className={combinedClassName} activeClassName={activeClass} + aria-label={ariaLabel} > {content} @@ -216,6 +221,7 @@ const Button = forwardRef((props: Props, ref: any) => { }} className={combinedClassName} activeClassName={activeClass} + aria-label={ariaLabel} {...otherProps} > {content} @@ -224,7 +230,7 @@ const Button = forwardRef((props: Props, ref: any) => { ); @@ -96,6 +104,8 @@ class UriIndicator extends React.PureComponent { className={classnames(className, 'button--uri-indicator')} navigate={channelLink} target={external ? '_blank' : undefined} + aria-hidden={!focusable} + tabIndex={focusable ? 0 : -1} > {inner} diff --git a/ui/component/videoDuration/view.jsx b/ui/component/videoDuration/view.jsx index 625924cac..086cd4352 100644 --- a/ui/component/videoDuration/view.jsx +++ b/ui/component/videoDuration/view.jsx @@ -1,6 +1,6 @@ // @flow import React from 'react'; - +import formatMediaDuration from 'util/formatMediaDuration'; type Props = { claim: ?StreamClaim, className?: string, @@ -9,19 +9,11 @@ type Props = { function VideoDuration(props: Props) { const { claim, className } = props; - const video = claim && claim.value && (claim.value.video || claim.value.audio); + const media = claim && claim.value && (claim.value.video || claim.value.audio); let duration; - if (video && video.duration) { + if (media && media.duration) { // $FlowFixMe - let date = new Date(null); - date.setSeconds(video.duration); - let timeString = date.toISOString().substr(11, 8); - - if (timeString.startsWith('00:')) { - timeString = timeString.substr(3); - } - - duration = timeString; + duration = formatMediaDuration(media.duration); } return duration ? {duration} : null; diff --git a/ui/modal/modal.jsx b/ui/modal/modal.jsx index de99d2b67..49c31854f 100644 --- a/ui/modal/modal.jsx +++ b/ui/modal/modal.jsx @@ -14,8 +14,8 @@ type ModalProps = { abortButtonLabel?: string, confirmButtonDisabled?: boolean, abortButtonDisabled?: boolean, - onConfirmed?: any => any, - onAborted?: any => any, + onConfirmed?: (any) => any, + onAborted?: (any) => any, className?: string, children?: React.Node, extraContent?: React.Node, @@ -52,7 +52,13 @@ export function Modal(props: ModalProps) { > {title &&

{title}

} {type === 'card' && ( -