Merge branch 'vue-data-ui-a11y-updates' of https://github.com/npmx-dev/npmx.dev into vue-data-ui-a11y-updates

Author: graphieros

app/components/Compare/FacetBarChart.vue

@@ -117,8 +117,8 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       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')
-      }
+        tableCaption: $t('package.trends.chart_sr.table_caption'),
+      },
     },
     userOptions: {
       buttons: {
@@ -364,9 +364,9 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
 
 <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;
+  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) {

app/components/Package/TrendsChart.vue

@@ -1392,8 +1392,8 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       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')
-      }
+        tableCaption: $t('package.trends.chart_sr.table_caption'),
+      },
     },
     chart: {
       height: chartHeight.value,
@@ -2146,9 +2146,9 @@ watch(selectedMetric, value => {
 
 <style scoped>
 :deep(.vue-data-ui-component svg:focus-visible) {
-    outline: 1px solid var(--accent-color) !important;
-    border-radius: 0.1rem;
-    outline-offset: 0;
+  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) {

app/components/Package/VersionDistribution.vue

@@ -165,8 +165,8 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       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')
-      }
+        tableCaption: $t('package.trends.chart_sr.table_caption'),
+      },
     },
     chart: {
       title: {
@@ -680,9 +680,9 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 }
 
 :deep(.vue-data-ui-component svg:focus-visible) {
-    outline: 1px solid var(--accent-color) !important;
-    border-radius: 0.1rem;
-    outline-offset: 0 !important;
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0 !important;
 }
 
 :deep(.vue-ui-user-options-button:focus-visible),

app/components/Package/WeeklyDownloadStats.vue

@@ -317,8 +317,8 @@ const config = computed<VueUiSparklineConfig>(() => {
       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')
-      }
+        tableCaption: $t('package.trends.chart_sr.table_caption'),
+      },
     },
     theme: 'dark',
     /**
@@ -509,9 +509,9 @@ const config = computed<VueUiSparklineConfig>(() => {
 }
 
 :deep(.vue-data-ui-component svg:focus-visible) {
-    outline: 0.1rem solid var(--accent-color) !important;
-    border-radius: 0.1rem;
-    outline-offset: 3px;
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px;
 }
 </style>