diff --git a/src/button-dropdown/__tests__/button-dropdown-i18n.test.tsx b/src/button-dropdown/__tests__/button-dropdown-i18n.test.tsx new file mode 100644 index 0000000000..a9b34ea7fe --- /dev/null +++ b/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( + + + Actions + + + ); + 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( + + `Custom ${matchesCount}/${totalCount}`} + > + Actions + + + ); + 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( + + + Actions + + + ); + 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( + + + Actions + + + ); + wrapper.openDropdown(); + const menuItem = wrapper.findItemById('i1')!.find('[role="menuitem"]')!.getElement(); + expect(menuItem).toHaveAccessibleDescription('Custom description'); + }); + }); +}); diff --git a/src/button-dropdown/index.tsx b/src/button-dropdown/index.tsx index b9183506ad..48ebaeaa44 100644 --- a/src/button-dropdown/index.tsx +++ b/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, })} diff --git a/src/i18n/messages-types.ts b/src/i18n/messages-types.ts index f97844ed26..8a92970206 100644 --- a/src/i18n/messages-types.ts +++ b/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; diff --git a/src/i18n/messages/all.ar.json b/src/i18n/messages/all.ar.json index 364597f533..79e2507605 100644 --- a/src/i18n/messages/all.ar.json +++ b/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": "إرسال النموذج" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.de.json b/src/i18n/messages/all.de.json index c1338a2994..059f06f55b 100644 --- a/src/i18n/messages/all.de.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.en-GB.json b/src/i18n/messages/all.en-GB.json index 21874c8c5f..85c1733900 100644 --- a/src/i18n/messages/all.en-GB.json +++ b/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" }, diff --git a/src/i18n/messages/all.en.json b/src/i18n/messages/all.en.json index f9db2d3e96..d04d9d1332 100644 --- a/src/i18n/messages/all.en.json +++ b/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" }, diff --git a/src/i18n/messages/all.es.json b/src/i18n/messages/all.es.json index d333e27568..9d64d8a62e 100644 --- a/src/i18n/messages/all.es.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.fr.json b/src/i18n/messages/all.fr.json index 0d5cd3806a..fe70b126a3 100644 --- a/src/i18n/messages/all.fr.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.id.json b/src/i18n/messages/all.id.json index 8ccd1d8aa2..5e556099b7 100644 --- a/src/i18n/messages/all.id.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.it.json b/src/i18n/messages/all.it.json index da24d8d169..fd4a509d3a 100644 --- a/src/i18n/messages/all.it.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.ja.json b/src/i18n/messages/all.ja.json index 5c7bd6b297..7d37a8b325 100644 --- a/src/i18n/messages/all.ja.json +++ b/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": "フォーム送信" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.ko.json b/src/i18n/messages/all.ko.json index 4e1323f8c5..437ed173c0 100644 --- a/src/i18n/messages/all.ko.json +++ b/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": "양식 제출 중" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.pt-BR.json b/src/i18n/messages/all.pt-BR.json index d0160df9c2..b4e732e8a1 100644 --- a/src/i18n/messages/all.pt-BR.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.tr.json b/src/i18n/messages/all.tr.json index de324395ed..653e77c979 100644 --- a/src/i18n/messages/all.tr.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.zh-CN.json b/src/i18n/messages/all.zh-CN.json index 2085e0503a..9f46c32e46 100644 --- a/src/i18n/messages/all.zh-CN.json +++ b/src/i18n/messages/all.zh-CN.json @@ -58,6 +58,11 @@ "button": { "i18nStrings.externalIconAriaLabel": "在新选项卡中打开" }, + "button-dropdown": { + "filteringResultsText": "{matchesCount} 个项目(共 {totalCount} 个)", + "noMatch": "没有匹配的操作", + "i18nStrings.filteringItemAriaDescription": "继续键入以筛选结果。" + }, "calendar": { "nextMonthAriaLabel": "下个月", "previousMonthAriaLabel": "上个月", @@ -512,4 +517,4 @@ "i18nStrings.nextButtonLoadingAnnouncement": "正在加载下一步", "i18nStrings.submitButtonLoadingAnnouncement": "正在提交表单" } -} \ No newline at end of file +} diff --git a/src/i18n/messages/all.zh-TW.json b/src/i18n/messages/all.zh-TW.json index 6922f4f71c..596a2a6038 100644 --- a/src/i18n/messages/all.zh-TW.json +++ b/src/i18n/messages/all.zh-TW.json @@ -58,6 +58,11 @@ "button": { "i18nStrings.externalIconAriaLabel": "在新索引標籤中開啟" }, + "button-dropdown": { + "filteringResultsText": "{matchesCount} 個項目 (共 {totalCount} 個)", + "noMatch": "沒有相符的動作", + "i18nStrings.filteringItemAriaDescription": "繼續輸入以篩選結果。" + }, "calendar": { "nextMonthAriaLabel": "下個月", "previousMonthAriaLabel": "上個月", @@ -512,4 +517,4 @@ "i18nStrings.nextButtonLoadingAnnouncement": "載入下一個步驟", "i18nStrings.submitButtonLoadingAnnouncement": "提交表單" } -} \ No newline at end of file +}