feat(tabs): add de-De, fr-CA, fr-FR & pt-PT status translations

[tomdavies73]

Proposed behaviour

Adds:

1. de-DE
2. fr-CA
3. fr-FR
4. pt-PR

Translations for info, error and warning states. es-ES will be added a later date, consumers are advised to use a local override if needed.

Current behaviour

Currently, only an en-GB translation is provided for info, error and warning states

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

The With Error And Warning stories should now have a correct accessible name which contains the tab title in every locale apart from spanish (es-ES).

1. Navigate to the With Error And Warning story
2. Turn on voiceOver
3. Tab (pardon the pun) onto a Tab
4. Assert that the accessible name is correct for the respective locale (swap locales using the locale dropdown at the top of story book)

Note: you can see the original translations in the attached JSON files on the parent ticket on JIRA (FE-7580)

[nuria1110]

Looks like the english file needs updating too since it doesn't match the format of the new translations:

  tabs: {
    error: () => "contains errors",
    warning: () => "contains warnings",
    info: () => "contains information",
  },

[DipperTheDan]

Happy to approve once @nuria1110 's comment has been adressed.

[DipperTheDan]

suggestion(non-blocking): If we have an array of React nodes like [<span>First</span>, <span>Second</span>], joining with an empty string produces "FirstSecond", but joining with a space produces "First Second", which is more likely what we want for accessible labels and generally reads better. I might just be thinking of an edge-case scenario though.

Suggested change

	return node.map(extractTextFromNode).join("");
	return node.map(extractTextFromNode).join(" ");

[DipperTheDan]

And just so we don't forget. This and the test file will need moving to a more suitable location than style/utils.

[carbonci]

🎉 This PR is included in version 158.28.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