feat: charts a11y improvements

app/components/Compare/FacetBarChart.vue

@@ -113,6 +113,13 @@ function buildExportFilename(extension: string): string {
 const config = computed<VueUiHorizontalBarConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t('package.trends.chart_assistive_text.keyboard_navigation_vertical'),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     userOptions: {
       buttons: {
         tooltip: false,
@@ -272,6 +279,12 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   <div class="font-mono facet-bar">
     <ClientOnly v-if="dataset.length">
       <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+        <template #hint="{ isVisible }">
+          <p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
+            {{ $t('compare.packages.bar_chart_nav_hint') }}
+          </p>
+        </template>
+
         <template #pattern="{ patternId, seriesIndex }">
           <ChartPatternSlot
             v-if="seriesIndex != 0"
@@ -349,6 +362,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   </div>
 </template>
 
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px !important;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
+</style>
+
 <style>
 .facet-bar .atom-subtitle {
   width: 80% !important;

app/components/Package/TrendsChart.vue

@@ -1388,6 +1388,15 @@ watch(
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : ('' as VueDataUiTheme),
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     chart: {
       height: chartHeight.value,
       backgroundColor: colors.value.bg,
@@ -1878,6 +1887,13 @@ watch(selectedMetric, value => {
             @zoomEnd="setIsZoom"
             @zoomReset="isZoomed = false"
           >
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
               <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
@@ -2130,6 +2146,19 @@ watch(selectedMetric, value => {
   </div>
 </template>
 
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
+</style>
+
 <style>
 .vue-ui-pen-and-paper-actions {
   background: var(--bg-elevated) !important;

app/components/Package/VersionDistribution.vue

@@ -161,6 +161,15 @@ const hasMinimap = computed<boolean>(() => {
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     chart: {
       title: {
         text: dateRangeLabel.value,
@@ -447,6 +456,13 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       <ClientOnly v-if="xyDataset.length > 0 && !error">
         <div class="chart-container w-full" :key="groupingMode">
           <VueUiXy :dataset="xyDataset" :config="chartConfig" class="[direction:ltr]">
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
               <!-- Inject legend during SVG print only -->
@@ -664,6 +680,18 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 :deep(.vue-ui-xy) svg rect {
   transition: none !important;
 }
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0 !important;
+}
+
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
 </style>
 
 <style>

app/components/Package/WeeklyDownloadStats.vue

@@ -313,6 +313,15 @@ function layEgg() {
 
 const config = computed<VueUiSparklineConfig>(() => {
   return {
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     theme: 'dark',
     /**
      * The built-in skeleton loader kicks in when the component is mounted but the data is not yet ready.
@@ -416,6 +425,13 @@ const config = computed<VueUiSparklineConfig>(() => {
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
             <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p v-if="isVisible" class="text-accent text-xs text-center mt-2" aria-hidden="true">
+                  {{ $t('package.downloads.sparkline_nav_hint') }}
+                </p>
+              </template>
+
               <template #skeleton>
                 <!-- This empty div overrides the default built-in scanning animation on load -->
                 <div />
@@ -493,6 +509,12 @@ const config = computed<VueUiSparklineConfig>(() => {
 .opacity-leave-from {
   opacity: 1;
 }
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px;
+}
 </style>
 
 <style>

i18n/locales/en.json

@@ -482,6 +482,12 @@
       "maintainer_template": "{avatar} {char126}{name}"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "Use the left and right arrow keys to cycle through data points.",
+        "keyboard_navigation_vertical": "Use the up and down arrow keys to cycle through data points.",
+        "table_available": "A data table for this chart is available below.",
+        "table_caption": "Chart data table"
+      },
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
@@ -540,7 +546,8 @@
     "downloads": {
       "title": "Weekly Downloads",
       "community_distribution": "View community adoption distribution",
-      "subtitle": "Across all versions"
+      "subtitle": "Across all versions",
+      "sparkline_nav_hint": "Use ← →"
     },
     "install_scripts": {
       "title": "Install Scripts",
@@ -1105,7 +1112,9 @@
       "empty_title": "Select packages to compare",
       "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics.",
       "table_view": "Table",
-      "charts_view": "Charts"
+      "charts_view": "Charts",
+      "bar_chart_nav_hint": "Use ↑ ↓",
+      "line_chart_nav_hint": "Use ← →"
     },
     "selector": {
       "search_label": "Search for packages",

i18n/locales/fr-FR.json

@@ -449,6 +449,12 @@
       "show_less": "(afficher moins)"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "Utilisez les touches fléchées gauche et droite pour parcourir les points de données.",
+        "keyboard_navigation_vertical": "Utilisez les touches fléchées haut et bas pour parcourir les points de données.",
+        "table_available": "Un tableau de données pour ce graphique est disponible ci-dessous.",
+        "table_caption": "Tableau de données du graphique"
+      },
       "granularity": "Granularité",
       "granularity_daily": "Par Jour",
       "granularity_weekly": "Par Semaine",
@@ -506,7 +512,8 @@
     "downloads": {
       "title": "Téléchargements hebdo.",
       "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
-      "subtitle": "Toutes versions confondues"
+      "subtitle": "Toutes versions confondues",
+      "sparkline_nav_hint": "Utilisez ← →"
     },
     "install_scripts": {
       "title": "Scripts d'installation",
@@ -1058,7 +1065,11 @@
       "loading": "Chargement des données des paquets...",
       "error": "Échec du chargement des données. Veuillez réessayer.",
       "empty_title": "Sélectionnez des paquets à comparer",
-      "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs facettes."
+      "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs facettes.",
+      "table_view": "Tableau",
+      "charts_view": "Graphiques",
+      "bar_chart_nav_hint": "Utilisez ↑ ↓",
+      "line_chart_nav_hint": "Utilisez ← →"
     },
     "selector": {
       "search_label": "Rechercher des paquets",

i18n/schema.json

@@ -1450,6 +1450,24 @@
         "trends": {
           "type": "object",
           "properties": {
+            "chart_assistive_text": {
+              "type": "object",
+              "properties": {
+                "keyboard_navigation_horizontal": {
+                  "type": "string"
+                },
+                "keyboard_navigation_vertical": {
+                  "type": "string"
+                },
+                "table_available": {
+                  "type": "string"
+                },
+                "table_caption": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            },
             "granularity": {
               "type": "string"
             },
@@ -1626,6 +1644,9 @@
             },
             "subtitle": {
               "type": "string"
+            },
+            "sparkline_nav_hint": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -3321,6 +3342,12 @@
             },
             "charts_view": {
               "type": "string"
+            },
+            "bar_chart_nav_hint": {
+              "type": "string"
+            },
+            "line_chart_nav_hint": {
+              "type": "string"
             }
           },
           "additionalProperties": false

package.json

@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.12",
     "vue": "3.5.30",
-    "vue-data-ui": "3.15.12"
+    "vue-data-ui": "3.16.0"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.2.0",