Skip to content

Commit c62bd8b

Browse files
graphierosgraphieros
committed
Improvement - Add accessibility aria attributes to chart svg
1 parent 34a3ac9 commit c62bd8b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+368
-41
lines changed

‎src/atoms/Tooltip.vue

+3
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ const convertedBackground = computed(() => {
9292
<teleport :to="isFullscreen ? parent : 'body'">
9393
<div
9494
ref="tooltip"
95+
role="tooltip"
96+
:aria-hidden="!show"
97+
aria-live="polite"
9598
data-cy="tooltip"
9699
:class="{'vue-data-ui-custom-tooltip' : isCustom, 'vue-data-ui-tooltip': !isCustom}"
97100
v-if="show"

‎src/components/vue-ui-3d-bar.vue

+11-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { useConfig } from "../useConfig";
3434
import PackageVersion from "../atoms/PackageVersion.vue";
3535
import PenAndPaper from "../atoms/PenAndPaper.vue";
3636
import { useUserOptionState } from "../useUserOptionState";
37+
import { useChartAccessibility } from "../useChartAccessibility";
3738
3839
const { vue_ui_3d_bar: DEFAULT_CONFIG } = useConfig();
3940
@@ -75,6 +76,7 @@ const FINAL_CONFIG = computed({
7576
});
7677
7778
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
79+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
7880
7981
function prepareConfig() {
8082
const mergedConfig = useNestedProp({
@@ -604,7 +606,15 @@ defineExpose({
604606
</template>
605607
</UserOptions>
606608

607-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
609+
<svg
610+
ref="svgRef"
611+
:xmlns="XMLNS"
612+
v-if="isDataset"
613+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
614+
data-cy="3d-bar-svg"
615+
:viewBox="`0 0 ${svg.absoluteWidth} ${svg.height}`"
616+
:style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
617+
>
608618
<PackageVersion />
609619

610620
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-age-pyramid.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { useConfig } from "../useConfig";
3030
import PackageVersion from "../atoms/PackageVersion.vue";
3131
import PenAndPaper from "../atoms/PenAndPaper.vue";
3232
import { useUserOptionState } from "../useUserOptionState";
33+
import { useChartAccessibility } from "../useChartAccessibility";
3334
3435
const { vue_ui_age_pyramid: DEFAULT_CONFIG } = useConfig();
3536
@@ -75,6 +76,7 @@ const FINAL_CONFIG = computed({
7576
});
7677
7778
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
79+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.title });
7880
7981
function prepareConfig() {
8082
const mergedConfig = useNestedProp({
@@ -532,7 +534,14 @@ defineExpose({
532534
</UserOptions>
533535

534536
<!-- CHART -->
535-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.color}`" >
537+
<svg
538+
ref="svgRef"
539+
:xmlns="XMLNS"
540+
v-if="isDataset"
541+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
542+
:viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`"
543+
:style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.color}`"
544+
>
536545
<PackageVersion />
537546

538547
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-bullet.vue

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import PackageVersion from "../atoms/PackageVersion.vue";
1717
import PenAndPaper from "../atoms/PenAndPaper.vue";
1818
import Skeleton from "./vue-ui-skeleton.vue";
1919
import { useUserOptionState } from "../useUserOptionState";
20+
import { useChartAccessibility } from "../useChartAccessibility";
2021
2122
const { vue_ui_bullet: DEFAULT_CONFIG } = useConfig();
2223
@@ -162,6 +163,7 @@ const FINAL_CONFIG = computed({
162163
});
163164
164165
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
166+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
165167
166168
watch(() => props.config, (_newCfg) => {
167169
FINAL_CONFIG.value = prepareConfig();
@@ -447,6 +449,7 @@ defineExpose({
447449
</UserOptions>
448450

449451
<svg
452+
ref="svgRef"
450453
:xmlns="XMLNS"
451454
v-if="isDataset"
452455
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen, 'vue-ui-bullet-svg': true }"

‎src/components/vue-ui-candlestick.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { useConfig } from "../useConfig";
3333
import PackageVersion from "../atoms/PackageVersion.vue";
3434
import PenAndPaper from "../atoms/PenAndPaper.vue";
3535
import { useUserOptionState } from "../useUserOptionState";
36+
import { useChartAccessibility } from "../useChartAccessibility";
3637
3738
const { vue_ui_candlestick: DEFAULT_CONFIG } = useConfig()
3839
@@ -81,6 +82,7 @@ const FINAL_CONFIG = computed({
8182
});
8283
8384
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
85+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.title });
8486
8587
function prepareConfig() {
8688
const mergedConfig = useNestedProp({
@@ -639,7 +641,13 @@ defineExpose({
639641
</UserOptions>
640642

641643
<!-- CHART -->
642-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.color}`">
644+
<svg
645+
ref="svgRef"
646+
:xmlns="XMLNS"
647+
v-if="isDataset"
648+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
649+
:viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.color}`"
650+
>
643651
<PackageVersion />
644652

645653
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-chestnut.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { useConfig } from "../useConfig";
3333
import PackageVersion from "../atoms/PackageVersion.vue";
3434
import PenAndPaper from "../atoms/PenAndPaper.vue";
3535
import { useUserOptionState } from "../useUserOptionState";
36+
import { useChartAccessibility } from "../useChartAccessibility";
3637
3738
const { vue_ui_chestnut: DEFAULT_CONFIG } = useConfig()
3839
@@ -70,6 +71,7 @@ const FINAL_CONFIG = computed({
7071
});
7172
7273
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
74+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.layout.title });
7375
7476
function prepareConfig() {
7577
const mergedConfig = useNestedProp({
@@ -598,7 +600,13 @@ defineExpose({
598600
</template>
599601
</UserOptions>
600602

601-
<svg :xmlns="XMLNS" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color}`" >
603+
<svg
604+
ref="svgRef"
605+
:xmlns="XMLNS"
606+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
607+
v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`"
608+
:style="`overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
609+
>
602610
<PackageVersion />
603611

604612
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-circle-pack.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import PackageVersion from '../atoms/PackageVersion.vue';
3131
import Accordion from "./vue-ui-accordion.vue";
3232
import DataTable from '../atoms/DataTable.vue';
3333
import Skeleton from "./vue-ui-skeleton.vue";
34+
import { useChartAccessibility } from '../useChartAccessibility';
3435
3536
const props = defineProps({
3637
config: {
@@ -73,6 +74,8 @@ const FINAL_CONFIG = computed({
7374
}
7475
});
7576
77+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
78+
7679
const {
7780
userOptionsVisible,
7881
setUserOptionsVisibility,
@@ -622,7 +625,8 @@ defineExpose({
622625
</template>
623626
</UserOptions>
624627
625-
<svg
628+
<svg
629+
ref="svgRef"
626630
v-if="isDataset"
627631
:xmlns="XMLNS"
628632
:viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"

‎src/components/vue-ui-donut-evolution.vue

+11-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { useConfig } from "../useConfig";
4040
import PackageVersion from "../atoms/PackageVersion.vue";
4141
import PenAndPaper from "../atoms/PenAndPaper.vue";
4242
import { useUserOptionState } from "../useUserOptionState";
43+
import { useChartAccessibility } from "../useChartAccessibility";
4344
4445
const { vue_ui_donut_evolution: DEFAULT_CONFIG } = useConfig();
4546
@@ -165,6 +166,7 @@ const FINAL_CONFIG = computed({
165166
});
166167
167168
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
169+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
168170
169171
function prepareConfig() {
170172
const mergedConfig = useNestedProp({
@@ -672,7 +674,15 @@ defineExpose({
672674
</template>
673675
</UserOptions>
674676
675-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-evolution-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
677+
<svg
678+
ref="svgRef"
679+
:xmlns="XMLNS"
680+
v-if="isDataset"
681+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
682+
data-cy="donut-evolution-svg"
683+
:viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`"
684+
:style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
685+
>
676686
<PackageVersion />
677687
678688
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-donut.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import PackageVersion from "../atoms/PackageVersion.vue";
4141
import PenAndPaper from "../atoms/PenAndPaper.vue";
4242
import { useUserOptionState } from "../useUserOptionState";
4343
import Shape from "../atoms/Shape.vue";
44+
import { useChartAccessibility } from "../useChartAccessibility";
4445
4546
const { vue_ui_donut: DEFAULT_CONFIG } = useConfig()
4647
const slots = useSlots();
@@ -167,6 +168,7 @@ const FINAL_CONFIG = computed({
167168
});
168169
169170
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
171+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
170172
171173
watch(() => props.config, (_newCfg) => {
172174
FINAL_CONFIG.value = prepareConfig();
@@ -766,7 +768,7 @@ defineExpose({
766768
</template>
767769
</UserOptions>
768770

769-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-svg" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
771+
<svg ref="svgRef" :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-svg" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
770772
<PackageVersion/>
771773

772774
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-dumbbell.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { useConfig } from "../useConfig";
3030
import PackageVersion from "../atoms/PackageVersion.vue";
3131
import PenAndPaper from "../atoms/PenAndPaper.vue";
3232
import { useUserOptionState } from "../useUserOptionState";
33+
import { useChartAccessibility } from "../useChartAccessibility";
3334
3435
const { vue_ui_dumbbell: DEFAULT_CONFIG } = useConfig();
3536
@@ -80,6 +81,7 @@ const FINAL_CONFIG = computed({
8081
});
8182
8283
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
84+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
8385
8486
function prepareConfig() {
8587
const mergedConfig = useNestedProp({
@@ -519,7 +521,13 @@ defineExpose({
519521
</template>
520522
</UserOptions>
521523

522-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${drawingArea.absoluteWidth <= 0 ? 10 : drawingArea.absoluteWidth} ${drawingArea.absoluteHeight <= 0 ? 10 : drawingArea.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
524+
<svg
525+
ref="svgRef"
526+
:xmlns="XMLNS"
527+
v-if="isDataset"
528+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
529+
:viewBox="`0 0 ${drawingArea.absoluteWidth <= 0 ? 10 : drawingArea.absoluteWidth} ${drawingArea.absoluteHeight <= 0 ? 10 : drawingArea.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
530+
>
523531
<PackageVersion />
524532

525533
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-flow.vue

+3
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { useConfig } from "../useConfig";
2828
import PackageVersion from "../atoms/PackageVersion.vue";
2929
import PenAndPaper from "../atoms/PenAndPaper.vue";
3030
import { useUserOptionState } from "../useUserOptionState";
31+
import { useChartAccessibility } from "../useChartAccessibility";
3132
3233
const { vue_ui_flow: DEFAULT_CONFIG } = useConfig();
3334
@@ -84,6 +85,7 @@ const FINAL_CONFIG = computed({
8485
});
8586
8687
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
88+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
8789
8890
function prepareConfig() {
8991
const mergedConfig = useNestedProp({
@@ -580,6 +582,7 @@ defineExpose({
580582
</UserOptions>
581583

582584
<svg
585+
ref="svgRef"
583586
:xmlns="XMLNS"
584587
:viewBox="`0 0 ${drawingArea.width} ${drawingArea.height}`"
585588
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"

‎src/components/vue-ui-funnel.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import themes from "../themes.json";
2929
import Skeleton from "./vue-ui-skeleton.vue";
3030
import { useUserOptionState } from "../useUserOptionState";
3131
import PackageVersion from "../atoms/PackageVersion.vue";
32+
import { useChartAccessibility } from "../useChartAccessibility";
3233
3334
const { vue_ui_funnel: DEFAULT_CONFIG } = useConfig();
3435
@@ -159,6 +160,7 @@ const FINAL_CONFIG = computed({
159160
});
160161
161162
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
163+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
162164
163165
watch(() => props.config, (_newCfg) => {
164166
FINAL_CONFIG.value = prepareConfig();
@@ -493,7 +495,14 @@ defineExpose({
493495
</template>
494496
</UserOptions>
495497

496-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="funnel-svg" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
498+
<svg
499+
ref="svgRef"
500+
:xmlns="XMLNS"
501+
v-if="isDataset"
502+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
503+
data-cy="funnel-svg" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`"
504+
:style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
505+
>
497506

498507
<PackageVersion/>
499508

‎src/components/vue-ui-galaxy.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { useConfig } from "../useConfig";
3333
import PackageVersion from "../atoms/PackageVersion.vue";
3434
import PenAndPaper from "../atoms/PenAndPaper.vue";
3535
import { useUserOptionState } from "../useUserOptionState";
36+
import { useChartAccessibility } from "../useChartAccessibility";
3637
3738
const { vue_ui_galaxy: DEFAULT_CONFIG } = useConfig();
3839
@@ -103,6 +104,7 @@ const FINAL_CONFIG = computed({
103104
});
104105
105106
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
107+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
106108
107109
function prepareConfig() {
108110
const mergedConfig = useNestedProp({
@@ -533,7 +535,14 @@ defineExpose({
533535
</template>
534536
</UserOptions>
535537

536-
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="galaxy-svg" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
538+
<svg
539+
ref="svgRef"
540+
:xmlns="XMLNS"
541+
v-if="isDataset"
542+
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
543+
data-cy="galaxy-svg"
544+
:viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
545+
>
537546
<PackageVersion />
538547

539548
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-gauge.vue

+8-2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { useConfig } from "../useConfig";
3131
import PackageVersion from "../atoms/PackageVersion.vue";
3232
import PenAndPaper from "../atoms/PenAndPaper.vue";
3333
import { useUserOptionState } from "../useUserOptionState";
34+
import { useChartAccessibility } from "../useChartAccessibility.js";
3435
3536
const { vue_ui_gauge: DEFAULT_CONFIG } = useConfig()
3637
@@ -73,6 +74,7 @@ const FINAL_CONFIG = computed({
7374
});
7475
7576
const { userOptionsVisible, setUserOptionsVisibility, keepUserOptionState } = useUserOptionState({ config: FINAL_CONFIG.value });
77+
const { svgRef } = useChartAccessibility({ config: FINAL_CONFIG.value.style.chart.title });
7678
7779
watch(() => props.config, (_newCfg) => {
7880
FINAL_CONFIG.value = prepareConfig();
@@ -558,10 +560,14 @@ defineExpose({
558560
</UserOptions>
559561

560562
<!-- CHART -->
561-
<svg :xmlns="XMLNS" v-if="isDataset"
563+
<svg
564+
ref="svgRef"
565+
:xmlns="XMLNS"
566+
v-if="isDataset"
562567
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
563568
:viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`"
564-
:style="`max-width:100%;overflow:hidden !important;background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
569+
:style="`max-width:100%;overflow:hidden !important;background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
570+
>
565571
<PackageVersion />
566572

567573
<!-- BACKGROUND SLOT -->

0 commit comments

Comments
 (0)