diff --git a/frontend/src/i18n/locales/features/public-form/en-sg.ts b/frontend/src/i18n/locales/features/public-form/en-sg.ts index c4860796aa..868588f010 100644 --- a/frontend/src/i18n/locales/features/public-form/en-sg.ts +++ b/frontend/src/i18n/locales/features/public-form/en-sg.ts @@ -1,3 +1,4 @@ +import { enSG as table } from './table' import { PublicForm } from '.' export const enSG: PublicForm = { @@ -30,5 +31,6 @@ export const enSG: PublicForm = { proceedToPay: 'Proceed to pay', submitNow: 'Submit now', }, + table, }, } diff --git a/frontend/src/i18n/locales/features/public-form/index.ts b/frontend/src/i18n/locales/features/public-form/index.ts index 1ace76fedb..f76a555bab 100644 --- a/frontend/src/i18n/locales/features/public-form/index.ts +++ b/frontend/src/i18n/locales/features/public-form/index.ts @@ -1,3 +1,5 @@ +import { Table } from './table' + export * from './en-sg' export interface PublicForm { @@ -24,5 +26,6 @@ export interface PublicForm { proceedToPay: string submitNow: string } + table: Table } } diff --git a/frontend/src/i18n/locales/features/public-form/table/en-sg.ts b/frontend/src/i18n/locales/features/public-form/table/en-sg.ts new file mode 100644 index 0000000000..6831d1a587 --- /dev/null +++ b/frontend/src/i18n/locales/features/public-form/table/en-sg.ts @@ -0,0 +1,9 @@ +import { Table } from '.' + +export const enSG: Table = { + addAnotherRow: 'Add another row', + addAnotherRowAria: 'to the table.', + rowAria: 'The table currently has ', + row: '{count, plural, =1 {# row} other {# rows}}', + rowMax: '{currentRows} out of max {count, plural, =1 {# row} other {# rows}}', +} diff --git a/frontend/src/i18n/locales/features/public-form/table/index.ts b/frontend/src/i18n/locales/features/public-form/table/index.ts new file mode 100644 index 0000000000..b5be5d0e9d --- /dev/null +++ b/frontend/src/i18n/locales/features/public-form/table/index.ts @@ -0,0 +1,9 @@ +export * from './en-sg' + +export interface Table { + addAnotherRow: string + addAnotherRowAria: string + rowAria: string + row: string + rowMax: string +} diff --git a/frontend/src/templates/Field/Table/AddRowFooter.tsx b/frontend/src/templates/Field/Table/AddRowFooter.tsx index a5e44af282..d0546bc4e8 100644 --- a/frontend/src/templates/Field/Table/AddRowFooter.tsx +++ b/frontend/src/templates/Field/Table/AddRowFooter.tsx @@ -1,7 +1,7 @@ -import { useCallback, useMemo, useState } from 'react' +import { useCallback, useState } from 'react' +import { useTranslation } from 'react-i18next' import { BiPlus } from 'react-icons/bi' import { Box, Stack, Text, VisuallyHidden } from '@chakra-ui/react' -import simplur from 'simplur' import Button from '~components/Button' @@ -18,19 +18,18 @@ export const AddRowFooter = ({ maxRows, handleAddRow: handleAddRowProp, }: AddRowFooterProps): JSX.Element => { + const { t } = useTranslation() + // State to decide whether to announce row changes to screen readers const [hasAddedRows, setHasAddedRows] = useState(false) - const maxRowDescription = useMemo(() => { - return maxRows - ? simplur`${currentRows} out of max ${maxRows} row[|s]` - : simplur`${currentRows} row[|s]` - }, [currentRows, maxRows]) - - const maxRowAriaDescription = useMemo(() => { - return maxRows - ? simplur`There [is|are] currently ${currentRows} out of max ${maxRows} row[|s].` - : simplur`There [is|are] currently ${currentRows} row[|s].` - }, [currentRows, maxRows]) + const maxRowDescription = Number.isInteger(maxRows) + ? t('features.publicForm.components.table.rowMax', { + currentRows, + count: Number(maxRows), + }) + : t('features.publicForm.components.table.row', { + count: currentRows, + }) const handleAddRow = useCallback(() => { handleAddRowProp() @@ -51,15 +50,16 @@ export const AddRowFooter = ({ type="button" onClick={handleAddRow} > - Add another row + {t('features.publicForm.components.table.addAnotherRow')} - to the table field. {maxRowAriaDescription} + {t('features.publicForm.components.table.addAnotherRowAria')} - The table field currently has {maxRowDescription} + {t('features.publicForm.components.table.rowAria')}{' '} + {maxRowDescription}