diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx index 37defa7f598..e5002c5ba00 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx @@ -40,8 +40,15 @@ function ViewContainer(props: AllProps) { let itemTitle = title let ariaLabel = useMemo(() => convertJsxToString(itemTitle), [itemTitle]) - if (ariaLabel.includes('{itemNo}')) { - itemTitle = ariaLabel = ariaLabel.replace('{itemNo}', index + 1) + if (ariaLabel.includes('{itemN')) { + /** + * {itemNr} is deprecated, and can be removed in v11 in favor of {itemNo} + * So in v11 we can use '{itemNo}' instead of a regex + */ + itemTitle = ariaLabel = ariaLabel.replace( + /\{itemN(r|o)\}/g, + String(index + 1) + ) } let toolbarElement = toolbar diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/__tests__/ViewContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/__tests__/ViewContainer.test.tsx index ca9e6d18bd0..561903d8b94 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/__tests__/ViewContainer.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/__tests__/ViewContainer.test.tsx @@ -77,6 +77,20 @@ describe('ViewContainer', () => { expect(leads[1]).toHaveTextContent('Item title 2') }) + // Deprecated, can be removed in v11 + it('should render title with "itemNr"', () => { + render( + + content + + ) + + const leads = document.querySelectorAll('.dnb-p') + expect(leads).toHaveLength(2) + expect(leads[0]).toHaveTextContent('Item title 1') + expect(leads[1]).toHaveTextContent('Item title 2') + }) + it('calls "handleRemove" when remove button is clicked', () => { const handleRemove = jest.fn()