feat: implement translations for chart sr sections

Author: graphieros

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_sr.keyboard_navigation_vertical'),
+        tableAvailable: $t('package.trends.chart_sr.table_available'),
+        tableCaption: $t('package.trends.chart_sr.table_caption')
+      }
+    },
     userOptions: {
       buttons: {
         tooltip: false,

app/components/Package/TrendsChart.vue

@@ -1388,6 +1388,13 @@ watch(
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : ('' as VueDataUiTheme),
+    a11y: {
+      translations: {
+        keyboardNavigation: $t('package.trends.chart_sr.keyboard_navigation_horizontal'),
+        tableAvailable: $t('package.trends.chart_sr.table_available'),
+        tableCaption: $t('package.trends.chart_sr.table_caption')
+      }
+    },
     chart: {
       height: chartHeight.value,
       backgroundColor: colors.value.bg,

app/components/Package/VersionDistribution.vue

@@ -161,6 +161,13 @@ const hasMinimap = computed<boolean>(() => {
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t('package.trends.chart_sr.keyboard_navigation_horizontal'),
+        tableAvailable: $t('package.trends.chart_sr.table_available'),
+        tableCaption: $t('package.trends.chart_sr.table_caption')
+      }
+    },
     chart: {
       title: {
         text: dateRangeLabel.value,

app/components/Package/WeeklyDownloadStats.vue

@@ -313,6 +313,13 @@ function layEgg() {
 
 const config = computed<VueUiSparklineConfig>(() => {
   return {
+    a11y: {
+      translations: {
+        keyboardNavigation: $t('package.trends.chart_sr.keyboard_navigation_horizontal'),
+        tableAvailable: $t('package.trends.chart_sr.table_available'),
+        tableCaption: $t('package.trends.chart_sr.table_caption')
+      }
+    },
     theme: 'dark',
     /**
      * The built-in skeleton loader kicks in when the component is mounted but the data is not yet ready.