Hi. I’ve managed to extract the relevant parts.
The report and the sicknessReasons are retrieved from the database.
You don’t actually need the translations files but I included them for good measure.
Change the language to French to see the unescaped content.
Actual web site is at https://sti.amberwoodtrading.com. You need to register first. Then go to the tracking pool in the middle of the home page. The problem text is just under the main pictures. I had to change the French translation for d'Azote to de Azote 
import { autoinject } from "aurelia-framework";
import { I18N } from "aurelia-i18n";
@autoinject
export class ErrorTrackingReport {
public locales: IListItem[] = [
{ id: "en", name: "English" },
{ id: "fr", name: "French" },
{ id: "pt", name: "Portuguese" }
];
// dummy data from db
public report: IInspectionReport = {
id: undefined,
dead: 3,
sick: 12,
rowNumber: 2,
notes: "",
reason: { id: "id-1", name: "default English value" }
};
// dictionary items from db
private sicknessReasons: ITranslations[] = [
{
id: "id-1",
name: "Lack of nitrogen", // default value in English
translations: [
{ id: "fr", name: "Manque d'Azote" },
{ id: "pt", name: "Falta de nitrogênio" }
]
}
];
constructor(private readonly i18n: I18N) {
}
public trSicknessReason(sicknessReason: IListItem) {
const reason = this.sicknessReasons.find(c => c.id === sicknessReason.id);
return this.trDictionaryTranslation(reason).toLowerCase();
}
public trDictionaryTranslation(item: ITranslations) {
const locale = this.i18n.getLocale();
const tr = item.translations.find(c => c.id === locale);
if (tr && tr.name) {
return tr.name;
} else {
return item.name;
}
}
public async setLocale(lng: string) {
await this.i18n.setLocale(lng);
}
}
export interface IListItem {
id: string;
name: string;
}
export interface ITranslations extends IListItem {
translations: IListItem[];
}
export interface IInspectionReport {
dead: number;
sick: number;
reason: IListItem;
rowNumber: number;
notes: string;
id: string;
active?: boolean;
}
<template>
<label>Language</label>
<select class="form-contol" value.bind="selectedLng" change.delegate="setLocale(selectedLng)">
<option repeat.for="lng of locales" model.bind="lng.id">${lng.name}</option>
</select>
<h2>This paragraph does not update when locale changes</h2>
<p class="para-larger mb-0" t="[html]tracking-report.span9" t-params.bind="{rowNumber: report.rowNumber, sick: report.sick, dead: report.dead, reason: trSicknessReason(report.reason)}">
</p>
<h2 class="mt-5">This paragraph updates, but returns unescaped report.reason</h2>
<p class="para-larger mb-0">
${"tracking-report.span9" & t: {rowNumber: item.rowNumber, sick: report.sick, dead: report.dead, reason: trSicknessReason(report.reason)}}.
</p>
<code>
translations.en:
{
"tracking-report":
{
"span9":"In row {{rowNumber}}, there were {{sick}} sick and {{dead}} dead plants due to {{reason}}"
}
}
translations.fr:
{
"tracking-report":
{
"span9":"Dans la rangée {{rowNumber}}, il y avait {{sick}} plantes malades et {{dead}} morts à cause de {{reason}}",
}
}
translations.pt:
{
"tracking-report":
{
"span9":"Dans la rangée {{rowNumber}}, il y avait {{sick}} plantes malades et {{dead}} morts à cause de {{reason}}"
}
}
</code>
</template>