feat(thumbnail-card): remove role and tabIndex when onKeyDown exists (#3898)

* feat(thumbnail-card): remove role and tabIndex when onKeyDown

* feat(thumbnail-card): update spec

Author: jmcbgaston

src/components/thumbnail-card/ThumbnailCard.js

@@ -30,9 +30,9 @@ const ThumbnailCard = ({
     ...rest
 }: Props) => (
     <div
-        role="button"
-        tabIndex="0"
         className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })}
+        role={onKeyDown ? null : 'button'}
+        tabIndex={onKeyDown ? null : 0}
         {...rest}
     >
         <ThumbnailCardThumbnail thumbnail={thumbnail} />

src/components/thumbnail-card/__tests__/ThumbnailCard.test.js

@@ -20,6 +20,21 @@ describe('components/thumbnail-card/ThumbnailCard', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should have role and tabIndex when onKeyDown prop does not exist', () => {
+        const wrapper = getWrapper();
+
+        expect(wrapper.find('.thumbnail-card').prop('role')).toBe('button');
+        expect(wrapper.find('.thumbnail-card').prop('tabIndex')).toBe(0);
+    });
+
+    test('should not have role and tabIndex when onKeyDown prop exists', () => {
+        const onKeyDown = () => {};
+        const wrapper = getWrapper({ onKeyDown });
+
+        expect(wrapper.find('.thumbnail-card').prop('role')).toBe(null);
+        expect(wrapper.find('.thumbnail-card').prop('tabIndex')).toBe(null);
+    });
+
     test('should pass down actionItem, icon, and subtitle', () => {
         const icon = <img alt="icon" />;
         const subtitle = <div>Subtitle!</div>;

src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.js.snap

@@ -4,7 +4,7 @@ exports[`components/thumbnail-card/ThumbnailCard should pass down actionItem, ic
 <div
   className="thumbnail-card"
   role="button"
-  tabIndex="0"
+  tabIndex={0}
 >
   <ThumbnailCardThumbnail
     thumbnail={
@@ -44,7 +44,7 @@ exports[`components/thumbnail-card/ThumbnailCard should render 1`] = `
 <div
   className="thumbnail-card"
   role="button"
-  tabIndex="0"
+  tabIndex={0}
 >
   <ThumbnailCardThumbnail
     thumbnail={
@@ -67,7 +67,7 @@ exports[`components/thumbnail-card/ThumbnailCard should use additional className
 <div
   className="thumbnail-card fooBar"
   role="button"
-  tabIndex="0"
+  tabIndex={0}
 >
   <ThumbnailCardThumbnail
     thumbnail={