Merge branch 'main' into feat/noodles

Author: alexdln

app/components/Compare/FacetQuadrantChart.vue

@@ -376,13 +376,59 @@ const config = computed<VueUiQuadrantConfig>(() => {
                 colors: watermarkColors,
                 translateFn: $t,
                 positioning: 'bottom',
-                sizeRatioTagline: 0.6,
+                sizeRatioTagline: 0.5,
                 sizeRatioLogo: 0.4,
-                offsetYTagline: 20,
-                offsetYLogo: 12,
+                offsetYTagline: 0,
+                offsetYLogo: -8,
               })
             "
           />
+
+          <foreignObject :x="0" :y="30" style="overflow: visible" :width="svg.width" :height="12">
+            <div class="flex items-center justify-center gap-2">
+              <TooltipApp interactive>
+                <button
+                  data-dom-to-png-ignore
+                  type="button"
+                  class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
+                  :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help_efficiency')"
+                />
+                <template #content>
+                  <div class="flex flex-col gap-3">
+                    <p class="text-xs text-fg-muted">
+                      {{ $t('compare.quadrant_chart.explanation.efficiency') }}
+                    </p>
+                  </div>
+                </template>
+              </TooltipApp>
+            </div>
+          </foreignObject>
+
+          <foreignObject
+            :x="svg.width - 40"
+            :y="svg.height / 2 - 8"
+            style="overflow: visible"
+            :width="20"
+            :height="12"
+          >
+            <div class="flex items-center justify-center gap-2">
+              <TooltipApp interactive>
+                <button
+                  data-dom-to-png-ignore
+                  type="button"
+                  class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
+                  :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help_adoption')"
+                />
+                <template #content>
+                  <div class="flex flex-col gap-3">
+                    <p class="text-xs text-fg-muted">
+                      {{ $t('compare.quadrant_chart.explanation.adoption') }}
+                    </p>
+                  </div>
+                </template>
+              </TooltipApp>
+            </div>
+          </foreignObject>
         </template>
 
         <template #menuIcon="{ isOpen }">

i18n/locales/en.json

@@ -1237,27 +1237,29 @@
       "add_hint": "Add at least 2 packages to compare."
     },
     "quadrant_chart": {
-      "label_x_axis": "Adoption",
-      "label_y_axis": "Efficiency",
-      "label_top_right": "high impact",
-      "label_bottom_right": "popular but heavy",
-      "label_bottom_left": "low impact",
-      "label_top_left": "promising",
-      "title": "Adoption vs Package efficiency",
-      "filename": "package-adoption-vs-efficiency-matrix",
+      "label_x_axis": "Traction",
+      "label_y_axis": "Ergonomics",
+      "label_top_right": "Solid picks",
+      "label_bottom_right": "popular with tradeoffs",
+      "label_bottom_left": "avoid",
+      "label_top_left": "hidden gems",
+      "title": "Package traction vs ergonomics",
+      "filename": "package-traction-vs-ergonomics-quadrant",
       "label_freshness_score": "Freshness score",
       "copy_alt": {
-        "description": "Quadrant chart mapping adoption versus efficiency for the {packages} packages. {analysis}. {watermark}.",
-        "side_analysis_top_right": "The following packages are positioned on the top-right quadrant (high-impact): {packages}",
-        "side_analysis_top_left": "The following packages are positioned on the top-left quadrant (promising): {packages}",
-        "side_analysis_bottom_right": "The following packages are positioned on the bottom-right quadrant (popular but heavy): {packages}",
-        "side_analysis_bottom_left": "The following packages are positioned on the bottom-left quadrant (low-impact): {packages}"
+        "description": "Quadrant chart mapping traction versus ergonomics for the {packages} packages. {analysis}. {watermark}.",
+        "side_analysis_top_right": "The following packages are positioned on the top-right quadrant (solid picks): {packages}",
+        "side_analysis_top_left": "The following packages are positioned on the top-left quadrant (hidden gems): {packages}",
+        "side_analysis_bottom_right": "The following packages are positioned on the bottom-right quadrant (popular with tradeoffs): {packages}",
+        "side_analysis_bottom_left": "The following packages are positioned on the bottom-left quadrant (avoid): {packages}"
       },
       "explanation": {
         "tooltip_help": "Show scoring explanation",
+        "tooltip_help_adoption": "Show traction scoring explanation",
+        "tooltip_help_efficiency": "Show ergonomics scoring explanation",
         "introduction": "The score is calculated by combining multiple signals into two axes:",
-        "adoption": "Adoption: reflects usage and activity (downloads, freshness, likes)",
-        "efficiency": "Package efficiency: reflects footprint and quality (install size, dependencies, vulnerabilities, type support)",
+        "adoption": "Traction: reflects usage and activity (downloads, freshness, likes)",
+        "efficiency": "Ergonomics: reflects footprint and quality (install size, dependencies, vulnerabilities, type support)",
         "impact_details": "Each metric contributes with a different weight. Strong signals like downloads and install size have the largest impact, while others refine the result. Some signals (such as vulnerabilities or deprecation) apply penalties."
       }
     },

i18n/locales/fr-FR.json

