feat(Thumbnail): only show focus state when using keyboard navigation

Author: liamross

src/components/Thumbnail/Thumbnail.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import React, { MouseEvent, ReactNode, ReactText, useRef } from 'react';
 import { FileLike } from '../../data';
-import { useFile, useFocus } from '../../hooks';
+import { useFile, useFocus, useAccessibleFocus } from '../../hooks';
 import { ClickableDiv, ClickableDivProps } from '../ClickableDiv';
 import { EditableText } from '../EditableText';
 import { FileSkeleton } from '../FileSkeleton';
@@ -91,6 +91,8 @@ export function Thumbnail<F extends FileLike>({
   onBlur,
   ...divProps
 }: ThumbnailProps<F>) {
+  const isUserTabbing = useAccessibleFocus();
+
   const thumbnailRef = useRef<HTMLDivElement>(null);
 
   const { focused, handleOnFocus, handleOnBlur } = useFocus(onFocus, onBlur);
@@ -113,6 +115,7 @@ export function Thumbnail<F extends FileLike>({
   const thumbnailClass = classnames(
     'ui__base ui__thumbnail',
     {
+      'ui__thumbnail--tabbing': isUserTabbing,
       'ui__thumbnail--selected': selected,
       'ui__thumbnail--focused': focused,
       'ui__thumbnail--disabled': disabled,

src/components/Thumbnail/_Thumbnail.scss

@@ -35,7 +35,7 @@ $thumbnail-border-size: 2px;
   }
 
   &:hover,
-  &--focused:not(.ui__thumbnail--disabled) {
+  &--focused.ui__thumbnail--tabbing:not(.ui__thumbnail--disabled) {
     // Do not style for hover or focus if anything is dragging
     &:not(.ui__thumbnail--dragging):not(.ui__thumbnail--otherDragging) {
       .ui__thumbnail__controls {
@@ -45,14 +45,14 @@ $thumbnail-border-size: 2px;
   }
 
   &:hover,
-  &--focused:not(.ui__thumbnail--disabled) {
+  &--focused.ui__thumbnail--tabbing:not(.ui__thumbnail--disabled) {
     // Do not style for hover or focus if anything is dragging
     &:not(.ui__thumbnail--dragging):not(.ui__thumbnail--otherDragging):not(.ui__thumbnail--selected) {
       background-color: $color-gray-3;
     }
   }
 
-  &:focus:not(.ui__thumbnail--disabled) {
+  &:focus.ui__thumbnail--tabbing:not(.ui__thumbnail--disabled) {
     .ui__thumbnail__image {
       img,
       .ui__thumbnail__image__skeleton {