@surea11y/core 1.7.0 → 1.8.1

package/src/report.js

@@ -11,6 +11,8 @@
  * scorecard + searchable/filterable/paginated table, dark-mode CSS.
  */
 
+const { NORMATIVE_STANDARDS, standardOfEntry } = require('./coverage/standards.js');
+
 // Uses the dataviz skill's validated status palette, mapped 1:1 onto this
 // engine's own 4 outcomes.
 const STATUS = {
@@ -23,14 +25,78 @@ const STATUS = {
 // fail first: a QA tester scanning a report wants violations up front,
 // not passes.
 const OUTCOME_ORDER = ['fail', 'cantTell', 'pass', 'notApplicable'];
-const OUTCOME_INFO = {
-  fail: { label: 'Fail', status: 'serious', defaultOn: true },
-  cantTell: { label: 'Needs review', status: 'warning', defaultOn: true },
-  pass: { label: 'Pass', status: 'good', defaultOn: false },
-  notApplicable: { label: 'Not applicable', status: 'neutral', defaultOn: false }
+const OUTCOME_STATUS = {
+  fail: { status: 'serious', defaultOn: true },
+  cantTell: { status: 'warning', defaultOn: true },
+  pass: { status: 'good', defaultOn: false },
+  notApplicable: { status: 'neutral', defaultOn: false }
 };
-for (const code of OUTCOME_ORDER) {
-  Object.assign(OUTCOME_INFO[code], STATUS[OUTCOME_INFO[code].status]);
+
+// Every word on the page comes from the engine's dictionaries (report_*
+// keys), so a report reads in the language its scan resolved to and a new
+// locale needs no change here. Loaded on first use: rendering a saved result
+// should not cost a scan's worth of setup until a report is asked for.
+let translator = null;
+function getTranslator() {
+  if (!translator) translator = require('./core.js').__internal;
+  return translator;
+}
+
+// The page speaks the locale the scan resolved to when the engine carries
+// it. A dictionary the caller supplied at scan time is not in the result, so
+// such a report falls back to English labels and marks the findings with
+// their own language instead.
+function createUi(engine) {
+  const core = getTranslator();
+  const locale = engine && engine.locale;
+  const contentLocale =
+    locale && typeof locale.resolved === 'string' && locale.resolved ? locale.resolved : 'en';
+  const uiLocale = core.resolveLocale(contentLocale).resolved;
+
+  const tr = (key, params) => core.translate(key, '', params || null, uiLocale);
+
+  let numberFormat;
+  try {
+    numberFormat = new Intl.NumberFormat(uiLocale);
+  } catch {
+    numberFormat = new Intl.NumberFormat('en-US');
+  }
+  const num = (n) => numberFormat.format(Number(n) || 0);
+
+  // Escapes the translated sentence, then puts the numbers back in bold.
+  // Dictionaries hold plain text; markup never goes through them.
+  function trStrong(key, params) {
+    const marked = {};
+    const values = [];
+    for (const name of Object.keys(params)) {
+      marked[name] = `\uE000${values.length}\uE000`;
+      values.push(params[name]);
+    }
+    return esc(tr(key, marked)).replace(
+      /\uE000(\d+)\uE000/g,
+      (m, i) => `<strong>${num(values[Number(i)])}</strong>`
+    );
+  }
+
+  const outcomeInfo = {};
+  for (const code of OUTCOME_ORDER) {
+    outcomeInfo[code] = {
+      label: tr(`report_outcome_${code}`),
+      defaultOn: OUTCOME_STATUS[code].defaultOn,
+      ...STATUS[OUTCOME_STATUS[code].status]
+    };
+  }
+
+  const severity = (s) => {
+    const label = typeof s === 'string' ? tr(`report_severity_${s}`) : '';
+    return label || String(s || '');
+  };
+
+  // The English text a message key renders to, for telling a translated
+  // string from one that fell back to English.
+  const english = (key, params) => (key ? core.translate(key, '', params || null, 'en') : null);
+
+  return { tr, trStrong, num, outcomeInfo, severity, uiLocale, contentLocale, english };
 }
 
 function esc(s) {
@@ -84,24 +150,80 @@ function getCardOutcome(ruleResult) {
   return hasCantTell ? 'cantTell' : ruleResult.outcome;
 }
 
+// Same test as src/sarif.js: other standards (EN 301 549, say) and WCAG's
+// non-normative documents (`type: 'Understanding'`) share `requirement`
+// with a Success Criterion, and chipping them as "WCAG" mislabels or repeats it.
+function isWcagCriterion(m) {
+  return !!(m && m.requirement && (m.standard == null || m.standard === 'WCAG') && !m.type);
+}
+
+// What the scan was tested against, and any opt-in rules it added. A result
+// from an engine older than the WCAG-version target carries none of these
+// fields and gets no chips.
+function renderTargetChips(engine, ui) {
+  if (!engine) return '';
+  const chips = [];
+  if (engine.wcagVersion)
+    chips.push(
+      `<div><b>WCAG ${esc(engine.wcagVersion)}</b>${esc(ui.tr('report_meta_target'))}</div>`
+    );
+  if (engine.profile)
+    chips.push(`<div><b>${esc(engine.profile)}</b>${esc(ui.tr('report_meta_profile'))}</div>`);
+  // Rules beyond the targeted standard ran (engineOptions.optInRules).
+  if (Array.isArray(engine.optInRules) && engine.optInRules.length)
+    chips.push(
+      `<div><b>${esc(engine.optInRules.join(', '))}</b>${esc(ui.tr('report_meta_optInRules'))}</div>`
+    );
+  return chips.join('\n  ');
+}
+
 // Locale fallback is per-string and silent in the text itself, so a report
 // generated in a locale the engine does not carry reads as a normal English
 // one. A result from an older engine has no engine.locale and gets no chip.
-function renderLocaleChip(engine) {
+function renderLocaleChip(engine, ui) {
   const locale = engine && engine.locale;
   if (!locale || typeof locale.resolved !== 'string' || !locale.resolved) return '';
 
   const fellBack = locale.requested !== locale.resolved;
-  const label = fellBack ? `locale (requested ${esc(locale.requested)})` : 'locale';
+  const label = esc(
+    fellBack
+      ? ui.tr('report_meta_localeRequested', { requested: locale.requested })
+      : ui.tr('report_meta_locale')
+  );
 
   return `<div><b>${esc(locale.resolved)}</b>${label}</div>`;
 }
 
+// Rule titles, summaries and hints arrive in the scan's locale. When the
+// page's own labels are in a different language (a caller-supplied
+// dictionary the engine does not carry), those parts are marked with their
+// language so a screen reader switches voice for them (WCAG 3.1.2).
+const LANG_TAG = /^[A-Za-z]{2,3}(-[A-Za-z0-9]{1,8})*$/;
+function contentLang(ui) {
+  const lang = ui.contentLocale;
+  if (!LANG_TAG.test(lang) || lang.toLowerCase() === ui.uiLocale.toLowerCase()) return '';
+  return lang;
+}
+
+// The language one string is in: the scan's, unless the dictionary had no
+// entry for its key and it came out as the English text, which the English
+// page around it already covers. '' when no attribute is needed.
+function textLang(ui, text, key, params) {
+  const lang = contentLang(ui);
+  if (!lang || !text) return '';
+  return key && ui.english(key, params) === text ? '' : lang;
+}
+
+function langAttr(lang) {
+  return lang ? ` lang="${esc(lang)}"` : '';
+}
+
 // One plain-language headline + one horizontal stacked bar + a legend with
 // icon+label+count (status color is never the only signal) -- the first
 // thing a reader sees; exhaustive detail lives in the collapsed
 // "full technical data" section further down.
-function renderHeroBar(byOutcome) {
+function renderHeroBar(byOutcome, ui) {
+  const OUTCOME_INFO = ui.outcomeInfo;
   const total = OUTCOME_ORDER.reduce((sum, c) => sum + byOutcome[c], 0) || 1;
   const applicable = byOutcome.pass + byOutcome.fail + byOutcome.cantTell;
 
@@ -110,7 +232,7 @@ function renderHeroBar(byOutcome) {
       const n = byOutcome[c];
       const pct = (n / total) * 100;
       const info = OUTCOME_INFO[c];
-      return `<div class="hero-bar-seg" style="width:${pct}%; background:${info.color}" title="${esc(info.label)}: ${n.toLocaleString()} (${pct.toFixed(1)}%)"></div>`;
+      return `<div class="hero-bar-seg" style="width:${pct}%; background:${info.color}" title="${esc(info.label)}: ${ui.num(n)} (${pct.toFixed(1)}%)"></div>`;
     })
     .join('');
 
@@ -120,19 +242,26 @@ function renderHeroBar(byOutcome) {
     return `<div class="hero-legend-item">
         <span class="hero-legend-swatch" style="background:${info.color}">${info.icon}</span>
         <span class="hero-legend-label">${esc(info.label)}</span>
-        <span class="hero-legend-count">${n.toLocaleString()} (${fmtPct(n, total)})</span>
+        <span class="hero-legend-count">${ui.num(n)} (${fmtPct(n, total)})</span>
       </div>`;
   }).join('\n');
 
   let headline;
   if (byOutcome.fail > 0) {
-    headline = `<strong>${byOutcome.pass.toLocaleString()}</strong> of <strong>${applicable.toLocaleString()}</strong> applicable checks passed. <strong>${byOutcome.fail.toLocaleString()}</strong> failure${byOutcome.fail === 1 ? '' : 's'} need${byOutcome.fail === 1 ? 's' : ''} attention below.`;
+    headline = ui.trStrong(
+      byOutcome.fail === 1 ? 'report_hero_failures_one' : 'report_hero_failures_other',
+      { passed: byOutcome.pass, applicable, failed: byOutcome.fail }
+    );
   } else if (byOutcome.cantTell > 0) {
-    headline = `<strong>${byOutcome.pass.toLocaleString()}</strong> of <strong>${applicable.toLocaleString()}</strong> applicable checks passed, with <strong>${byOutcome.cantTell.toLocaleString()}</strong> needing manual review.`;
+    headline = ui.trStrong('report_hero_review', {
+      passed: byOutcome.pass,
+      applicable,
+      review: byOutcome.cantTell
+    });
   } else if (applicable > 0) {
-    headline = `All <strong>${applicable.toLocaleString()}</strong> applicable checks passed.`;
+    headline = ui.trStrong('report_hero_allPassed', { applicable });
   } else {
-    headline = 'No applicable checks ran for this scan.';
+    headline = esc(ui.tr('report_hero_none'));
   }
 
   return `<div class="hero">
@@ -142,13 +271,14 @@ function renderHeroBar(byOutcome) {
   </div>`;
 }
 
-function renderScorecard(byOutcome) {
+function renderScorecard(byOutcome, ui) {
+  const OUTCOME_INFO = ui.outcomeInfo;
   const total = OUTCOME_ORDER.reduce((sum, c) => sum + byOutcome[c], 0);
   const tiles = OUTCOME_ORDER.map((c) => {
     const n = byOutcome[c];
     const info = OUTCOME_INFO[c];
     return `<div class="tile" style="border-color:${info.color}; background:${info.bg}">
-      <div class="tile-num" style="color:${info.color}">${n.toLocaleString()}</div>
+      <div class="tile-num" style="color:${info.color}">${ui.num(n)}</div>
       <div class="tile-pct">${fmtPct(n, total)}</div>
       <div class="tile-label">${esc(info.label)}</div>
     </div>`;
@@ -160,9 +290,10 @@ function renderScorecard(byOutcome) {
 // entry per Success Criterion, docs/WCAG_CONFORMANCE.md), not an invented
 // grouping. Grouped by conformance level (A / AA / AAA) since that's the
 // axis a compliance-minded reader actually cares about.
-function renderWcagRollup(rulesResults) {
+function renderWcagRollup(rulesResults, ui) {
+  const OUTCOME_INFO = ui.outcomeInfo;
   if (!Array.isArray(rulesResults) || !rulesResults.length) {
-    return '<p class="note">No WCAG composite rollups available for this scan (composite rules were excluded via runOnly/engineOptions).</p>';
+    return `<p class="note">${esc(ui.tr('report_rollup_none'))}</p>`;
   }
 
   const byLevel = { A: [], AA: [], AAA: [], other: [] };
@@ -189,11 +320,34 @@ function renderWcagRollup(rulesResults) {
           const metrics = (rule.data && rule.data.details && rule.data.details.metrics) || {};
           const checksIds = (rule.data && rule.data.details && rule.data.details.checksIds) || [];
           const chip = `<span class="chip" style="background:${info.bg};color:${info.color}">${esc(info.label)}</span>`;
-          const scLabel = mapping ? `WCAG ${esc(mapping.requirement)}` : 'WCAG (unmapped)';
-          const metricsLabel = `${metrics.passCount || 0} pass / ${metrics.failCount || 0} fail / ${metrics.cantTellCount || 0} needs review / ${metrics.notApplicableCount || 0} n/a`;
+          const scLabel = mapping
+            ? `WCAG ${esc(mapping.requirement)}`
+            : esc(ui.tr('report_rollup_unmapped'));
+          // One line per registered standard the row carries, in registry
+          // order. A requirement numbered the same in two versions (as EN 301
+          // 549 clauses are) is listed once.
+          const ruleMappings = (rule.meta && rule.meta.normativeMappings) || [];
+          const enLabel = NORMATIVE_STANDARDS.map((standard) => {
+            const requirements = Array.from(
+              new Set(
+                ruleMappings
+                  .filter((m) => standardOfEntry(m) === standard)
+                  .map((m) => m.requirement)
+              )
+            );
+            return requirements.length
+              ? `<br><span class="note">${esc(standard.standard)} ${requirements.map(esc).join(', ')}</span>`
+              : '';
+          }).join('');
+          const metricsLabel = ui.tr('report_rollup_breakdown', {
+            pass: ui.num(metrics.passCount),
+            fail: ui.num(metrics.failCount),
+            review: ui.num(metrics.cantTellCount),
+            na: ui.num(metrics.notApplicableCount)
+          });
           return `<tr>
-            <td class="sc-cell">${scLabel}</td>
-            <td>${esc(rule.title || rule.ruleId)}</td>
+            <td class="sc-cell">${scLabel}${enLabel}</td>
+            <td${langAttr(textLang(ui, rule.title, rule.i18n && rule.i18n.titleKey))}>${esc(rule.title || rule.ruleId)}</td>
             <td>${chip}</td>
             <td class="note">${esc(metricsLabel)}</td>
             <td class="note">${esc(checksIds.join(', '))}</td>
@@ -201,9 +355,13 @@ function renderWcagRollup(rulesResults) {
         })
         .join('\n');
 
-      return `<h3 class="wcag-level-heading">Level ${level === 'other' ? '(unmapped)' : level}</h3>
+      const levelHeading =
+        level === 'other'
+          ? ui.tr('report_rollup_levelUnmapped')
+          : ui.tr('report_rollup_level', { level });
+      return `<h3 class="wcag-level-heading">${esc(levelHeading)}</h3>
       <table class="wcag-table">
-        <thead><tr><th>SC</th><th>Requirement</th><th>Outcome</th><th>Breakdown</th><th>Contributing rules</th></tr></thead>
+        <thead><tr><th>${esc(ui.tr('report_rollup_col_sc'))}</th><th>${esc(ui.tr('report_rollup_col_requirement'))}</th><th>${esc(ui.tr('report_col_outcome'))}</th><th>${esc(ui.tr('report_rollup_col_breakdown'))}</th><th>${esc(ui.tr('report_rollup_col_contributing'))}</th></tr></thead>
         <tbody>${rows}</tbody>
       </table>`;
     })
@@ -212,8 +370,56 @@ function renderWcagRollup(rulesResults) {
   return sections;
 }
 
+// A registered standard's own rollups (one per requirement, say), present only
+// when the scan produced them. `standard.report` supplies the note above the
+// table and the language of the titles when it is not the scan's.
+function renderStandardRollup(standard, results, ui) {
+  const OUTCOME_INFO = ui.outcomeInfo;
+  const report = standard.report || {};
+  const titleLang = report.titleLang ? ` lang="${esc(report.titleLang)}"` : '';
+  const byCriterion = (r) =>
+    String((r.data && r.data.details && r.data.details.criterion) || r.ruleId || '');
+  const rows = results
+    .slice()
+    .sort((a, b) => byCriterion(a).localeCompare(byCriterion(b), undefined, { numeric: true }))
+    .map((rule) => {
+      const info = OUTCOME_INFO[rule.outcome] || OUTCOME_INFO.notApplicable;
+      const details = (rule.data && rule.data.details) || {};
+      const metrics = details.metrics || {};
+      const checksIds = details.checksIds || [];
+      const tests = Array.from(
+        new Set(
+          ((rule.meta && rule.meta.normativeMappings) || [])
+            .filter((m) => standardOfEntry(m) === standard)
+            .map((m) => m.requirement)
+        )
+      );
+      const chip = `<span class="chip" style="background:${info.bg};color:${info.color}">${esc(info.label)}</span>`;
+      const metricsLabel = ui.tr('report_rollup_breakdown', {
+        pass: ui.num(metrics.passCount),
+        fail: ui.num(metrics.failCount),
+        review: ui.num(metrics.cantTellCount),
+        na: ui.num(metrics.notApplicableCount)
+      });
+      return `<tr>
+            <td class="sc-cell">${esc(standard.standard)} ${esc(byCriterion(rule))}${tests.length ? `<br><span class="note">${tests.map(esc).join(', ')}</span>` : ''}</td>
+            <td${titleLang}>${esc(rule.title || rule.ruleId)}</td>
+            <td>${chip}</td>
+            <td class="note">${esc(metricsLabel)}</td>
+            <td class="note">${esc(checksIds.join(', '))}</td>
+          </tr>`;
+    })
+    .join('\n');
+  const note = report.noteKey ? `<p class="note">${esc(ui.tr(report.noteKey))}</p>\n      ` : '';
+  return `${note}<table class="wcag-table">
+        <thead><tr><th>${esc(ui.tr('report_standardRollup_col_criterion'))}</th><th>${esc(ui.tr('report_rollup_col_requirement'))}</th><th>${esc(ui.tr('report_col_outcome'))}</th><th>${esc(ui.tr('report_rollup_col_breakdown'))}</th><th>${esc(ui.tr('report_rollup_col_contributing'))}</th></tr></thead>
+        <tbody>${rows}</tbody>
+      </table>`;
+}
+
 // Collapse internal whitespace/newlines and cap length for card display --
-// the findings table below shows the untruncated value.
+// the findings table below shows the untruncated selector and summary. The
+// hint is left whole: it is the fix advice, and the table does not repeat it.
 const CARD_SNIPPET_MAX = 220;
 function truncateForCard(s) {
   const collapsed = String(s || '')
@@ -228,7 +434,8 @@ function truncateForCard(s) {
 // the same underlying issue is one thing worth a person's attention, not N.
 const MAX_CARDS = 24;
 
-function renderCards(checksResults) {
+function renderCards(checksResults, ui) {
+  const OUTCOME_INFO = ui.outcomeInfo;
   const withIssues = checksResults.filter(
     (r) =>
       Array.isArray(r.occurrences) &&
@@ -238,7 +445,7 @@ function renderCards(checksResults) {
       })
   );
   if (!withIssues.length) {
-    return '<p class="note">No fail/cantTell rules with occurrences on this scan.</p>';
+    return `<p class="note">${esc(ui.tr('report_cards_none'))}</p>`;
   }
 
   const sorted = withIssues.slice().sort((a, b) => {
@@ -261,7 +468,9 @@ function renderCards(checksResults) {
       const representative =
         r.occurrences.find((occ) => getOccurrenceOutcome(r, occ) === cardOutcome) ||
         r.occurrences[0];
+      const occI18n = representative.i18n || {};
       const wcagChips = ((r.meta && r.meta.normativeMappings) || [])
+        .filter(isWcagCriterion)
         .map(
           (m) =>
             `<span class="chip" style="background:${STATUS.neutral.bg};color:${STATUS.neutral.color}">WCAG ${esc(m.requirement)}</span>`
@@ -270,19 +479,19 @@ function renderCards(checksResults) {
       const hasMixedOutcomes = occurrenceCounts.fail > 0 && occurrenceCounts.cantTell > 0;
       const countLabel =
         r.occurrences.length > 1
-          ? ` <span class="card-count">× ${r.occurrences.length.toLocaleString()}${hasMixedOutcomes ? ` (${occurrenceCounts.fail.toLocaleString()} fail / ${occurrenceCounts.cantTell.toLocaleString()} needs review)` : ''}</span>`
+          ? ` <span class="card-count">× ${ui.num(r.occurrences.length)}${hasMixedOutcomes ? ` ${esc(ui.tr('report_card_mixed', { fail: ui.num(occurrenceCounts.fail), review: ui.num(occurrenceCounts.cantTell) }))}` : ''}</span>`
           : '';
 
       return `<div class="card">
       <div class="card-head">
         <span class="hero-legend-swatch" style="background:${info.color}">${info.icon}</span>
-        <span class="card-title"><strong>${esc(r.ruleId)}</strong> (${esc(info.label)}, ${esc(r.severity)})${countLabel}</span>
+        <span class="card-title"><strong>${esc(r.ruleId)}</strong> ${esc(ui.tr('report_card_status', { outcome: info.label, severity: ui.severity(r.severity) }))}${countLabel}</span>
       </div>
       <div class="card-body">
         <div class="card-meta">${wcagChips}</div>
-        <div class="card-selector"><span class="card-selector-label">Selector:</span> <code>${esc(representative.selector || '(none)')}</code></div>
-        <div class="card-snippet">${esc(representative.summary)}${representative.hint ? ` — ${esc(representative.hint)}` : ''}</div>
-        ${r.occurrences.length > 1 ? `<p class="card-note">Selector/summary above are from one representative occurrence; ${r.occurrences.length.toLocaleString()} total on this rule.</p>` : ''}
+        <div class="card-selector"><span class="card-selector-label">${esc(ui.tr('report_card_selector'))}</span> <code>${esc(representative.selector ? truncateForCard(representative.selector) : ui.tr('report_card_noSelector'))}</code></div>
+        <div class="card-snippet">${snippetPart(ui, truncateForCard(representative.summary), representative.summary, occI18n.summaryKey, occI18n.params)}${representative.hint ? ` — ${snippetPart(ui, representative.hint, representative.hint, occI18n.hintKey, occI18n.params)}` : ''}</div>
+        ${r.occurrences.length > 1 ? `<p class="card-note">${esc(ui.tr('report_card_representative', { count: ui.num(r.occurrences.length) }))}</p>` : ''}
       </div>
     </div>`;
     })
@@ -290,16 +499,23 @@ function renderCards(checksResults) {
 
   const overflow =
     sorted.length > MAX_CARDS
-      ? `<p class="note">Showing the ${MAX_CARDS} highest-priority rules of ${sorted.length.toLocaleString()} with issues. See the full technical data below for the rest.</p>`
+      ? `<p class="note">${esc(ui.tr('report_cards_overflow', { shown: ui.num(MAX_CARDS), total: ui.num(sorted.length) }))}</p>`
       : '';
 
   return `<div class="cards">${cards}</div>${overflow}`;
 }
 
+// A summary or hint for a card, wrapped in its language when that is not the
+// page's. `full` is the untruncated text the key rendered to.
+function snippetPart(ui, shown, full, key, params) {
+  const lang = textLang(ui, full, key, params);
+  return lang ? `<span lang="${esc(lang)}">${esc(shown)}</span>` : esc(shown);
+}
+
 // Flatten every occurrence across every rule into one row per occurrence --
 // the searchable/filterable/paginated detail view. Rules with zero
 // occurrences (pass/notApplicable) have nothing to show at this granularity.
-function flattenOccurrences(checksResults) {
+function flattenOccurrences(checksResults, ui) {
   const rows = [];
   for (const r of checksResults) {
     if (!Array.isArray(r.occurrences)) continue;
@@ -309,9 +525,16 @@ function flattenOccurrences(checksResults) {
         ruleId: r.ruleId,
         outcome: occurrenceOutcome || r.outcome,
         severity: r.severity,
+        severityLabel: ui.severity(r.severity),
         selector: occ.selector || '',
         html: occ.html || '',
         summary: occ.summary || '',
+        summaryLang: textLang(
+          ui,
+          occ.summary,
+          occ.i18n && occ.i18n.summaryKey,
+          occ.i18n && occ.i18n.params
+        ),
         hint: occ.hint || ''
       });
     }
@@ -321,19 +544,45 @@ function flattenOccurrences(checksResults) {
 
 function renderHtmlReport(result, options = {}) {
   const checksResults = Array.isArray(result && result.checksResults) ? result.checksResults : [];
-  const rulesResults = Array.isArray(result && result.rulesResults) ? result.rulesResults : [];
+  const allRollups = Array.isArray(result && result.rulesResults) ? result.rulesResults : [];
+  // A rollup a registered standard defines for itself carries that standard's
+  // name in meta.standard and gets a section of its own after the WCAG one.
+  const ownStandard = (r) =>
+    (r && r.meta && NORMATIVE_STANDARDS.find((s) => s.standard === r.meta.standard)) || null;
+  const rulesResults = allRollups.filter((r) => !ownStandard(r));
+  const standardRollups = NORMATIVE_STANDARDS.map((standard) => ({
+    standard,
+    results: allRollups.filter((r) => ownStandard(r) === standard)
+  })).filter((s) => s.results.length);
   const byOutcome = countByOutcome(checksResults);
-  const generatedAtLabel = new Date().toLocaleString('en-US', {
-    dateStyle: 'medium',
-    timeStyle: 'medium'
-  });
-  const title = (options && options.title) || 'surea11y scan report';
+  const engine = result && result.engine;
+  const ui = createUi(engine);
+  const OUTCOME_INFO = ui.outcomeInfo;
+  let generatedAtLabel;
+  try {
+    generatedAtLabel = new Date().toLocaleString(ui.uiLocale, {
+      dateStyle: 'medium',
+      timeStyle: 'medium'
+    });
+  } catch {
+    generatedAtLabel = new Date().toLocaleString('en-US', {
+      dateStyle: 'medium',
+      timeStyle: 'medium'
+    });
+  }
+  const title = (options && options.title) || ui.tr('report_title_default');
 
   const defaultOnList = OUTCOME_ORDER.filter((c) => OUTCOME_INFO[c].defaultOn);
-  const rows = flattenOccurrences(checksResults);
+  const rows = flattenOccurrences(checksResults, ui);
+  const pageLang = LANG_TAG.test(ui.uiLocale) ? ui.uiLocale : 'en';
+  // Strings the in-page script needs; it cannot call the translator.
+  const clientText = {
+    none: ui.tr('report_pager_none'),
+    info: ui.tr('report_pager_info')
+  };
 
   return `<!doctype html>
-<html lang="en">
+<html lang="${esc(pageLang)}">
 <head>
 <meta charset="utf-8">
 <title>${esc(title)} — ${esc(generatedAtLabel)}</title>
@@ -416,53 +665,61 @@ function renderHtmlReport(result, options = {}) {
 
 <header>
   <h1>${esc(title)}</h1>
-  <div class="sub">${esc(result && result.url ? result.url : '(no url)')} — generated ${esc(generatedAtLabel)}</div>
+  <div class="sub">${esc(result && result.url ? result.url : ui.tr('report_noUrl'))} — ${esc(ui.tr('report_generated', { date: generatedAtLabel }))}</div>
 </header>
 
 <div class="meta-bar">
-  <div><b>${checksResults.length}</b>rules run</div>
-  <div><b>${rows.length}</b>total occurrences</div>
-  <div><b>${esc((result && result.engine && result.engine.tag) || '?')}</b>engine</div>
-  <div><b>${esc((result && result.engine && result.engine.schemaVersion) || '?')}</b>schema version</div>
-  ${renderLocaleChip(result && result.engine)}
+  <div><b>${ui.num(checksResults.length)}</b>${esc(ui.tr('report_meta_rulesRun'))}</div>
+  <div><b>${ui.num(rows.length)}</b>${esc(ui.tr('report_meta_totalOccurrences'))}</div>
+  <div><b>${esc((engine && engine.tag) || '?')}</b>${esc(ui.tr('report_meta_engine'))}</div>
+  <div><b>${esc((engine && engine.schemaVersion) || '?')}</b>${esc(ui.tr('report_meta_schemaVersion'))}</div>
+  ${renderTargetChips(engine, ui)}
+  ${renderLocaleChip(engine, ui)}
 </div>
 
 <main>
-  ${renderHeroBar(byOutcome)}
-
-  <h2>Worth reviewing</h2>
-  ${renderCards(checksResults)}
-
-  <h2>WCAG rollup</h2>
-  ${renderWcagRollup(rulesResults)}
-
+  ${renderHeroBar(byOutcome, ui)}
+
+  <h2>${esc(ui.tr('report_heading_worthReviewing'))}</h2>
+  ${renderCards(checksResults, ui)}
+
+  <h2>${esc(ui.tr('report_heading_wcagRollup'))}</h2>
+  ${renderWcagRollup(rulesResults, ui)}
+${standardRollups
+  .map(
+    ({ standard, results }) => `
+  <h2>${esc(ui.tr('report_heading_standardRollup', { standard: standard.standard }))}</h2>
+  ${renderStandardRollup(standard, results, ui)}
+`
+  )
+  .join('')}
   <details class="tech-details">
-    <summary>Full technical data — scorecard, searchable occurrence browser</summary>
+    <summary>${esc(ui.tr('report_techDetails'))}</summary>
     <div class="tech-body">
-      <h2>Scorecard</h2>
-      ${renderScorecard(byOutcome)}
+      <h2>${esc(ui.tr('report_heading_scorecard'))}</h2>
+      ${renderScorecard(byOutcome, ui)}
 
-      <h2>Occurrences</h2>
+      <h2>${esc(ui.tr('report_heading_occurrences'))}</h2>
       <div class="filters" id="filters"></div>
-      <input type="search" id="search" placeholder="Search rule id / selector / html…" style="margin-bottom:10px; padding:6px 10px; border:1px solid #ccc; border-radius:5px; font-size:13px; width:100%; max-width:480px;">
+      <input type="search" id="search" aria-label="${esc(ui.tr('report_search_placeholder'))}" placeholder="${esc(ui.tr('report_search_placeholder'))}" style="margin-bottom:10px; padding:6px 10px; border:1px solid #ccc; border-radius:5px; font-size:13px; width:100%; max-width:480px;">
       <div style="overflow-x:auto;">
         <table class="findings-table" id="findings-table">
           <thead>
             <tr>
-              <th>Rule</th>
-              <th>Outcome</th>
-              <th>Severity</th>
-              <th>Selector</th>
-              <th>Summary</th>
+              <th>${esc(ui.tr('report_col_rule'))}</th>
+              <th>${esc(ui.tr('report_col_outcome'))}</th>
+              <th>${esc(ui.tr('report_col_severity'))}</th>
+              <th>${esc(ui.tr('report_col_selector'))}</th>
+              <th>${esc(ui.tr('report_col_summary'))}</th>
             </tr>
           </thead>
           <tbody id="findings-body"></tbody>
         </table>
       </div>
       <div class="pager">
-        <button id="prev-page">&larr; Prev</button>
+        <button id="prev-page">&larr; ${esc(ui.tr('report_pager_prev'))}</button>
         <span id="page-info"></span>
-        <button id="next-page">Next &rarr;</button>
+        <button id="next-page">${esc(ui.tr('report_pager_next'))} &rarr;</button>
       </div>
     </div>
   </details>
@@ -477,6 +734,13 @@ function renderHtmlReport(result, options = {}) {
   var rows = JSON.parse(document.getElementById('report-data').textContent);
 
   var PAGE_SIZE = 100;
+  var TEXT = ${jsonForScript(clientText)};
+  var numberFormat = new Intl.NumberFormat(${jsonForScript(ui.uiLocale)});
+  function fill(template, values) {
+    return template.replace(/\\{\\{(\\w+)\\}\\}/g, function (m, k) {
+      return Object.prototype.hasOwnProperty.call(values, k) ? String(values[k]) : m;
+    });
+  }
   var page = 0;
   var active = {};
   DEFAULT_ON.forEach(function (c) { active[c] = true; });
@@ -531,15 +795,20 @@ function renderHtmlReport(result, options = {}) {
       return '<tr>' +
         '<td class="snippet">' + esc(r.ruleId) + '</td>' +
         '<td>' + chip + '</td>' +
-        '<td>' + esc(r.severity) + '</td>' +
+        '<td>' + esc(r.severityLabel) + '</td>' +
         '<td class="snippet" title="' + esc(r.html) + '">' + esc(r.selector) + '</td>' +
-        '<td class="snippet">' + esc(r.summary) + '</td>' +
+        '<td class="snippet"' + (r.summaryLang ? ' lang="' + esc(r.summaryLang) + '"' : '') + '>' + esc(r.summary) + '</td>' +
         '</tr>';
     }).join('');
 
     pageInfoEl.textContent = filtered.length === 0
-      ? 'No matching occurrences'
-      : ('Page ' + (page + 1) + ' / ' + totalPages + '  (' + filtered.length.toLocaleString() + ' matching, ' + rows.length.toLocaleString() + ' total)');
+      ? TEXT.none
+      : fill(TEXT.info, {
+          page: numberFormat.format(page + 1),
+          pages: numberFormat.format(totalPages),
+          matching: numberFormat.format(filtered.length),
+          total: numberFormat.format(rows.length)
+        });
     prevBtn.disabled = page <= 0;
     nextBtn.disabled = page >= totalPages - 1;
   }