Merge pull request #21 from pie-framework/develop

fixed more i18n labels, improved detection, fixes for transform app

Author: chillenious

.github/workflows/ci.yml

@@ -66,6 +66,24 @@ jobs:
           cd packages/qti2-i18n
           bun run check-translations
 
+  hardcoded-strings:
+    name: Hardcoded String Scan (Informational)
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.5
+
+      - name: Scan for hardcoded strings
+        run: |
+          cd packages/qti2-i18n
+          bun run scan-hardcoded
+
   test-unit:
     name: Unit Tests
     runs-on: ubuntu-latest

packages/qti2-default-components/src/plugins/associate/AssociateInteraction.svelte

@@ -129,7 +129,7 @@
 
 	<!-- Display current pairs -->
 	{#if pairs.length > 0}
-		<div part="pairs-title" class="divider">Current Associations</div>
+		<div part="pairs-title" class="divider">{i18n?.t('interactions.associate.currentAssociations') ?? 'Current Associations'}</div>
 		<div part="pairs" class="qti-associate-pairs space-y-2">
 			{#each pairs as pair, index}
 				{@const [id1, id2] = pair.split(' ')}

packages/qti2-default-components/src/plugins/choice/ChoiceInteraction.svelte

@@ -63,7 +63,7 @@
 
 <div bind:this={rootElement} part="root" class="qti-choice-interaction space-y-2" use:typesetAction={{ typeset }}>
 	{#if !parsedInteraction}
-		<div class="alert alert-error">{t('common.errorNoData', 'No interaction data provided')}</div>
+		<div class="alert alert-error">{i18n?.t('common.errorNoData') ?? 'No interaction data provided'}</div>
 	{:else if parsedInteraction.maxChoices === 1}
 		<!-- Single choice (radio buttons) -->
 		{#each parsedInteraction.choices as choice}

packages/qti2-default-components/src/plugins/end-attempt/EndAttemptInteraction.svelte

@@ -81,7 +81,7 @@
 						d="M5 13l4 4L19 7"
 					/>
 				</svg>
-				{parsedInteraction.countAttempt ? 'Attempt Ended' : 'Requested'}
+				{parsedInteraction.countAttempt ? (i18n?.t('interactions.endAttempt.ended') ?? 'Attempt Ended') : (i18n?.t('interactions.endAttempt.requested') ?? 'Requested')}
 			{:else}
 				<svg
 					xmlns="http://www.w3.org/2000/svg"

packages/qti2-default-components/src/plugins/gap-match/GapMatchInteraction.svelte

@@ -209,7 +209,7 @@
 			part="palette"
 			class="qti-gm-palette flex flex-wrap gap-2 p-4 bg-base-200 rounded-lg border-2 border-base-300"
 			role="group"
-			aria-label="Available words to place"
+			aria-label={i18n?.t('interactions.gapMatch.availableLabel') ?? 'Available words to place'}
 		>
 			<div class="qti-gm-palette-title w-full text-sm text-base-content/70 font-semibold mb-2">
 				Available words:
@@ -241,7 +241,7 @@
 							class="btn btn-sm btn-circle btn-error"
 							onclick={() => clearWord(gapText.identifier)}
 							aria-label="Remove {gapText.text} from the blanks"
-							title="Remove word"
+							title={i18n?.t('interactions.gapMatch.removeWord') ?? 'Remove word'}
 						>
 							✕
 						</button>

packages/qti2-default-components/src/plugins/graphic-associate/GraphicAssociateInteraction.svelte

@@ -153,7 +153,7 @@
 							<img
 								bind:this={imageElement}
 								src={parsedInteraction.imageData.src}
-								alt="Association diagram"
+								alt={i18n?.t('interactions.associate.altText') ?? 'Association diagram'}
 								class="w-full h-full object-contain"
 							/>
 						{/if}
@@ -288,7 +288,7 @@
 											<button
 												class="btn btn-xs btn-ghost btn-circle"
 												onclick={() => removePair(index)}
-												aria-label="Remove association"
+												aria-label={i18n?.t('interactions.associate.removeAssociation') ?? 'Remove association'}
 											>
 												<svg
 													xmlns="http://www.w3.org/2000/svg"

packages/qti2-default-components/src/plugins/graphic-gap-match/GraphicGapMatchInteraction.svelte

@@ -262,7 +262,7 @@ function parseCoords(hotspot: { identifier: string; shape: string; coords: strin
 				part="labels"
 				class="qti-ggm-labels flex flex-wrap gap-2 p-4 bg-base-200 rounded-lg border-2 border-base-300"
 				role="group"
-				aria-label="Available labels to place"
+				aria-label={i18n?.t('interactions.graphicGapMatch.availableLabel') ?? 'Available labels to place'}
 			>
 				<div class="qti-ggm-labels-title w-full text-sm text-base-content/70 font-semibold mb-2">
 					Available Labels:
@@ -303,7 +303,7 @@ function parseCoords(hotspot: { identifier: string; shape: string; coords: strin
 								class="btn btn-sm btn-circle btn-error"
 								onclick={() => clearMatch(gapText.identifier)}
 								aria-label="Remove {gapText.text} from hotspot"
-								title="Remove label"
+								title={i18n?.t('interactions.graphicGapMatch.removeLabel') ?? 'Remove label'}
 							>
 								✕
 							</button>

packages/qti2-default-components/src/plugins/graphic-order/GraphicOrderInteraction.svelte

@@ -121,7 +121,7 @@
 							<img
 								bind:this={imageElement}
 								src={parsedInteraction.imageData.src}
-								alt="Ordering diagram"
+								alt={i18n?.t('interactions.graphicOrder.altText') ?? 'Ordering diagram'}
 								class="w-full h-auto"
 								style="width: {parsedInteraction.imageData.width}px; height: {parsedInteraction.imageData
 									.height}px;"
@@ -135,7 +135,7 @@
 			<div part="panel" class="qti-go-panel w-full">
 				<div class="qti-go-card card bg-base-100 border border-base-300">
 					<div class="qti-go-card-body card-body p-4">
-						<h3 part="panel-title" class="qti-go-title card-title text-sm">Order (drag to reorder)</h3>
+						<h3 part="panel-title" class="qti-go-title card-title text-sm">{i18n?.t('interactions.graphicOrder.orderHeading') ?? 'Order (drag to reorder)'}</h3>
 						<SortableList
 							items={parsedInteraction.hotspotChoices.map(c => ({ id: c.identifier, text: c.label }))}
 							{orderedIds}

packages/qti2-default-components/src/plugins/hotspot/HotspotInteraction.svelte

@@ -86,7 +86,7 @@
 					{:else}
 						<img
 							src={parsedInteraction.imageData.src}
-							alt="Hotspot interaction"
+							alt={i18n?.t('interactions.hotspot.altText') ?? 'Hotspot interaction'}
 							part="image"
 							class="qti-hotspot-image"
 						/>

packages/qti2-default-components/src/plugins/hottext/HottextInteraction.svelte

@@ -184,7 +184,7 @@
 			part="content"
 			class="hottext-content qti-hottext-content prose max-w-none"
 			role="group"
-			aria-label="Text selection interaction"
+			aria-label={i18n?.t('interactions.hottext.ariaLabel') ?? 'Text selection interaction'}
 		>
 			{@html parsedInteraction.contentHtml}
 		</div>