chore: Add built-in internationalization to button dropdown filtering

src/button-dropdown/__tests__/button-dropdown-i18n.test.tsx

@@ -0,0 +1,115 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ButtonDropdown, { ButtonDropdownProps } from '../../../lib/components/button-dropdown';
+import TestI18nProvider from '../../../lib/components/i18n/testing';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+const items: ButtonDropdownProps.Items = [
+  { id: 'i1', text: 'Cut' },
+  { id: 'i2', text: 'Copy' },
+  { id: 'i3', text: 'Paste' },
+];
+
+function renderDropdown(jsx: React.ReactElement) {
+  const { container } = render(jsx);
+  return createWrapper(container).findButtonDropdown()!;
+}
+
+describe('i18n', () => {
+  describe('filteringResultsText', () => {
+    it('uses filteringResultsText from i18n provider when not specified', () => {
+      const wrapper = renderDropdown(
+        <TestI18nProvider
+          messages={{
+            'button-dropdown': {
+              filteringResultsText: '{matchesCount} out of {totalCount} items',
+            },
+          }}
+        >
+          <ButtonDropdown items={items} ariaLabel="Actions" filteringType="auto">
+            Actions
+          </ButtonDropdown>
+        </TestI18nProvider>
+      );
+      wrapper.openDropdown();
+      wrapper.findFilteringInput()!.setInputValue('Co');
+      const footer = wrapper.findFooterRegion();
+      expect(footer).not.toBeNull();
+      expect(footer!.getElement()).toHaveTextContent('1 out of 3 items');
+    });
+
+    it('uses filteringResultsText prop over i18n provider', () => {
+      const wrapper = renderDropdown(
+        <TestI18nProvider
+          messages={{
+            'button-dropdown': {
+              filteringResultsText: '{matchesCount} out of {totalCount} items',
+            },
+          }}
+        >
+          <ButtonDropdown
+            items={items}
+            ariaLabel="Actions"
+            filteringType="auto"
+            filteringResultsText={(matchesCount, totalCount) => `Custom ${matchesCount}/${totalCount}`}
+          >
+            Actions
+          </ButtonDropdown>
+        </TestI18nProvider>
+      );
+      wrapper.openDropdown();
+      wrapper.findFilteringInput()!.setInputValue('Co');
+      const footer = wrapper.findFooterRegion();
+      expect(footer).not.toBeNull();
+      expect(footer!.getElement()).toHaveTextContent('Custom 1/3');
+    });
+  });
+
+  describe('i18nStrings.filteringItemAriaDescription', () => {
+    it('uses i18nStrings.filteringItemAriaDescription from i18n provider when not specified', () => {
+      const wrapper = renderDropdown(
+        <TestI18nProvider
+          messages={{
+            'button-dropdown': {
+              'i18nStrings.filteringItemAriaDescription': 'Continue typing to further filter the list',
+            },
+          }}
+        >
+          <ButtonDropdown items={items} ariaLabel="Actions" filteringType="auto">
+            Actions
+          </ButtonDropdown>
+        </TestI18nProvider>
+      );
+      wrapper.openDropdown();
+      const menuItem = wrapper.findItemById('i1')!.find('[role="menuitem"]')!.getElement();
+      expect(menuItem).toHaveAccessibleDescription('Continue typing to further filter the list');
+    });
+
+    it('uses i18nStrings.filteringItemAriaDescription prop over i18n provider', () => {
+      const wrapper = renderDropdown(
+        <TestI18nProvider
+          messages={{
+            'button-dropdown': {
+              'i18nStrings.filteringItemAriaDescription': 'Continue typing to further filter the list',
+            },
+          }}
+        >
+          <ButtonDropdown
+            items={items}
+            ariaLabel="Actions"
+            filteringType="auto"
+            i18nStrings={{ filteringItemAriaDescription: 'Custom description' }}
+          >
+            Actions
+          </ButtonDropdown>
+        </TestI18nProvider>
+      );
+      wrapper.openDropdown();
+      const menuItem = wrapper.findItemById('i1')!.find('[role="menuitem"]')!.getElement();
+      expect(menuItem).toHaveAccessibleDescription('Custom description');
+    });
+  });
+});

src/button-dropdown/index.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
@@ -64,6 +65,8 @@ const ButtonDropdown = React.forwardRef(
     });
     const baseProps = getBaseProps(props);
 