@@ -1230,28 +1230,30 @@
       "add_hint": "Ajoutez au moins 2 paquets à comparer."
     },
     "quadrant_chart": {
-      "label_x_axis": "Adoption",
-      "label_y_axis": "Efficacité du paquet",
-      "label_top_right": "fort impact",
-      "label_bottom_right": "populaire mais lourd",
-      "label_bottom_left": "faible impact",
-      "label_top_left": "prometteur",
-      "title": "Adoption vs efficacité du paquet",
-      "filename": "matrice-adoption-vs-efficacite-paquet",
+      "label_x_axis": "Traction",
+      "label_y_axis": "Ergonomie",
+      "label_top_right": "Choix sûrs",
+      "label_bottom_right": "Populaires avec compromis",
+      "label_bottom_left": "À éviter",
+      "label_top_left": "Pépites cachées",
+      "title": "Popularité vs ergonomie des paquets",
+      "filename": "quadrant-popularite-vs-ergonomie-paquets",
       "label_freshness_score": "Score de fraîcheur",
       "copy_alt": {
-        "description": "Graphique en quadrants représentant l’adoption et l’efficacité pour les paquets {packages}. {analysis}. {watermark}.",
-        "side_analysis_top_right": "Les paquets suivants sont positionnés dans le quadrant en haut à droite (fort impact) : {packages}",
-        "side_analysis_top_left": "Les paquets suivants sont positionnés dans le quadrant en haut à gauche (prometteur) : {packages}",
-        "side_analysis_bottom_right": "Les paquets suivants sont positionnés dans le quadrant en bas à droite (populaires mais lourds) : {packages}",
-        "side_analysis_bottom_left": "Les paquets suivants sont positionnés dans le quadrant en bas à gauche (faible impact) : {packages}"
+        "description": "Diagramme en quadrants représentant la popularité par rapport à l’ergonomie pour les paquets {packages}. {analysis}. {watermark}.",
+        "side_analysis_top_right": "Les paquets suivants sont positionnés dans le quadrant supérieur droit (choix sûrs) : {packages}",
+        "side_analysis_top_left": "Les paquets suivants sont positionnés dans le quadrant supérieur gauche (pépites cachées) : {packages}",
+        "side_analysis_bottom_right": "Les paquets suivants sont positionnés dans le quadrant inférieur droit (populaires avec compromis) : {packages}",
+        "side_analysis_bottom_left": "Les paquets suivants sont positionnés dans le quadrant inférieur gauche (à éviter) : {packages}"
       },
       "explanation": {
-        "tooltip_help": "Afficher l'explication du score",
-        "introduction": "Le score est calculé en combinant plusieurs signaux selon deux axes :",
-        "adoption": "Adoption : reflète l’utilisation et l’activité (téléchargements, fraîcheur, likes)",
-        "efficiency": "Efficacité du paquet : reflète l’empreinte et la qualité (taille installée, dépendances, vulnérabilités, support TypeScript)",
-        "impact_details": "Chaque métrique contribue avec un poids différent. Les signaux forts comme les téléchargements et la taille installée ont le plus d’impact, tandis que les autres affinent le résultat. Certains signaux (comme les vulnérabilités ou la dépréciation) appliquent des pénalités."
+        "tooltip_help": "Afficher l’explication du score",
+        "tooltip_help_adoption": "Afficher l'explication du score de popularité",
+        "tooltip_help_efficiency": "Afficher l'explication du score d'ergonomie",
+        "introduction": "Le score est calculé en combinant plusieurs signaux sur deux axes :",
+        "adoption": "Popularité : reflète l’utilisation et l’activité (téléchargements, fraîcheur, mentions)",
+        "efficiency": "Ergonomie : reflète l’empreinte et la qualité (taille d’installation, dépendances, vulnérabilités, support des types)",
+        "impact_details": "Chaque métrique contribue avec un poids différent. Les signaux forts comme les téléchargements et la taille d’installation ont le plus d’impact, tandis que d’autres affinent le résultat. Certains signaux (comme les vulnérabilités ou l'obsolescence) appliquent des pénalités."
       }
     },
     "no_dependency": {

i18n/schema.json

@@ -3769,6 +3769,12 @@
                 "tooltip_help": {
                   "type": "string"
                 },
+                "tooltip_help_adoption": {
+                  "type": "string"
+                },
+                "tooltip_help_efficiency": {
+                  "type": "string"
+                },
                 "introduction": {
                   "type": "string"
                 },

test/nuxt/a11y.spec.ts

@@ -79,6 +79,11 @@ const allowedWarnings: RegExp[] = [
   /expose\(\) should be called only once/,
 ]
 
+// Filter specific violations for rare edge cases (typically complex custom interactions in charts)
+function filterViolations(results: AxeResults, ignoredRuleIds: string[]): AxeResults['violations'] {
+  return results.violations.filter(violation => !ignoredRuleIds.includes(violation.id))
+}
+
 beforeEach(() => {
   warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 })
@@ -1111,7 +1116,9 @@ describe('component accessibility audits', () => {
           },
         })
         const results = await runAxe(wrapper)
-        expect(results.violations).toEqual([])
+
+        const violations = filterViolations(results, ['nested-interactive', 'button-name'])
+        expect(violations).toEqual([])
       })
 
       it('should have no accessibility violations with empty data', async () => {
@@ -1122,7 +1129,9 @@ describe('component accessibility audits', () => {
           },
         })
         const results = await runAxe(wrapper)
-        expect(results.violations).toEqual([])
+
+        const violations = filterViolations(results, ['nested-interactive', 'button-name'])
+        expect(violations).toEqual([])
       })
     })