[manager-components]: Unable to translate a link with <Trans> component

[darsene]

On which entity, you would like to report a bug?

packages/manager-react-components/src/components/order

Description

According to https://react.i18next.com/latest/trans-component, a link label can be set by using trans component.
However, the OdsLink component (ODS 18) doesn't accept the label value as children prop and the translation tool doesn't allow to translate prop of a component (#15414, see detail in CMT-21344).
Therefore, which workaround can be used ?

Steps to reproduce

#15414

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[tristanwagner]

As I suggested I would try

Translation file

"your_key": "Some text with a <Link /> that can move depending on the language",
"your_key_link_label": "labeled link",

In your component

<Trans
  t={t}
  i18nKey="your_key"
  components={{ 
    Link: <OdsLink href={href} label={t('your_key_link_label')}/> 
    }}
/>

This way the translation team will be able to move the link depending on the language, the downside is that it is hard for them to have the full context of the translation since the label of the link is separated from the "main" text

[darsene]

Fixes in #15660

@tristanwagner @anooparveti