From cd17ad9114b0518843715d338ec9d7b682042112 Mon Sep 17 00:00:00 2001
From: Timo <gasda@amazon.com>
Date: Thu, 2 Nov 2023 08:52:15 +0100
Subject: [PATCH] Update focus

---
 pages/cards/selection.page.tsx         |  8 +++-----
 src/cards/__tests__/selection.test.tsx |  1 +
 src/cards/index.tsx                    | 10 +++++++++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/pages/cards/selection.page.tsx b/pages/cards/selection.page.tsx
index eed3dad0c0..3a3db17187 100644
--- a/pages/cards/selection.page.tsx
+++ b/pages/cards/selection.page.tsx
@@ -5,7 +5,7 @@ import range from 'lodash/range';
 import Cards, { CardsProps } from '~components/cards';
 import Header from '~components/header';
 import Toggle from '~components/toggle';
-import { EmptyState } from '../table/shared-configs';
+import { EmptyState, getMatchesCountText, paginationLabels } from '../table/shared-configs';
 import { useCollection } from '@cloudscape-design/collection-hooks';
 import Pagination from '~components/pagination';
 import TextFilter from '~components/text-filter';
@@ -49,8 +49,6 @@ const cardDefinition: CardsProps.CardDefinition<Item> = {
   ],
 };
 
-const getTextFilterCounterText = (count: number) => `${count} ${count === 1 ? 'match' : 'matches'}`;
-
 const allItems = createSimpleItems(50);
 
 export default function () {
@@ -92,14 +90,14 @@ export default function () {
         renderAriaLive={renderAriaLive}
         entireCardClickable={entireCard}
         isItemDisabled={item => someDisabled && !item.text.includes('o')}
-        pagination={<Pagination {...paginationProps} />}
+        pagination={<Pagination {...paginationProps} ariaLabels={paginationLabels} />}
         filter={
           <TextFilter
             {...filterProps}
             filteringAriaLabel="Filter resources"
             filteringPlaceholder="Find resources"
             filteringClearAriaLabel="Clear"
-            countText={getTextFilterCounterText(filteredItemsCount ?? 0)}
+            countText={getMatchesCountText(filteredItemsCount ?? 0)}
           />
         }
       />
diff --git a/src/cards/__tests__/selection.test.tsx b/src/cards/__tests__/selection.test.tsx
index b96d42d327..8dda9aadf7 100644
--- a/src/cards/__tests__/selection.test.tsx
+++ b/src/cards/__tests__/selection.test.tsx
@@ -79,6 +79,7 @@ describe('Cards selection', () => {
       ).wrapper;
       getCard(1).findCardHeader()?.click();
       expectSelected([{ description: '1' }]);
+      expect(getCardSelectionArea(1)?.find('input')?.getElement()).toHaveFocus();
     });
   });
 
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index 761d426c70..78c5eda26a 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -269,7 +269,15 @@ const CardsList = <T,>({
         >
           <div
             className={styles['card-inner']}
-            onClick={canClickEntireCard ? getItemSelectionProps(item).onChange : undefined}
+            onClick={
+              canClickEntireCard
+                ? event => {
+                    getItemSelectionProps(item).onChange();
+                    // Manually move focus to the native input (checkbox or radio button)
+                    event.currentTarget.querySelector('input')?.focus();
+                  }
+                : undefined
+            }
           >
             <div className={styles['card-header']}>
               <div className={styles['card-header-inner']}>