fix file actions accessibility

ui/component/claimPreview/view.jsx

@@ -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>

ui/component/claimPreviewTile/view.jsx

@@ -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>
               )}
 

ui/component/fileActions/view.jsx

@@ -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={

ui/component/fileDownloadLink/view.jsx

@@ -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}
     />
   );
 }

ui/component/fileWatchLaterLink/view.jsx

@@ -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 {
+  const { claim, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
-    claim,
-    hasClaimInWatchLater,
-    doToast,
-    doCollectionEdit,
-  } = 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}
     />
   );
 }

ui/scss/component/_header.scss

@@ -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;