+    const i18n = useInternalI18n('button-dropdown');
+
     const analyticsComponentMetadata: GeneratedAnalyticsMetadataButtonDropdownComponent = {
       name: 'awsui.ButtonDropdown',
       label: `.${analyticsSelectors['trigger-label']}`,
@@ -99,9 +102,18 @@ const ButtonDropdown = React.forwardRef(
         filteringPlaceholder={filteringPlaceholder}
         filteringAriaLabel={filteringAriaLabel}
         filteringClearAriaLabel={filteringClearAriaLabel}
-        filteringResultsText={filteringResultsText}
+        filteringResultsText={i18n(
+          'filteringResultsText',
+          filteringResultsText,
+          format => (matchesCount, totalCount) => format({ matchesCount, totalCount })
+        )}
         noMatch={noMatch}
-        i18nStrings={i18nStrings}
+        i18nStrings={{
+          filteringItemAriaDescription: i18n(
+            'i18nStrings.filteringItemAriaDescription',
+            i18nStrings?.filteringItemAriaDescription
+          ),
+        }}
         {...getAnalyticsMetadataAttribute({
           component: analyticsComponentMetadata,
         })}

src/i18n/messages-types.ts

@@ -74,6 +74,14 @@ export interface I18nFormatArgTypes {
   button: {
     'i18nStrings.externalIconAriaLabel': never;
   };
+  'button-dropdown': {
+    filteringResultsText: {
+      matchesCount: string | number;
+      totalCount: string | number;
+    };
+    noMatch: never;
+    'i18nStrings.filteringItemAriaDescription': never;
+  };
   calendar: {
     nextMonthAriaLabel: never;
     previousMonthAriaLabel: never;

src/i18n/messages/all.ar.json

@@ -55,6 +55,11 @@
   "breadcrumb-group": {
     "expandAriaLabel": "عرض المسار"
   },
+  "button-dropdown": {
+    "filteringResultsText": "تم نفاد عدد {matchesCount} من {totalCount} من العناصر",
+    "noMatch": "لا توجد إجراءات مطابقة",
+    "i18nStrings.filteringItemAriaDescription": "استمر في الكتابة لتصفية النتائج."
+  },
   "button": {
     "i18nStrings.externalIconAriaLabel": "تفتح الصفحة في علامة تبويب جديدة"
   },
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "تحميل الخطوة التالية",
     "i18nStrings.submitButtonLoadingAnnouncement": "إرسال النموذج"
   }
-}
+}

src/i18n/messages/all.de.json

@@ -55,6 +55,11 @@
   "breadcrumb-group": {
     "expandAriaLabel": "Pfad anzeigen"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} von {totalCount} Artikeln",
+    "noMatch": "Keine übereinstimmenden Aktionen",
+    "i18nStrings.filteringItemAriaDescription": "Tippen Sie weiter, um die Ergebnisse zu filtern."
+  },
   "button": {
     "i18nStrings.externalIconAriaLabel": "Wird in einer neuen Registerkarte geöffnet"
   },
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Nächster Schritt wird geladen",
     "i18nStrings.submitButtonLoadingAnnouncement": "Absenden des Formulars"
   }
-}
+}

src/i18n/messages/all.en-GB.json

@@ -55,6 +55,11 @@
   "breadcrumb-group": {
     "expandAriaLabel": "Show path"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} out of {totalCount} items",
+    "noMatch": "No matching actions",
+    "i18nStrings.filteringItemAriaDescription": "Keep typing to filter results."
+  },
   "button": {
     "i18nStrings.externalIconAriaLabel": "Opens in a new tab"
   },

src/i18n/messages/all.en.json

@@ -55,6 +55,11 @@
   "breadcrumb-group": {
     "expandAriaLabel": "Show path"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} out of {totalCount} items",
+    "noMatch": "No matching actions",
+    "i18nStrings.filteringItemAriaDescription": "Keep typing to filter results."
+  },
   "button": {
     "i18nStrings.externalIconAriaLabel": "Opens in a new tab"
   },

src/i18n/messages/all.es.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "Se abre en una pestaña nueva"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} de {totalCount} elementos",
+    "noMatch": "No hay acciones coincidentes",
+    "i18nStrings.filteringItemAriaDescription": "Siga escribiendo para filtrar los resultados."
+  },
   "calendar": {
     "nextMonthAriaLabel": "Próximo mes",
     "previousMonthAriaLabel": "Mes anterior",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Cargando paso siguiente",
     "i18nStrings.submitButtonLoadingAnnouncement": "Formulario de envío"
   }
