address i18n gaps in players

Author: chillenious

packages/qti2-assessment-player/src/components/ItemRenderer.svelte

@@ -101,12 +101,12 @@
 				d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
 			/>
 		</svg>
-		<span>Error loading item: {playerData.error}</span>
+		<span>{i18n?.t('item.loadError', 'Error loading item: {error}', { error: playerData.error })}</span>
 	</div>
 {:else if !playerData.player}
 	<div class="flex items-center justify-center p-8">
 		<span class="loading loading-spinner loading-lg"></span>
-		<span class="ml-4">Loading item...</span>
+		<span class="ml-4">{i18n?.t('item.loading', 'Loading item...')}</span>
 	</div>
 {:else}
 	<div class="item-container">

packages/qti2-assessment-player/src/components/RubricDisplay.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { typesetAction } from '@pie-qti/qti2-default-components/shared';
+	import type { I18nProvider } from '@pie-qti/qti2-i18n';
 	import type { RubricBlock } from '../integration/api-contract.js';
 
 	interface Props {
 		blocks: RubricBlock[];
 		collapsed?: boolean;
+		i18n?: I18nProvider;
 		/** Math typesetting function (KaTeX, MathJax, etc.) */
 		typeset?: (root: HTMLElement) => void | Promise<void>;
 	}
 
-	const { blocks, collapsed = false, typeset }: Props = $props();
+	const { blocks, collapsed = false, i18n, typeset }: Props = $props();
 
 	let isCollapsed = $state(false);
 
