npm - @jjlmoya/utils-forensic-science - Versions diffs - 1.6.0 → 1.8.0 - Mend

@jjlmoya/utils-forensic-science 1.6.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/package.json CHANGED Viewed

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-forensic-science",
-    "version": "1.6.0",
+    "version": "1.8.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "exports": {
         ".": "./src/index.ts",
         "./data": "./src/data.ts",
-        "./entries": "./src/entries.ts"
+        "./entries": "./src/entries.ts",
+        "./runtime/*": "./src/tool/*/index.ts",
+        "./category-seo": "./src/category/seo.astro"
     },
     "files": [
         "src",

package/src/category/index.ts CHANGED Viewed

@@ -1,19 +1,19 @@
 import type { ScienceCategoryEntry } from '../types';
-import { forensicAgeEstimator } from '../tool/forensic-age-estimator/index';
-import { widmarkAlcoholSimulator } from '../tool/widmark-alcohol-simulator/index';
-import { forensicSexDeterminator } from '../tool/forensic-sex-determinator/index';
-import { forensicStatureEstimator } from '../tool/forensic-stature-estimator/index';
-import { forensicBloodTestSimulator } from '../tool/forensic-blood-test-simulator/index';
-import { forensicImageAuthenticityAnalyzer } from '../tool/forensic-image-authenticity-analyzer/index';
-import { gsrDispersionCalculator } from '../tool/gsr-dispersion-calculator/index';
-import { forensicTlcInkSimulator } from '../tool/forensic-tlc-ink-simulator/index';
-import { forensicMicrocrystalDrugSimulator } from '../tool/forensic-microcrystal-drug-simulator/index';
-import { forensicGlassBeckeLineSimulator } from '../tool/forensic-glass-becke-line-simulator/index';
-import { forensicFiberComparisonMicroscope } from '../tool/forensic-fiber-comparison-microscope/index';
-import { bloodstainPatternOriginAnalyzer } from '../tool/bloodstain-pattern-origin-analyzer/index';
-import { forensicFingerprintMinutiaeIdentifier } from '../tool/forensic-fingerprint-minutiae-identifier/index';
-import { firePatternOriginAnalyzer } from '../tool/fire-pattern-origin-analyzer/index';
-import { forensicToolmarkStriationMatcher } from '../tool/forensic-toolmark-striation-matcher/index';
+import { forensicAgeEstimator } from '../tool/forensic-age-estimator/entry';
+import { widmarkAlcoholSimulator } from '../tool/widmark-alcohol-simulator/entry';
+import { forensicSexDeterminator } from '../tool/forensic-sex-determinator/entry';
+import { forensicStatureEstimator } from '../tool/forensic-stature-estimator/entry';
+import { forensicBloodTestSimulator } from '../tool/forensic-blood-test-simulator/entry';
+import { forensicImageAuthenticityAnalyzer } from '../tool/forensic-image-authenticity-analyzer/entry';
+import { gsrDispersionCalculator } from '../tool/gsr-dispersion-calculator/entry';
+import { forensicTlcInkSimulator } from '../tool/forensic-tlc-ink-simulator/entry';
+import { forensicMicrocrystalDrugSimulator } from '../tool/forensic-microcrystal-drug-simulator/entry';
+import { forensicGlassBeckeLineSimulator } from '../tool/forensic-glass-becke-line-simulator/entry';
+import { forensicFiberComparisonMicroscope } from '../tool/forensic-fiber-comparison-microscope/entry';
+import { bloodstainPatternOriginAnalyzer } from '../tool/bloodstain-pattern-origin-analyzer/entry';
+import { forensicFingerprintMinutiaeIdentifier } from '../tool/forensic-fingerprint-minutiae-identifier/entry';
+import { firePatternOriginAnalyzer } from '../tool/fire-pattern-origin-analyzer/entry';
+import { forensicToolmarkStriationMatcher } from '../tool/forensic-toolmark-striation-matcher/entry';
 export const forensicCategory: ScienceCategoryEntry = {
   icon: 'mdi:fingerprint',

package/src/layouts/PreviewLayout.astro CHANGED Viewed

@@ -10,7 +10,12 @@ interface Props {
   hasSidebar?: boolean;
 }
-const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Astro.props;
+const {
+  title,
+  currentLocale = "es",
+  localeUrls = {},
+  hasSidebar = false,
+} = Astro.props;
 ---
 <!doctype html>
@@ -78,6 +83,7 @@ const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Ast
     transition:
       background-color 0.3s ease,
       color 0.3s ease;
+    font-family: Inter, sans-serif;
   }
   main {
@@ -114,4 +120,3 @@ const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Ast
     }
   }
 </style>

