Wrong, hardcoded punctuation in Japanese

[jiw-mh]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Vite

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

In some translation texts, the regular '.' is hard coded. For example:

amplify-ui/packages/ui/src/helpers/authenticator/textUtil.ts

Line 40 in a6470c1

return `${translate(DefaultTexts.CODE_SENT)}. ${arrivalMessage}.`;

In japanese the ends of sentences use 。 instead. It would be good not assume any punctuation. Not sure it wouldn't be a good idea to also open the sentence order to reduce the length of a sentence in some language packs.

What's the expected behaviour?

To have a japanese punctuation consistently.

Help us reproduce the bug!

Load the Login component in a japanese display.

Code Snippet

Console log output

No response

Additional information and screenshots

No response

[bobbor]

hey @jiw-mh

thanks for letting us know. I think you are right, we shouldn't do this.

just out of curiosity, the . is a different one to 。 by size and followed by a space, right. very interesting.

I'll handle this as a bug and will start working on it.

Cheers Philipp

[jiw-mh]

。 is a full-width character. In Japanese/Chinese all characters are mono-spaced. The 。 is left-aligned and thus it looks like it has some space added to it.

[bobbor]

TIL.

I've worked on the bug today and have created a PR:
#6968

all punctuation should now be / can be part of the translation. If I haven't missed any, there is no more period . (or other punctuation for that matter) in the code, it's all in the translation.

Also, it has some extra functionality added to it, so that some strings can be easier constructed. translation strings allow for placeholders like {foo} which can then be resolved via 2nd parameter to the translate function

e.g.

// in translations
const texts = {
  MOTORCYCLE: "I once owned a {brand}."
}

// somewhere else
translate(texts.MOTORCYCLE, { brand: "Suzuki" })
//  I once owned a Suzuki

but that also allows for localized translations like, where order in the sentence is different.

// de
const texts = {
  MOTORCYCLE: "Mir hat mal ein {brand}-Motorrad gehört."
}