Skip to content

Commit 1c88403

Browse files
graphierosgraphieros
committed
fix: add missing e11y
1 parent 1e420ee commit 1c88403

1 file changed

Lines changed: 117 additions & 106 deletions

File tree

‎app/components/Package/DownloadAnalytics.vue‎

Lines changed: 117 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -769,7 +769,7 @@ const config = computed(() => {
769769
</script>
770770

771771
<template>
772-
<div class="w-full relative" id="download-analytics">
772+
<div class="w-full relative" id="download-analytics" :aria-busy="pending ? 'true' : 'false'">
773773
<div class="w-full mb-4 flex flex-col gap-3">
774774
<div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
775775
<div class="flex flex-col gap-1 sm:shrink-0">
@@ -787,6 +787,7 @@ const config = computed(() => {
787787
id="granularity"
788788
v-model="selectedGranularity"
789789
class="w-full bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none"
790+
:disabled="pending"
790791
>
791792
<option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
792793
<option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
@@ -811,6 +812,7 @@ const config = computed(() => {
811812
<input
812813
id="startDate"
813814
v-model="startDate"
815+
:disabled="pending"
814816
type="date"
815817
class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:light] dark:[color-scheme:dark]"
816818
/>
@@ -831,6 +833,7 @@ const config = computed(() => {
831833
<input
832834
id="endDate"
833835
v-model="endDate"
836+
:disabled="pending"
834837
type="date"
835838
class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:light] dark:[color-scheme:dark]"
836839
/>
@@ -850,113 +853,121 @@ const config = computed(() => {
850853
</div>
851854
</div>
852855

853-
<ClientOnly v-if="chartData.dataset">
854-
<div>
855-
<VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
856-
<!-- Custom legend for multiple series -->
857-
<template v-if="isMultiPackageMode" #legend="{ legend }">
858-
<div class="flex gap-4 flex-wrap justify-center">
859-
<!-- TODO: a11y -->
860-
<button
861-
v-for="datapoint in legend"
862-
:key="datapoint"
863-
class="flex gap-1 place-items-center"
864-
@click="datapoint.segregate()"
865-
>
866-
<div class="h-3 w-3">
867-
<svg viewBox="0 0 2 2" class="w-full">
868-
<rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
869-
</svg>
870-
</div>
871-
<span
872-
:style="{
873-
textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
874-
}"
856+
<h2 id="download-analytics-title" class="sr-only">
857+
{{ $t('package.downloads.title') }}
858+
</h2>
859+
860+
<div role="region" aria-labelledby="download-analytics-title">
861+
<ClientOnly v-if="chartData.dataset">
862+
<div>
863+
<VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
864+
<!-- Custom legend for multiple series -->
865+
<template v-if="isMultiPackageMode" #legend="{ legend }">
866+
<div class="flex gap-4 flex-wrap justify-center">
867+
<button
868+
v-for="datapoint in legend"
869+
:key="datapoint.name"
870+
:aria-pressed="datapoint.isSegregated"
871+
:arial-label="datapoint.name"
872+
type="button"
873+
class="flex gap-1 place-items-center"
874+
@click="datapoint.segregate()"
875875
>
876-
{{ datapoint.name }}
877-
</span>
878-
</button>
879-
</div>
880-
</template>
881-
882-
<template #menuIcon="{ isOpen }">
883-
<span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
884-
<span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
885-
</template>
886-
<template #optionCsv>
887-
<span
888-
class="i-carbon:csv w-6 h-6 text-fg-subtle"
889-
style="pointer-events: none"
890-
aria-hidden="true"
891-
/>
892-
</template>
893-
<template #optionImg>
894-
<span
895-
class="i-carbon:png w-6 h-6 text-fg-subtle"
896-
style="pointer-events: none"
897-
aria-hidden="true"
898-
/>
899-
</template>
900-
<template #optionSvg>
901-
<span
902-
class="i-carbon:svg w-6 h-6 text-fg-subtle"
903-
style="pointer-events: none"
904-
aria-hidden="true"
905-
/>
906-
</template>
907-
908-
<template #annotator-action-close>
909-
<span
910-
class="i-carbon:close w-6 h-6 text-fg-subtle"
911-
style="pointer-events: none"
912-
aria-hidden="true"
913-
/>
914-
</template>
915-
<template #annotator-action-color="{ color }">
916-
<span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
917-
</template>
918-
<template #annotator-action-undo>
919-
<span
920-
class="i-carbon:undo w-6 h-6 text-fg-subtle"
921-
style="pointer-events: none"
922-
aria-hidden="true"
923-
/>
924-
</template>
925-
<template #annotator-action-redo>
926-
<span
927-
class="i-carbon:redo w-6 h-6 text-fg-subtle"
928-
style="pointer-events: none"
929-
aria-hidden="true"
930-
/>
931-
</template>
932-
<template #annotator-action-delete>
933-
<span
934-
class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
935-
style="pointer-events: none"
936-
aria-hidden="true"
937-
/>
938-
</template>
939-
<template #optionAnnotator="{ isAnnotator }">
940-
<span
941-
v-if="isAnnotator"
942-
class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
943-
style="pointer-events: none"
944-
aria-hidden="true"
945-
/>
946-
<span
947-
v-else
948-
class="i-carbon:edit w-6 h-6 text-fg-subtle"
949-
style="pointer-events: none"
950-
aria-hidden="true"
951-
/>
952-
</template>
953-
</VueUiXy>
954-
</div>
876+
<div class="h-3 w-3">
877+
<svg viewBox="0 0 2 2" class="w-full">
878+
<rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
879+
</svg>
880+
</div>
881+
<span
882+
:style="{
883+
textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
884+
}"
885+
>
886+
{{ datapoint.name }}
887+
</span>
888+
</button>
889+
</div>
890+
</template>
891+
892+
<template #menuIcon="{ isOpen }">
893+
<span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
894+
<span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
895+
</template>
896+
<template #optionCsv>
897+
<span
898+
class="i-carbon:csv w-6 h-6 text-fg-subtle"
899+
style="pointer-events: none"
900+
aria-hidden="true"
901+
/>
902+
</template>
903+
<template #optionImg>
904+
<span
905+
class="i-carbon:png w-6 h-6 text-fg-subtle"
906+
style="pointer-events: none"
907+
aria-hidden="true"
908+
/>
909+
</template>
910+
<template #optionSvg>
911+
<span
912+
class="i-carbon:svg w-6 h-6 text-fg-subtle"
913+
style="pointer-events: none"
914+
aria-hidden="true"
915+
/>
916+
</template>
955917

956-
<template #fallback>
957-
<div class="min-h-[260px]" />
958-
</template>
959-
</ClientOnly>
918+
<template #annotator-action-close>
919+
<span
920+
class="i-carbon:close w-6 h-6 text-fg-subtle"
921+
style="pointer-events: none"
922+
aria-hidden="true"
923+
/>
924+
</template>
925+
<template #annotator-action-color="{ color }">
926+
<span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
927+
</template>
928+
<template #annotator-action-undo>
929+
<span
930+
class="i-carbon:undo w-6 h-6 text-fg-subtle"
931+
style="pointer-events: none"
932+
aria-hidden="true"
933+
/>
934+
</template>
935+
<template #annotator-action-redo>
936+
<span
937+
class="i-carbon:redo w-6 h-6 text-fg-subtle"
938+
style="pointer-events: none"
939+
aria-hidden="true"
940+
/>
941+
</template>
942+
<template #annotator-action-delete>
943+
<span
944+
class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
945+
style="pointer-events: none"
946+
aria-hidden="true"
947+
/>
948+
</template>
949+
<template #optionAnnotator="{ isAnnotator }">
950+
<span
951+
v-if="isAnnotator"
952+
class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
953+
style="pointer-events: none"
954+
aria-hidden="true"
955+
/>
956+
<span
957+
v-else
958+
class="i-carbon:edit w-6 h-6 text-fg-subtle"
959+
style="pointer-events: none"
960+
aria-hidden="true"
961+
/>
962+
</template>
963+
</VueUiXy>
964+
</div>
965+
966+
<template #fallback>
967+
<div class="min-h-[260px]" />
968+
</template>
969+
</ClientOnly>
970+
</div>
960971

961972
<div
962973
v-if="shouldFetch && !chartData.dataset && !pending"

0 commit comments

Comments
 (0)