package/src/tests/pagespeed_best_practices.test.ts ADDED Viewed

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tool/bloodstain-pattern-origin-analyzer/component.astro CHANGED Viewed

@@ -111,7 +111,7 @@ const { ui } = Astro.props;
   import { analyzeBloodstains } from './logic';
   import type { BloodstainInput, OriginEstimate } from './logic';
-  const ui = JSON.parse(document.getElementById('bpa-ui')?.textContent || '{}');
+  const ui = JSON.parse((document.getElementById('bpa-ui') as HTMLElement | null)?.innerText || '{}');
   const surface = document.getElementById('bpa-surface') as HTMLCanvasElement | null;
   const rows = document.getElementById('bpa-rows');
   const threeHost = document.getElementById('bpa-three');
@@ -182,31 +182,6 @@ const { ui } = Astro.props;
     return stains.find((stain) => stain.id === selectedStainId) ?? stains[0];
   }
-  function configureFocusRanges() {
-    if (!focusWidthEl || !focusLengthEl) return;
-    focusWidthEl.min = cmToInput(0.2).toString();
-    focusWidthEl.max = cmToInput(3).toString();
-    focusWidthEl.step = unit === 'metric' ? '0.1' : '0.05';
-    focusLengthEl.min = cmToInput(0.5).toString();
-    focusLengthEl.max = cmToInput(6).toString();
-    focusLengthEl.step = unit === 'metric' ? '0.1' : '0.05';
-  }
-  function syncFocusPanel() {
-    const stain = selectedStain();
-    if (!stain) return;
-    const color = palette[selectedIndex() % palette.length];
-    if (focusNameEl) focusNameEl.textContent = `${ui.stainLabel} ${stain.id}`;
-    if (focusSwatchEl) focusSwatchEl.style.background = color;
-    configureFocusRanges();
-    if (focusWidthEl) focusWidthEl.value = cmToInput(stain.widthCm).toString();
-    if (focusLengthEl) focusLengthEl.value = cmToInput(stain.lengthCm).toString();
-    if (focusRotationEl) focusRotationEl.value = stain.rotationDeg.toString();
-    if (focusWidthValueEl) focusWidthValueEl.textContent = display(stain.widthCm);
-    if (focusLengthValueEl) focusLengthValueEl.textContent = display(stain.lengthCm);
-    if (focusRotationValueEl) focusRotationValueEl.textContent = `${stain.rotationDeg.toFixed(0)} ${ui.degree}`;
-  }
   function canvasMetrics() {
     if (!surface) return null;
     const rect = surface.getBoundingClientRect();
@@ -239,6 +214,39 @@ const { ui } = Astro.props;
     };
   }
