feat: update charts with keyboard navigation & hints

Author: graphieros

app/components/Compare/FacetBarChart.vue

@@ -272,6 +272,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 +355,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

@@ -1878,6 +1878,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 +2137,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

@@ -447,6 +447,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 +671,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

@@ -416,6 +416,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('compare.packages.line_chart_nav_hint') }}
+                </p>
+              </template>
+
               <template #skeleton>
                 <!-- This empty div overrides the default built-in scanning animation on load -->
                 <div />
@@ -493,6 +500,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>