-}
+}

src/i18n/messages/all.fr.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "S’ouvre dans un nouvel onglet"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} sur {totalCount} éléments",
+    "noMatch": "Aucune action correspondante",
+    "i18nStrings.filteringItemAriaDescription": "Continuez à taper pour filtrer les résultats."
+  },
   "calendar": {
     "nextMonthAriaLabel": "Mois suivant",
     "previousMonthAriaLabel": "Mois précédent",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Chargement de l'étape suivante",
     "i18nStrings.submitButtonLoadingAnnouncement": "Soumission du formulaire"
   }
-}
+}

src/i18n/messages/all.id.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "Buka di tab baru"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} dari {totalCount} item",
+    "noMatch": "Tidak ada tindakan yang cocok",
+    "i18nStrings.filteringItemAriaDescription": "Terus mengetik untuk memfilter hasil."
+  },
   "calendar": {
     "nextMonthAriaLabel": "Bulan berikutnya",
     "previousMonthAriaLabel": "Bulan sebelumnya",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Memuat langkah berikutnya",
     "i18nStrings.submitButtonLoadingAnnouncement": "Mengirimkan formulir"
   }
-}
+}

src/i18n/messages/all.it.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "Si apre in una nuova scheda"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} di {totalCount} articoli",
+    "noMatch": "Nessuna azione corrispondente",
+    "i18nStrings.filteringItemAriaDescription": "Continua a digitare per filtrare i risultati."
+  },
   "calendar": {
     "nextMonthAriaLabel": "Mese successivo",
     "previousMonthAriaLabel": "Mese precedente",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Caricamento della fase successiva",
     "i18nStrings.submitButtonLoadingAnnouncement": "Modulo di invio"
   }
-}
+}

src/i18n/messages/all.ja.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "新しいタブで開く"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{totalCount} 件のうち {matchesCount} 件の商品",
+    "noMatch": "一致するアクションなし",
+    "i18nStrings.filteringItemAriaDescription": "入力を続けると結果が絞り込まれます。"
+  },
   "calendar": {
     "nextMonthAriaLabel": "来月",
     "previousMonthAriaLabel": "前月",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "次のステップをロード中",
     "i18nStrings.submitButtonLoadingAnnouncement": "フォーム送信"
   }
-}
+}

src/i18n/messages/all.ko.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "새 탭에서 열림"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{totalCount}개 항목 중 {matchesCount}개",
+    "noMatch": "일치하는 작업 없음",
+    "i18nStrings.filteringItemAriaDescription": "결과를 필터링하려면 계속 입력하세요."
+  },
   "calendar": {
     "nextMonthAriaLabel": "다음 달",
     "previousMonthAriaLabel": "이전 달",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "다음 단계 로드 중",
     "i18nStrings.submitButtonLoadingAnnouncement": "양식 제출 중"
   }
-}
+}

src/i18n/messages/all.pt-BR.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "Abre em uma nova guia"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount} de {totalCount} itens",
+    "noMatch": "Nenhuma ação correspondente",
+    "i18nStrings.filteringItemAriaDescription": "Continue digitando para filtrar os resultados."
+  },
   "calendar": {
     "nextMonthAriaLabel": "Próximo mês",
     "previousMonthAriaLabel": "Mês anterior",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Carregando próxima etapa",
     "i18nStrings.submitButtonLoadingAnnouncement": "Enviando formulário"
   }
-}
+}

src/i18n/messages/all.tr.json

@@ -58,6 +58,11 @@
   "button": {
     "i18nStrings.externalIconAriaLabel": "Yeni bir sekmede açılır"
   },
+  "button-dropdown": {
+    "filteringResultsText": "{matchesCount}/{totalCount} öge",
+    "noMatch": "Eşleşen eylem yok",
+    "i18nStrings.filteringItemAriaDescription": "Sonuçları filtrelemek için yazmaya devam edin."
+  },
   "calendar": {
     "nextMonthAriaLabel": "Gelecek ay",
     "previousMonthAriaLabel": "Önceki ay",
@@ -512,4 +517,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Sonraki adım yükleniyor",
     "i18nStrings.submitButtonLoadingAnnouncement": "Form gönderiliyor"
   }
-}
+}