feat(thumbnail-card-details): add keydown callback and default tabindex

src/components/thumbnail-card/ThumbnailCard.js

@@ -12,6 +12,7 @@ type Props = {
     className?: string,
     highlightOnHover?: boolean,
     icon?: React.Node,
+    onKeyDownCallback?: () => void,
     subtitle?: React.Node,
     thumbnail: React.Node,
     title: React.Node,
@@ -20,11 +21,12 @@ type Props = {
 const ThumbnailCard = ({
     actionItem,
     className = '',
-    icon,
     highlightOnHover = false,
+    icon,
+    onKeyDownCallback,
     subtitle,
-    title,
     thumbnail,
+    title,
     ...rest
 }: Props) => (
     <div
@@ -34,7 +36,13 @@ const ThumbnailCard = ({
         {...rest}
     >
         <ThumbnailCardThumbnail thumbnail={thumbnail} />
-        <ThumbnailCardDetails actionItem={actionItem} icon={icon} subtitle={subtitle} title={title} />
+        <ThumbnailCardDetails
+            actionItem={actionItem}
+            icon={icon}
+            onKeyDownCallback={onKeyDownCallback}
+            subtitle={subtitle}
+            title={title}
+        />
     </div>
 );
 

src/components/thumbnail-card/ThumbnailCardDetails.js

@@ -7,34 +7,36 @@ import { useIsContentOverflowed } from '../../utils/dom';
 type Props = {
     actionItem?: React.Element<any>,
     icon?: React.Node,
+    onKeyDownCallback?: () => void,
     subtitle?: React.Node,
     title: React.Node,
 };
 
 type TitleProps = {
+    onKeyDownCallback?: () => void,
     title: React.Node,
 };
 
-const Title = ({ title }: TitleProps) => {
-    // $FlowFixMe
+const Title = ({ title, onKeyDownCallback }: TitleProps) => {
     const textRef: { current: null | HTMLElement } = React.useRef(null);
     const isTextOverflowed = useIsContentOverflowed(textRef);
 
     return (
         <Tooltip isDisabled={!isTextOverflowed} text={title}>
-            <div ref={textRef} className="thumbnail-card-title">
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */}
+            <div ref={textRef} role="link" className="thumbnail-card-title" tabIndex={0} onKeyDown={onKeyDownCallback}>
                 {title}
             </div>
         </Tooltip>
     );
 };
 
-const ThumbnailCardDetails = ({ actionItem, icon, subtitle, title }: Props) => (
+const ThumbnailCardDetails = ({ actionItem, icon, subtitle, title, onKeyDownCallback }: Props) => (
     <div className="thumbnail-card-details">
         {icon}
         <div className="thumbnail-card-details-content">
             <div className="ThumbnailCardDetails-bodyText">
-                <Title title={title} />
+                <Title title={title} onKeyDownCallback={onKeyDownCallback} />
                 {subtitle && <div className="thumbnail-card-subtitle">{subtitle}</div>}
             </div>
             {actionItem}

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

@@ -1,13 +1,12 @@
 // @flow
 import * as React from 'react';
 
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import * as libDom from '../../../utils/dom';
-
 import ThumbnailCardDetails from '../ThumbnailCardDetails';
 
-const getWrapper = (props = {}) => shallow(<ThumbnailCardDetails title={<div>Foo Bar!</div>} {...props} />);
+const getWrapper = (props = {}) => render(<ThumbnailCardDetails title={<div>Foo Bar!</div>} {...props} />);
 
 jest.mock('../../../utils/dom', () => ({ useIsContentOverflowed: jest.fn() }));
 
@@ -45,9 +44,22 @@ describe('components/thumbnail-card/ThumbnailCardDetails', () => {
 
     test('should render a Tooltip if text is overflowed', () => {
         libDom.useIsContentOverflowed.mockReturnValue(true);
+        const { container } = getWrapper();
+        const title = container.querySelector('.thumbnail-card-title');
+
+        fireEvent.focus(title);
+        const tooltip = screen.getByRole('tooltip');
+
+        expect(tooltip).toBeInTheDocument();
+    });
+
+    test('should accept a keydown callback', () => {
+        const someFunction = jest.fn();
+        const { container } = getWrapper({ onKeyDownCallback: someFunction });
+        const title = container.querySelector('.thumbnail-card-title');
 
-        const wrapper = mount(<ThumbnailCardDetails title={<div>Foo Bar!</div>} />);
+        fireEvent.keyDown(title, { key: 'Enter' });
 
-        expect(wrapper.find('Tooltip').length).toBe(1);
+        expect(someFunction).toHaveBeenCalled();
     });
 });