+  function resizeThree() {
+    if (!threeHost) return;
+    const rect = threeHost.getBoundingClientRect();
+    renderer.setSize(rect.width, rect.height, false);
+    camera.aspect = rect.width / Math.max(rect.height, 1);
+    camera.updateProjectionMatrix();
+  }
+  function configureFocusRanges() {
+    if (!focusWidthEl || !focusLengthEl) return;
+    focusWidthEl.min = cmToInput(0.2).toString();
+    focusWidthEl.max = cmToInput(3).toString();
+    focusWidthEl.step = unit === 'metric' ? '0.1' : '0.05';
+    focusLengthEl.min = cmToInput(0.5).toString();
+    focusLengthEl.max = cmToInput(6).toString();
+    focusLengthEl.step = unit === 'metric' ? '0.1' : '0.05';
+  }
+  function syncFocusPanel() {
+    const stain = selectedStain();
+    if (!stain) return;
+    const color = palette[selectedIndex() % palette.length];
+    if (focusNameEl) focusNameEl.textContent = `${ui.stainLabel} ${stain.id}`;
+    if (focusSwatchEl) focusSwatchEl.style.background = color;
+    configureFocusRanges();
+    if (focusWidthEl) focusWidthEl.value = cmToInput(stain.widthCm).toString();
+    if (focusLengthEl) focusLengthEl.value = cmToInput(stain.lengthCm).toString();
+    if (focusRotationEl) focusRotationEl.value = stain.rotationDeg.toString();
+    if (focusWidthValueEl) focusWidthValueEl.textContent = display(stain.widthCm);
+    if (focusLengthValueEl) focusLengthValueEl.textContent = display(stain.lengthCm);
+    if (focusRotationValueEl) focusRotationValueEl.textContent = `${stain.rotationDeg.toFixed(0)} ${ui.degree}`;
+  }
   function findStainAt(event: PointerEvent): BloodstainInput | null {
     const pointer = eventToSurface(event);
     if (!pointer) return null;
@@ -274,14 +282,6 @@ const { ui } = Astro.props;
     renderer.setAnimationLoop(() => renderer.render(scene, camera));
   }
