LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix file actions accessibility

Browse source
This commit is contained in:
btzr-io 2021-07-15 15:14:21 -05:00
parent 6354a77bf1
commit 7c8c43d3a7
6 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/claimPreview/view.jsx
View file

@ -321,7 +321,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
{/* @if TARGET='app' */}
{claim && !isCollection && (
<div className="claim-preview__hover-actions">
<FileDownloadLink uri={canonicalUrl} hideOpenButton hideDownloadStatus />
<FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton hideDownloadStatus />
</div>
)}
{/* @endif */}
@ -332,7 +332,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
)}
{isPlayable && (
<div className="claim-preview__hover-actions">
<FileWatchLaterLink uri={uri} />
<FileWatchLaterLink focusable={false} uri={uri} />
</div>
)}
</FileThumbnail>

4
ui/component/claimPreviewTile/view.jsx
View file

@ -200,14 +200,14 @@ function ClaimPreviewTile(props: Props) {
{/* @if TARGET='app' */}
{isStream && (
<div className="claim-preview__hover-actions">
<FileDownloadLink uri={canonicalUrl} hideOpenButton />
<FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
</div>
)}
{/* @endif */}
{isPlayable && (
<div className="claim-preview__hover-actions">
<FileWatchLaterLink uri={uri} />
<FileWatchLaterLink focusable={false} uri={uri} />
</div>
)}

1
ui/component/fileActions/view.jsx
View file

@ -117,7 +117,6 @@ function FileActions(props: Props) {
<ClaimSupportButton uri={uri} fileAction />
<ClaimCollectionAddButton uri={uri} fileAction />
<Button
button="alt"
className="button--file-action"
icon={ICONS.REPOST}
label={

6
ui/component/fileDownloadLink/view.jsx
View file

@ -11,6 +11,7 @@ type Props = {
claimIsMine: boolean,
downloading: boolean,
loading: boolean,
focusable: boolean,
fileInfo: ?FileListItem,
openModal: (id: string, { path: string }) => void,
pause: () => void,
@ -35,6 +36,7 @@ function FileDownloadLink(props: Props) {
uri,
claim,
buttonType,
focusable = true,
showLabel = false,
hideOpenButton = false,
hideDownloadStatus = false,
@ -91,6 +93,8 @@ function FileDownloadLink(props: Props) {
pause();
openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
}}
aria-hidden={!focusable}
tabIndex={focusable ? 0 : -1}
/>
);
}
@ -105,6 +109,8 @@ function FileDownloadLink(props: Props) {
icon={ICONS.DOWNLOAD}
label={showLabel ? label : null}
onClick={handleDownload}
aria-hidden={!focusable}
tabIndex={focusable ? 0 : -1}
/>
);
}

15
ui/component/fileWatchLaterLink/view.jsx
View file

@ -8,18 +8,14 @@ import { COLLECTIONS_CONSTS } from 'lbry-redux';
type Props = {
uri: string,
claim: StreamClaim,
focusable: boolean,
hasClaimInWatchLater: boolean,
doToast: ({ message: string }) => void,
doCollectionEdit: (string, any) => void,
};
function FileWatchLaterLink(props: Props) {
const {
claim,
hasClaimInWatchLater,
doToast,
doCollectionEdit,
} = props;
const { claim, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
const buttonRef = useRef();
let isHovering = useHover(buttonRef);
@ -53,8 +49,13 @@ function FileWatchLaterLink(props: Props) {
title={title}
label={label}
className="button--file-action"
icon={(hasClaimInWatchLater && (isHovering ? ICONS.REMOVE : ICONS.COMPLETED)) || (isHovering ? ICONS.COMPLETED : ICONS.TIME)}
icon={
(hasClaimInWatchLater && (isHovering ? ICONS.REMOVE : ICONS.COMPLETED)) ||
(isHovering ? ICONS.COMPLETED : ICONS.TIME)
}
onClick={(e) => handleWatchLater(e)}
aria-hidden={!focusable}
tabIndex={focusable ? 0 : -1}
/>
);
}

3
ui/scss/component/_header.scss
View file

@ -17,7 +17,8 @@
width: 0;
height: 0;
overflow: hidden;
margin: 0 var(--spacing-s);
margin-right: var(--spacing-l);
&:focus {
opacity: 1;
position: relative;