@@ -38,11 +40,11 @@
 				{#each passages as passage}
 					<div class="passage">
 						<div class="passage-header">
-							<h4 class="font-semibold text-base">Reading Passage</h4>
+							<h4 class="font-semibold text-base">{i18n?.t('assessment.readingPassage', 'Reading Passage')}</h4>
 							<button
 								class="btn btn-ghost btn-sm"
 								onclick={() => toggleCollapse?.()}
-								aria-label={isCollapsed ? 'Expand passage' : 'Collapse passage'}
+								aria-label={isCollapsed ? i18n?.t('assessment.expandPassage', 'Expand passage') : i18n?.t('assessment.collapsePassage', 'Collapse passage')}
 							>
 								{#if isCollapsed}
 									<svg

packages/qti2-assessment-player/src/components/SectionMenu.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { I18nProvider } from '@pie-qti/qti2-i18n';
+
 	interface Section {
 		id: string;
 		title?: string;
@@ -8,11 +10,12 @@
 	interface Props {
 		sections: Section[];
 		currentSectionIndex?: number;
+		i18n?: I18nProvider;
 		onSectionSelect?: (sectionIndex: number) => void;
 		disabled?: boolean;
 	}
 
-	const { sections, currentSectionIndex, onSectionSelect, disabled = false }: Props = $props();
+	const { sections, currentSectionIndex, i18n, onSectionSelect, disabled = false }: Props = $props();
 
 	let isOpen = $state(false);
 
@@ -46,7 +49,7 @@
 					d="M4 6h16M4 12h16M4 18h16"
 				/>
 			</svg>
-			Sections
+			{i18n?.t('assessment.sections.title', 'Sections')}
 		</button>
 
 		{#if isOpen}
@@ -93,14 +96,14 @@
 								</div>
 								<div class="section-info">
 									<div class="section-title">
-										{section.title || `Section ${section.index + 1}`}
+										{section.title || i18n?.t('assessment.sectionDefault', 'Section {number}', { number: section.index + 1 })}
 									</div>
 								</div>
 							</button>
 						{/each}
 					</div>
 				</div>
-				<button class="section-backdrop" onclick={() => toggleMenu?.()} aria-label="Close menu"></button>
+				<button class="section-backdrop" onclick={() => toggleMenu?.()} aria-label={i18n?.t('assessment.closeMenu', 'Close menu')}></button>
 			</div>
 		{/if}
 	</div>

packages/qti2-assessment-player/src/components/SplitPaneResizer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import type { I18nProvider } from '@pie-qti/qti2-i18n';
 	import RubricDisplay from './RubricDisplay.svelte';
 
 	interface Props {
@@ -9,6 +10,7 @@
 		children: any;
 		/** Math typesetting function */
 		typeset?: (root: HTMLElement) => void | Promise<void>;
+		i18n?: I18nProvider;
 		/** Storage key for persisting split position */
 		storageKey?: string;
 		/** Minimum left pane percentage */
@@ -25,6 +27,7 @@
 		leftContent,
 		children,
 		typeset,
+		i18n,
 		storageKey = 'qti22-split-pane.splitLeftPct',
 		minLeftPct = 25,
 		maxLeftPct = 75,
@@ -167,7 +170,7 @@
 		class="splitter"
 		role="separator"
 		aria-orientation="vertical"
-		aria-label="Resize passage and question panels"
+		aria-label={i18n?.t('accessibility.resizer', 'Resize passage and question panels')}
 		aria-valuemin={minLeftPct}
 		aria-valuemax={maxLeftPct}
 		aria-valuenow={Math.round(splitLeftPct)}

packages/qti2-assessment-player/src/components/TestFeedback.svelte

@@ -5,6 +5,7 @@
 	 * Displays assessment-level feedback based on outcome conditions.
 	 * Shows feedback when QTI outcome conditions are met.
 	 */
+	import type { I18nProvider } from '@pie-qti/qti2-i18n';
 
 	interface FeedbackItem {
 		identifier: string;
@@ -21,13 +22,15 @@
 		dismissable?: boolean;
 		/** CSS class for custom styling */
 		class?: string;
+		i18n?: I18nProvider;
 	}
 
 	let {
 		feedback = [],
 		onDismiss,
 		dismissable = false,
-		class: className = ''
+		class: className = '',
+		i18n
 	}: Props = $props();
 
 	// Track dismissed items
@@ -55,7 +58,7 @@
 					<button
 						class="feedback-dismiss"
 						onclick={() => handleDismiss(item.identifier)}
-						aria-label="Dismiss feedback"
+						aria-label={i18n?.t('feedback.closeFeedback', 'Dismiss feedback')}
 					>
 						×
 					</button>

packages/qti2-i18n/src/locales/en-US.ts

@@ -372,6 +372,7 @@ export default {
 
 		inline: {
 			placeholder: '...',
+			selectPlaceholder: 'Select...',
 		},
 	},
 
@@ -406,7 +407,11 @@ export default {
 		question: 'Question {current} of {total}',
 		questionAnnouncement: 'Question {current} of {total}',
 		section: 'Section {current} of {total}',
+		sectionDefault: 'Section {number}',
 		closeMenu: 'Close menu',
+		readingPassage: 'Reading Passage',
+		expandPassage: 'Expand passage',
+		collapsePassage: 'Collapse passage',
 
 		attempts: {
 			remaining: '{count} attempts remaining',

packages/qti2-i18n/src/locales/es-ES.ts

@@ -320,6 +320,7 @@ export default {
 
 		inline: {
 			placeholder: '...',
+			selectPlaceholder: 'Seleccionar...',
 		},
 	},
 
@@ -354,6 +355,10 @@ export default {
 		question: 'Pregunta {current} de {total}',
 		questionAnnouncement: 'Pregunta {current} de {total}',
 		section: 'Sección {current} de {total}',
+		sectionDefault: 'Sección {number}',
+		readingPassage: 'Pasaje de Lectura',
+		expandPassage: 'Expandir pasaje',
+		collapsePassage: 'Contraer pasaje',
 		closeMenu: 'Cerrar menú',
 
 		attempts: {

packages/qti2-i18n/src/locales/fr-FR.ts

@@ -319,6 +319,7 @@ export default {
 
 		inline: {
 			placeholder: '...',
+			selectPlaceholder: 'Sélectionner...',
 		},
 	},
 
@@ -353,6 +354,10 @@ export default {
 		question: 'Question {current} sur {total}',
 		questionAnnouncement: 'Question {current} sur {total}',
 		section: 'Section {current} sur {total}',
+		sectionDefault: 'Section {number}',
+		readingPassage: 'Passage de Lecture',
+		expandPassage: 'Développer le passage',
+		collapsePassage: 'Réduire le passage',
 		closeMenu: 'Fermer le menu',
 
 		attempts: {

packages/qti2-i18n/src/locales/nl-NL.ts

@@ -319,6 +319,7 @@ export default {
 
 		inline: {
 			placeholder: '...',
+			selectPlaceholder: 'Selecteren...',
 		},
 	},
 
@@ -353,6 +354,10 @@ export default {
 		question: 'Vraag {current} van {total}',
 		questionAnnouncement: 'Vraag {current} van {total}',
 		section: 'Sectie {current} van {total}',
+		sectionDefault: 'Sectie {number}',
+		readingPassage: 'Leestekst',
+		expandPassage: 'Tekst uitvouwen',
+		collapsePassage: 'Tekst samenvouwen',
 		closeMenu: 'Menu sluiten',
 
 		attempts: {

packages/qti2-i18n/src/locales/ro-RO.ts

@@ -319,6 +319,7 @@ export default {
 
 		inline: {
 			placeholder: '...',
+			selectPlaceholder: 'Selectare...',
 		},
 	},
 
@@ -353,6 +354,10 @@ export default {
 		question: 'Întrebarea {current} din {total}',
 		questionAnnouncement: 'Întrebarea {current} din {total}',
 		section: 'Secțiunea {current} din {total}',
+		sectionDefault: 'Secțiunea {number}',
+		readingPassage: 'Pasaj de Lectură',
+		expandPassage: 'Extinde pasajul',
+		collapsePassage: 'Restrânge pasajul',
 		closeMenu: 'Închide meniul',
 
 		attempts: {