fix(react-ontario): fix sanitizeHref hyphen-stripping bug; add utils, i18n, and context tests

The /[ -]/ regex character-class range (space 0x20 to hyphen 0x2D) was silently
stripping hyphens from all URLs — corrupting dashed hostnames, path segments,
tel: numbers, and hash fragments. Fixed to /[\x00-\x1f\x7f]/ (C0 control chars
+ DEL only), matching the react-uswds implementation.

The bug was caught by four new test files added to close the test suite gaps vs
react-uswds:
- sanitizeHref.test.ts — protocol allowlist, blocking, console.warn coverage
- sanitizeHref.regression.test.ts — hyphen preservation regression guard
- safeHtml.test.ts — DOMPurify integration, SEC-1A/B/C/D, resetPurifier
- safeHtmlLazyInit.test.ts — LWS-4 lazy init behaviour
- i18n.test.tsx — I18N-1/I18N-2 contract for all 20 language-aware components
- OntarioContext.test.tsx — adds renderHook isolation tests alongside existing
  component-render tests

1477 tests passing (was 1352).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: sschupbach-salesforce

packages/react-ontario/src/components/__tests__/i18n.test.tsx

@@ -0,0 +1,231 @@
+/// <reference types="@testing-library/jest-dom" />
+/*
+ * Copyright (c) 2026, Salesforce GPS Accelerators.
+ * All rights reserved.
+ * Licensed under the Apache License, Version 2.0.
+ *
+ * i18n contract tests for all language-aware Ontario components.
+ *
+ * Contract (I18N-1 / I18N-2):
+ *   - When rendered inside OntarioProvider, the component must forward the
+ *     context language to the upstream Stencil element (data-prop-language).
+ *   - An explicit `language` prop on the component must override the context value.
+ *   - When rendered outside any OntarioProvider, the component must default to "en".
+ *
+ * Each describe block covers one language-aware component with three tests.
+ */
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { OntarioProvider } from '../../context/OntarioContext';
+import { OntarioAccordion } from '../OntarioAccordion/OntarioAccordion';
+import { OntarioBackToTop } from '../OntarioBackToTop/OntarioBackToTop';
+import { OntarioCheckboxes } from '../OntarioCheckboxes/OntarioCheckboxes';
+import { OntarioDateInput } from '../OntarioDateInput/OntarioDateInput';
+import { OntarioDropdownList } from '../OntarioDropdownList/OntarioDropdownList';
+import { OntarioFooter } from '../OntarioFooter/OntarioFooter';
+import { OntarioHeader } from '../OntarioHeader/OntarioHeader';
+import { OntarioHeaderMenuTabs } from '../OntarioHeaderMenuTabs/OntarioHeaderMenuTabs';
+import { OntarioHeaderOverflowMenu } from '../OntarioHeaderOverflowMenu/OntarioHeaderOverflowMenu';
+import { OntarioHintExpander } from '../OntarioHintExpander/OntarioHintExpander';
+import { OntarioInput } from '../OntarioInput/OntarioInput';
+import { OntarioLanguageToggle } from '../OntarioLanguageToggle/OntarioLanguageToggle';
+import { OntarioLoadingIndicator } from '../OntarioLoadingIndicator/OntarioLoadingIndicator';
+import { OntarioRadioButtons } from '../OntarioRadioButtons/OntarioRadioButtons';
+import { OntarioSearchBox } from '../OntarioSearchBox/OntarioSearchBox';
+import { OntarioStepIndicator } from '../OntarioStepIndicator/OntarioStepIndicator';
+import { OntarioSummaryList } from '../OntarioSummaryList/OntarioSummaryList';
+import { OntarioTask } from '../OntarioTask/OntarioTask';
+import { OntarioTaskList } from '../OntarioTaskList/OntarioTaskList';
+import { OntarioTextarea } from '../OntarioTextarea/OntarioTextarea';
+
+// ---------------------------------------------------------------------------
+// Single vi.mock covers all 20 components — all are in the same upstream package
+// ---------------------------------------------------------------------------
+vi.mock('@ongov/ontario-design-system-component-library-react', () => {
+  const makeStub = (testId: string) =>
+    vi.fn((props: Record<string, unknown>) => {
+      const attrs: Record<string, string> = {};
+      for (const [k, v] of Object.entries(props)) {
+        if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
+          attrs[`data-prop-${k.toLowerCase()}`] = String(v);
+        }
+      }
+      return <div data-testid={testId} {...attrs} />;
+    });
+
+  return {
+    OntarioAccordion: makeStub('mock-ontarioaccoordion-i18n'),
+    OntarioBackToTop: makeStub('mock-ontariobacktotop-i18n'),
+    OntarioCheckboxes: makeStub('mock-ontariocheckboxes-i18n'),
+    OntarioDateInput: makeStub('mock-ontariodateinput-i18n'),
+    OntarioDropdownList: makeStub('mock-ontariodropdownlist-i18n'),
+    OntarioFooter: makeStub('mock-ontariofooter-i18n'),
+    OntarioHeader: makeStub('mock-ontarioheader-i18n'),
+    OntarioHeaderMenuTabs: makeStub('mock-ontarioheadermenutabs-i18n'),
+    OntarioHeaderOverflowMenu: makeStub('mock-ontarioheaderoverflowmenu-i18n'),
+    OntarioHintExpander: makeStub('mock-ontariohintexpander-i18n'),
+    OntarioInput: makeStub('mock-ontarioinput-i18n'),
+    OntarioLanguageToggle: makeStub('mock-ontariolanguagetoggle-i18n'),
+    OntarioLoadingIndicator: makeStub('mock-ontarioloadingindicator-i18n'),
+    OntarioRadioButtons: makeStub('mock-ontarioradiobuttons-i18n'),
+    OntarioSearchBox: makeStub('mock-ontariosearchbox-i18n'),
+    OntarioStepIndicator: makeStub('mock-ontariostepindicator-i18n'),
+    OntarioSummaryList: makeStub('mock-ontariosummarylist-i18n'),
+    OntarioTask: makeStub('mock-ontariotask-i18n'),
+    OntarioTaskList: makeStub('mock-ontariotasklist-i18n'),
+    OntarioTextarea: makeStub('mock-ontariotextarea-i18n'),
+    setAssetPath: vi.fn(),
+  };
+});
+
+// ---------------------------------------------------------------------------
+// Shared menu items fixture for header components
+// ---------------------------------------------------------------------------
+const MENU_ITEMS = [{ title: 'Home', href: 'https://ontario.ca' }];
+
+// ---------------------------------------------------------------------------
+// Helper to assert the three-test i18n contract for a single component
+// ---------------------------------------------------------------------------
+function assertI18nContract(
+  testId: string,
+  renderFn: (language?: 'en' | 'fr') => React.ReactElement,
+) {
+  it('defaults to "en" when rendered outside any OntarioProvider', () => {
+    render(renderFn());
+    expect(screen.getByTestId(testId)).toHaveAttribute('data-prop-language', 'en');
+  });
+
+  it('reads "fr" from OntarioProvider when no language prop is set', () => {
+    render(<OntarioProvider language="fr">{renderFn()}</OntarioProvider>);
+    expect(screen.getByTestId(testId)).toHaveAttribute('data-prop-language', 'fr');
+  });
+
+  it('explicit language prop overrides OntarioProvider value', () => {
+    render(<OntarioProvider language="fr">{renderFn('en')}</OntarioProvider>);
+    expect(screen.getByTestId(testId)).toHaveAttribute('data-prop-language', 'en');
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Per-component i18n suites
+// ---------------------------------------------------------------------------
+
+describe('OntarioAccordion — i18n contract', () => {
+  assertI18nContract('mock-ontarioaccoordion-i18n', (language) => (
+    <OntarioAccordion {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioBackToTop — i18n contract', () => {
+  assertI18nContract('mock-ontariobacktotop-i18n', (language) => (
+    <OntarioBackToTop {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioCheckboxes — i18n contract', () => {
+  assertI18nContract('mock-ontariocheckboxes-i18n', (language) => (
+    <OntarioCheckboxes {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioDateInput — i18n contract', () => {
+  assertI18nContract('mock-ontariodateinput-i18n', (language) => (
+    <OntarioDateInput {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioDropdownList — i18n contract', () => {
+  assertI18nContract('mock-ontariodropdownlist-i18n', (language) => (
+    <OntarioDropdownList {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioFooter — i18n contract', () => {
+  assertI18nContract('mock-ontariofooter-i18n', (language) => (
+    <OntarioFooter {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioHeader — i18n contract', () => {
+  assertI18nContract('mock-ontarioheader-i18n', (language) => (
+    <OntarioHeader {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioHeaderMenuTabs — i18n contract', () => {
+  assertI18nContract('mock-ontarioheadermenutabs-i18n', (language) => (
+    <OntarioHeaderMenuTabs menuItems={MENU_ITEMS} {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioHeaderOverflowMenu — i18n contract', () => {
+  assertI18nContract('mock-ontarioheaderoverflowmenu-i18n', (language) => (
+    <OntarioHeaderOverflowMenu menuItems={MENU_ITEMS} {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioHintExpander — i18n contract', () => {
+  assertI18nContract('mock-ontariohintexpander-i18n', (language) => (
+    <OntarioHintExpander {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioInput — i18n contract', () => {
+  assertI18nContract('mock-ontarioinput-i18n', (language) => (
+    <OntarioInput {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioLanguageToggle — i18n contract', () => {
+  assertI18nContract('mock-ontariolanguagetoggle-i18n', (language) => (
+    <OntarioLanguageToggle {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioLoadingIndicator — i18n contract', () => {
+  assertI18nContract('mock-ontarioloadingindicator-i18n', (language) => (
+    <OntarioLoadingIndicator {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioRadioButtons — i18n contract', () => {
+  assertI18nContract('mock-ontarioradiobuttons-i18n', (language) => (
+    <OntarioRadioButtons {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioSearchBox — i18n contract', () => {
+  assertI18nContract('mock-ontariosearchbox-i18n', (language) => (
+    <OntarioSearchBox {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioStepIndicator — i18n contract', () => {
+  assertI18nContract('mock-ontariostepindicator-i18n', (language) => (
+    <OntarioStepIndicator {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioSummaryList — i18n contract', () => {
+  assertI18nContract('mock-ontariosummarylist-i18n', (language) => (
+    <OntarioSummaryList {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioTask — i18n contract', () => {
+  assertI18nContract('mock-ontariotask-i18n', (language) => (
+    <OntarioTask {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioTaskList — i18n contract', () => {
+  assertI18nContract('mock-ontariotasklist-i18n', (language) => (
+    <OntarioTaskList {...(language ? { language } : {})} />
+  ));
+});
+
+describe('OntarioTextarea — i18n contract', () => {
+  assertI18nContract('mock-ontariotextarea-i18n', (language) => (
+    <OntarioTextarea {...(language ? { language } : {})} />
+  ));
+});

packages/react-ontario/src/context/__tests__/OntarioContext.test.tsx

@@ -4,7 +4,7 @@
  * All rights reserved.
  * Licensed under the Apache License, Version 2.0.
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { OntarioProvider, useOntario } from '../OntarioContext';
 
@@ -124,16 +124,11 @@ describe('useOntario()', () => {
 
 describe('explicit language override pattern', () => {
   it('a consumer prop overrides the context language value', () => {
-    // This demonstrates the recommended pattern for components that accept
-    // an optional `language` prop: the prop wins over context when provided.
     render(
       <OntarioProvider language="fr">
-        {/* overrideLanguage="en" simulates a component prop taking precedence */}
         <LanguageConsumer overrideLanguage="en" />
       </OntarioProvider>,
     );
-
-    // Context says 'fr', but the explicit override wins.
     expect(screen.getByTestId('lang')).toHaveTextContent('en');
   });
 
@@ -143,7 +138,50 @@ describe('explicit language override pattern', () => {
         <LanguageConsumer />
       </OntarioProvider>,
     );
-
     expect(screen.getByTestId('lang')).toHaveTextContent('fr');
   });
 });
+
+// ---------------------------------------------------------------------------
+// renderHook — hook isolation tests (mirrors react-uswds context test style)
+// ---------------------------------------------------------------------------
+describe('useOntario inside a Provider (renderHook)', () => {
+  it('returns the language value passed to the Provider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <OntarioProvider language="fr">{children}</OntarioProvider>
+    );
+    const { result } = renderHook(() => useOntario(), { wrapper });
+    expect(result.current.language).toBe('fr');
+  });
+
+  it('returns the assetsBasePath value passed to the Provider', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <OntarioProvider assetsBasePath="/static/ontario">{children}</OntarioProvider>
+    );
+    const { result } = renderHook(() => useOntario(), { wrapper });
+    expect(result.current.assetsBasePath).toBe('/static/ontario');
+  });
+
+  it('reflects both language and assetsBasePath when both are provided', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <OntarioProvider language="fr" assetsBasePath="https://cdn.example.com/ontario">
+        {children}
+      </OntarioProvider>
+    );
+    const { result } = renderHook(() => useOntario(), { wrapper });
+    expect(result.current.language).toBe('fr');
+    expect(result.current.assetsBasePath).toBe('https://cdn.example.com/ontario');
+  });
+});
+
+describe('useOntario outside a Provider (renderHook)', () => {
+  it('returns "en" for language (context default)', () => {
+    const { result } = renderHook(() => useOntario());
+    expect(result.current.language).toBe('en');
+  });
+
+  it('returns empty string for assetsBasePath (context default)', () => {
+    const { result } = renderHook(() => useOntario());
+    expect(result.current.assetsBasePath).toBe('');
+  });
+});