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‎

Lines changed: 3 additions & 0 deletions
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‎

Lines changed: 11 additions & 1 deletion
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‎

Lines changed: 10 additions & 1 deletion
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‎

Lines changed: 3 additions & 0 deletions
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‎

Lines changed: 9 additions & 1 deletion
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‎

Lines changed: 9 additions & 1 deletion
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‎

Lines changed: 5 additions & 1 deletion
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‎

Lines changed: 11 additions & 1 deletion
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‎

Lines changed: 3 additions & 1 deletion
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‎

Lines changed: 9 additions & 1 deletion
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 -->

0 commit comments

Comments
 (0)