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
box · Feb 11, 2025 · 322231b · 322231b
1 parent 4e0712b
commit 322231b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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={