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}