Update focus

cloudscape-design · Nov 2, 2023 · cd17ad9 · cd17ad9
1 parent 65f7eeb
commit cd17ad9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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']}>