From 322231b169e5c0755f074c004174956ff58fa467 Mon Sep 17 00:00:00 2001
From: Jose Gaston <jmcbgaston@gmail.com>
Date: Mon, 10 Feb 2025 16:17:57 -0800
Subject: [PATCH] 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
---
 src/components/thumbnail-card/ThumbnailCard.js    |  4 ++--
 .../__tests__/ThumbnailCard.test.js               | 15 +++++++++++++++
 .../__snapshots__/ThumbnailCard.test.js.snap      |  6 +++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/thumbnail-card/ThumbnailCard.js b/src/components/thumbnail-card/ThumbnailCard.js
index 0a92a6329f..4b0bb7be35 100644
--- a/src/components/thumbnail-card/ThumbnailCard.js
+++ b/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} />
diff --git a/src/components/thumbnail-card/__tests__/ThumbnailCard.test.js b/src/components/thumbnail-card/__tests__/ThumbnailCard.test.js
index e88a4ad0a4..7d73fc5788 100644
--- a/src/components/thumbnail-card/__tests__/ThumbnailCard.test.js
+++ b/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>;
diff --git a/src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.js.snap b/src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.js.snap
index 95b88f475d..2923c9d2c4 100644
--- a/src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.js.snap
+++ b/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={