Skip to content

Commit afb4c01

Browse files
bellangerqbellangerq
authored
Corrige l'accessibilité des graphiques (#287)
* fix: update charts color based on theme * fix: add table transcription to charts * fix: set correct colors for not applicable ono chartts * fix: update chart colors when theme changes with theme modal * docs: update changelog
1 parent f2c8208 commit afb4c01

7 files changed

Lines changed: 145 additions & 21 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
66

77
### Corrections 🐛
88

9+
- Ajoute une alternative aux graphiques du rapport sous forme de tableau ([#287](https://github.com/DISIC/Ara/pull/287))
910
- Clarifie le statut de l’audit côté rapport ([#284](https://github.com/DISIC/Ara/pull/284))
1011

1112
## 03/02/2023

‎confiture-web-app/src/components/ChartLegend.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,6 @@
4040
background-color: var(--background-action-high-error);
4141
}
4242
.legend-color.not-applicable {
43-
background-color: var(--background-contrast-grey);
43+
background-color: var(--grey-200-850);
4444
}
4545
</style>

‎confiture-web-app/src/components/PieChart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const chartConfig: ChartConfiguration<"pie", number[], string> = {
2727
backgroundColor: [
2828
getCssVarValue("--background-action-high-success"),
2929
getCssVarValue("--background-action-high-error"),
30-
getCssVarValue("--background-contrast-grey"),
30+
getCssVarValue("--border-plain-grey"),
3131
],
3232
borderWidth: 0,
3333
},

‎confiture-web-app/src/components/ReportResults.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const stats = computed(() => {
2323
total: 100,
2424
unit: "%",
2525
hasDetails: true,
26+
theme: "france",
2627
},
2728
]
2829
: []),
@@ -37,6 +38,7 @@ const stats = computed(() => {
3738
total:
3839
report.data!.totalCriteriaCount * report.data!.context.samples.length,
3940
danger: true,
41+
theme: "marianne",
4042
},
4143
{
4244
title: "Critères applicables",
@@ -72,6 +74,7 @@ const chartsName = {
7274
:total="stat.total"
7375
:unit="stat.unit"
7476
:danger="stat.danger"
77+
:theme="stat.theme"
7578
>
7679
<template v-if="stat.hasDetails" #accordion-title>
7780
En savoir plus sur le calcul du taux
@@ -100,6 +103,25 @@ const chartsName = {
100103
<ResultDetailsCard
101104
class="fr-mb-6w result-card"
102105
:title="chartsName.resultDistribution"
106+
:table-data="[
107+
['Critères', 'Résultat'],
108+
[
109+
'Conformes',
110+
`${Math.round(report.data.resultDistribution.compliant.percentage)}%`,
111+
],
112+
[
113+
'Non conformes',
114+
`${Math.round(
115+
report.data.resultDistribution.notCompliant.percentage
116+
)}%`,
117+
],
118+
[
119+
'Non applicables',
120+
`${Math.round(
121+
report.data.resultDistribution.notApplicable.percentage
122+
)}%`,
123+
],
124+
]"
103125
>
104126
<div class="card-content">
105127
<ChartLegend class="card-legend" />
@@ -127,6 +149,22 @@ const chartsName = {
127149
<ResultDetailsCard
128150
class="fr-mb-6w result-card"
129151
:title="chartsName.pageDistribution"
152+
:table-data="[
153+
[
154+
'Page',
155+
'Critères conformes',
156+
'Critères non conformes',
157+
'Critères non applicables',
158+
],
159+
...report.data.pageDistributions.map((p) => {
160+
return [
161+
p.name,
162+
`${Math.round(p.compliant.percentage)}%`,
163+
`${Math.round(p.notCompliant.percentage)}%`,
164+
`${Math.round(p.notApplicable.percentage)}%`,
165+
];
166+
}),
167+
]"
130168
>
131169
<div class="card-content">
132170
<ChartLegend class="card-legend" />
@@ -156,6 +194,22 @@ const chartsName = {
156194
<ResultDetailsCard
157195
class="result-card"
158196
:title="chartsName.topicDistribution"
197+
:table-data="[
198+
[
199+
'Thématique du RGAA',
200+
'Critères conformes',
201+
'Critères non conformes',
202+
'Critères non applicables',
203+
],
204+
...report.data.topicDistributions.map((t, i) => {
205+
return [
206+
`${i + 1}. ${t.name}`,
207+
`${Math.round(t.compliant.percentage)}%`,
208+
`${Math.round(t.notCompliant.percentage)}%`,
209+
`${Math.round(t.notApplicable.percentage)}%`,
210+
];
211+
}),
212+
]"
159213
>
160214
<div class="card-content">
161215
<ChartLegend class="card-legend" />

‎confiture-web-app/src/components/ResultDetailsCard.vue‎

Lines changed: 75 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,85 @@
11
<script lang="ts" setup>
22
import { slugify } from "../utils";
33
4-
defineProps<{ title: string }>();
4+
defineProps<{
5+
title: string;
6+
tableData: string[][];
7+
}>();
58
</script>
69

710
<template>
8-
<div class="card">
9-
<div class="fr-py-5v fr-px-2w card-header">
10-
<h3 :id="slugify(title)" class="fr-h4 fr-m-0">{{ title }}</h3>
11-
</div>
11+
<div>
12+
<h3 :id="slugify(title)" class="fr-h4 fr-mb-3w">{{ title }}</h3>
1213

13-
<div class="fr-px-4v content">
14-
<slot />
14+
<div class="fr-tabs">
15+
<ul
16+
class="fr-tabs__list"
17+
role="tablist"
18+
:aria-label="`Format d’affichage pour ${title}`"
19+
>
20+
<li role="presentation">
21+
<button
22+
:id="`tabpanel-table-${slugify(title)}`"
23+
class="fr-tabs__tab"
24+
tabindex="0"
25+
role="tab"
26+
aria-selected="true"
27+
:aria-controls="`tabpanel-table-${slugify(title)}-panel`"
28+
>
29+
Graphique
30+
</button>
31+
</li>
32+
<li role="presentation">
33+
<button
34+
:id="`tabpanel-chart-${slugify(title)}`"
35+
class="fr-tabs__tab"
36+
tabindex="-1"
37+
role="tab"
38+
aria-selected="false"
39+
:aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
40+
>
41+
Tableau
42+
</button>
43+
</li>
44+
</ul>
45+
<div
46+
:id="`tabpanel-table-${slugify(title)}-panel`"
47+
class="fr-tabs__panel fr-tabs__panel--selected"
48+
role="tabpanel"
49+
:aria-labelledby="`tabpanel-table-${slugify(title)}`"
50+
tabindex="0"
51+
>
52+
<slot />
53+
</div>
54+
<div
55+
:id="`tabpanel-chart-${slugify(title)}-panel`"
56+
class="fr-tabs__panel"
57+
role="tabpanel"
58+
:aria-labelledby="`tabpanel-chart-${slugify(title)}`"
59+
tabindex="0"
60+
>
61+
<div class="fr-table fr-table--no-caption fr-mb-0">
62+
<table>
63+
<caption>
64+
{{
65+
title
66+
}}
67+
</caption>
68+
<thead>
69+
<tr>
70+
<th v-for="header in tableData[0]" :key="header" scope="col">
71+
{{ header }}
72+
</th>
73+
</tr>
74+
</thead>
75+
<tbody>
76+
<tr v-for="(row, i) in tableData.slice(1)" :key="i">
77+
<td v-for="data in row" :key="data">{{ data }}</td>
78+
</tr>
79+
</tbody>
80+
</table>
81+
</div>
82+
</div>
1583
</div>
1684
</div>
1785
</template>
18-
19-
<style scoped>
20-
.card {
21-
border: 1px solid var(--border-default-grey);
22-
}
23-
24-
.card-header {
25-
border-bottom: 1px solid var(--border-default-grey);
26-
}
27-
</style>

‎confiture-web-app/src/components/StackBarChart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const chartDatasets = [
5454
{
5555
label: "Non applicable",
5656
data: props.data.map((d) => d.notApplicable.percentage),
57-
backgroundColor: getCssVarValue("--background-contrast-grey"),
57+
backgroundColor: getCssVarValue("--grey-200-850"),
5858
barThickness: 16,
5959
},
6060
];

‎confiture-web-app/src/composables/useChartColorsUpdate.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,29 @@ export function useChartColorsUpdate(
2828
const newColors = [
2929
getCssVarValue("--background-action-high-success"),
3030
getCssVarValue("--background-action-high-error"),
31-
getCssVarValue("--background-contrast-grey"),
31+
getCssVarValue("--grey-200-850"),
3232
];
3333

3434
setNewColors(chart, newColors);
3535
chart?.update();
3636
}
3737

38+
// Update chart colors on `data-fr-theme` attribute change
39+
const observer = new MutationObserver((mutationList) => {
40+
if (!mutationList.some((m) => m.attributeName === "data-fr-theme")) {
41+
return;
42+
}
43+
44+
updateChartColors();
45+
});
46+
3847
onMounted(() => {
3948
mediaQueryList.addEventListener("change", updateChartColors);
49+
observer.observe(document.documentElement, { attributes: true });
4050
});
4151

4252
onUnmounted(() => {
4353
mediaQueryList.removeEventListener("change", updateChartColors);
54+
observer.disconnect();
4455
});
4556
}

0 commit comments

Comments
 (0)
⚡