-  function resizeThree() {
-    if (!threeHost) return;
-    const rect = threeHost.getBoundingClientRect();
-    renderer.setSize(rect.width, rect.height, false);
-    camera.aspect = rect.width / Math.max(rect.height, 1);
-    camera.updateProjectionMatrix();
-  }
   function clearDynamic3d() {
     for (let index = group.children.length - 1; index >= 0; index--) {
       const child = group.children[index];
@@ -398,11 +398,11 @@ const { ui } = Astro.props;
       const row = document.createElement('tr');
       if (stain.id === selectedStainId) row.className = 'is-selected';
       row.innerHTML = `
-        <td><input data-field="xCm" data-id="${stain.id}" type="number" step="0.5" value="${cmToInput(stain.xCm).toFixed(1)}"></td>
-        <td><input data-field="yCm" data-id="${stain.id}" type="number" step="0.5" value="${cmToInput(stain.yCm).toFixed(1)}"></td>
-        <td><input data-field="widthCm" data-id="${stain.id}" type="number" min="0.1" step="0.1" value="${cmToInput(stain.widthCm).toFixed(1)}"></td>
-        <td><input data-field="lengthCm" data-id="${stain.id}" type="number" min="0.1" step="0.1" value="${cmToInput(stain.lengthCm).toFixed(1)}"></td>
-        <td><input data-field="rotationDeg" data-id="${stain.id}" type="number" step="1" value="${stain.rotationDeg.toFixed(0)}"></td>
+        <td><input aria-label="${ui.x} ${stain.id}" data-field="xCm" data-id="${stain.id}" type="number" step="0.5" value="${cmToInput(stain.xCm).toFixed(1)}"></td>
+        <td><input aria-label="${ui.y} ${stain.id}" data-field="yCm" data-id="${stain.id}" type="number" step="0.5" value="${cmToInput(stain.yCm).toFixed(1)}"></td>
+        <td><input aria-label="${ui.width} ${stain.id}" data-field="widthCm" data-id="${stain.id}" type="number" min="0.1" step="0.1" value="${cmToInput(stain.widthCm).toFixed(1)}"></td>
+        <td><input aria-label="${ui.length} ${stain.id}" data-field="lengthCm" data-id="${stain.id}" type="number" min="0.1" step="0.1" value="${cmToInput(stain.lengthCm).toFixed(1)}"></td>
+        <td><input aria-label="${ui.rotation} ${stain.id}" data-field="rotationDeg" data-id="${stain.id}" type="number" step="1" value="${stain.rotationDeg.toFixed(0)}"></td>
         <td><button type="button" class="bpa-icon-button" data-remove="${stain.id}" aria-label="${ui.remove} ${stain.id}">${deleteIconTemplate?.innerHTML || ui.remove}</button></td>
       `;
       rows.appendChild(row);

package/src/tool/forensic-blood-test-simulator/dom-utils.ts CHANGED Viewed

@@ -12,9 +12,9 @@ export function animateDrop(dropEl: HTMLElement | null, dishEl: HTMLElement | nu
   }
   dropEl.classList.remove('animating');
-  void dropEl.offsetWidth;
-  dropEl.classList.add('animating');
+  requestAnimationFrame(() => {
+    dropEl.classList.add('animating');
+  });
   setTimeout(() => {
     dropEl.classList.remove('animating');

package/src/tool/forensic-fiber-comparison-microscope/component.astro CHANGED Viewed

@@ -24,7 +24,7 @@ const { ui } = Astro.props;
     <aside class="fiber-controls">
       <div class="fiber-field">
         <span>{ui.questionedSample}</span>
-        <select id="fiber-left" class="fiber-native-select" aria-hidden="true" tabindex="-1">
+        <select id="fiber-left" class="fiber-native-select" aria-hidden="true" aria-label={ui.questionedSample} tabindex="-1">
           <option value="questionedCotton">{ui.questionedCotton}</option>
         </select>
         <div class="fiber-builder-head">
@@ -73,7 +73,7 @@ const { ui } = Astro.props;
       <div class="fiber-field">
         <span>{ui.knownSample}</span>
-        <select id="fiber-right" class="fiber-native-select" aria-hidden="true" tabindex="-1">
+        <select id="fiber-right" class="fiber-native-select" aria-hidden="true" aria-label={ui.knownSample} tabindex="-1">
           <option value="suspectCotton">{ui.suspectCotton}</option>
           <option value="wool">{ui.wool}</option>
           <option value="polyester">{ui.polyester}</option>

package/src/tool/forensic-fiber-comparison-microscope/view.ts CHANGED Viewed

@@ -249,8 +249,9 @@ class FiberComparisonView {
     if (!panel) return;
     panel.dataset.verdict = state;
     panel.classList.remove('is-updating');
-    void panel.offsetWidth;
-    panel.classList.add('is-updating');
+    requestAnimationFrame(() => {
+      panel.classList.add('is-updating');
+    });
   }
   private statusKey(verdictKey: Result['verdictKey']): string {

package/src/tool/forensic-fingerprint-minutiae-identifier/component.astro CHANGED Viewed

@@ -190,7 +190,7 @@ const { ui } = Astro.props;
     renderTable,
   } from './renderer';
-  const ui = JSON.parse(document.getElementById('fp-ui')?.textContent || '{}');
+  const ui = JSON.parse((document.getElementById('fp-ui') as HTMLElement | null)?.innerText || '{}');
   const board = document.querySelector<HTMLElement>('[data-fingerprint-tool] .fp-board');
   const canvas = document.getElementById('fp-canvas') as HTMLCanvasElement | null;
   const context = canvas?.getContext('2d') ?? null;
@@ -238,10 +238,12 @@ const { ui } = Astro.props;
     if (!uploadedImage) return 1;
     return Math.max(2, Math.min(4, step));
   }
+  function getCanvasRect(): DOMRect | null { return canvas ? canvas.getBoundingClientRect() : null; }
   function updateMagnifier(): void {
     if (canvas && glass) {
+      const w = canvas.clientWidth, h = canvas.clientHeight;
       glass.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
-      glass.style.backgroundSize = `${canvas.clientWidth * 2.4}px ${canvas.clientHeight * 2.4}px`;
+      glass.style.backgroundSize = `${w * 2.4}px ${h * 2.4}px`;
     }
   }
   function render(): void {
@@ -311,14 +313,16 @@ const { ui } = Astro.props;
   canvas?.addEventListener('click', (event) => {
     if (!uploadedImage) return fileInput?.click();
     if (activeStep !== 3 || !canvas) return;
-    const rect = canvas.getBoundingClientRect();
+    const rect = getCanvasRect();
+    if (!rect) return;
     const canvasX = ((event.clientX - rect.left) / rect.width) * canvas.width;
     const canvasY = ((event.clientY - rect.top) / rect.height) * canvas.height;
     handleCanvasClick(canvasX, canvasY);
   });
   canvas?.addEventListener('mousemove', (event) => {
     if (!glass || !uploadedImage || !canvas) return;
-    const rect = canvas.getBoundingClientRect();
+    const rect = getCanvasRect();
+    if (!rect) return;
     const localX = event.clientX - rect.left;
     const localY = event.clientY - rect.top;
     glass.style.opacity = '1';

package/src/tool/forensic-sex-determinator/component.astro CHANGED Viewed

@@ -103,7 +103,7 @@ const regions = [
                   <div class="forensic-sex-field-body">
                     <div class="forensic-sex-control-side">
                       <div class="forensic-sex-slider-container">
-                        <input type="range" id={`input-${field.id}`} name={field.id} min="0" max="5" value="0" class="forensic-sex-slider" />
+                        <input type="range" id={`input-${field.id}`} name={field.id} min="0" max="5" value="0" class="forensic-sex-slider" aria-label={field.label} />
                         <div class="forensic-sex-slider-labels">
                           <span>Ø</span>
                           <span>1</span>

package/src/tool/forensic-stature-estimator/components/OsteometricSelector.astro CHANGED Viewed

@@ -61,7 +61,7 @@ const ancestries = [
     <label for="input-length-val" id="length-label-text">{ui.lengthLabel} ({ui.unitsCm})</label>
     <div class="length-input-container">
       <input type="number" id="input-length-val" class="selector-number" step="0.1" />
-      <input type="range" id="input-length" class="selector-range" step="0.1" />
+      <input type="range" id="input-length" class="selector-range" step="0.1" aria-label={`${ui.lengthLabel} ${ui.unitsCm}`} />
     </div>
   </div>

package/src/tool/widmark-alcohol-simulator/component.astro CHANGED Viewed

@@ -16,7 +16,7 @@ const { ui } = Astro.props;
     <div class="widmark-field">
       <span>{ui.weight}</span>
-      <input type="number" id="widmark-weight" class="widmark-input" min="30" max="250" value="80" />
+      <input type="number" id="widmark-weight" class="widmark-input" min="30" max="250" value="80" aria-label={ui.weight} />
     </div>
     <div class="widmark-field">
@@ -35,7 +35,7 @@ const { ui } = Astro.props;
     <div class="widmark-field">
       <span>{ui.hydration}</span>
-      <select id="widmark-hydration" class="widmark-select">
+      <select id="widmark-hydration" class="widmark-select" aria-label={ui.hydration}>
         <option value="low">{ui.hydrationLow}</option>
         <option value="normal" selected>{ui.hydrationNormal}</option>
         <option value="high">{ui.hydrationHigh}</option>
@@ -44,7 +44,7 @@ const { ui } = Astro.props;
     <div class="widmark-field">
       <span>{ui.stomachState}</span>
-      <select id="widmark-stomach" class="widmark-select">
+      <select id="widmark-stomach" class="widmark-select" aria-label={ui.stomachState}>
         <option value="empty">{ui.stomachEmpty}</option>
         <option value="light" selected>{ui.stomachLight}</option>
         <option value="full">{ui.stomachFull}</option>
@@ -64,15 +64,15 @@ const { ui } = Astro.props;
     <div class="widmark-drink-form-grid">
       <div class="widmark-field">
         <span>{ui.drinkVolume}</span>
-        <input type="number" id="widmark-drink-vol" class="widmark-input" value="330" min="10" max="2000" />
+        <input type="number" id="widmark-drink-vol" class="widmark-input" value="330" min="10" max="2000" aria-label={ui.drinkVolume} />
       </div>
       <div class="widmark-field">
         <span>{ui.drinkAbv}</span>
-        <input type="number" id="widmark-drink-abv" class="widmark-input" value="5" min="0.1" max="100" step="0.1" />
+        <input type="number" id="widmark-drink-abv" class="widmark-input" value="5" min="0.1" max="100" step="0.1" aria-label={ui.drinkAbv} />
       </div>
       <div class="widmark-field">
         <span>{ui.drinkTime}</span>
-        <input type="number" id="widmark-drink-time" class="widmark-input" value="0" min="0" max="11.9" step="0.1" />
+        <input type="number" id="widmark-drink-time" class="widmark-input" value="0" min="0" max="11.9" step="0.1" aria-label={ui.drinkTime} />
       </div>
       <button type="button" id="widmark-add-drink" class="widmark-btn-primary">
         <span>{ui.addDrink}</span>