Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Corrige les tickets d'accessibilité suite au contre audit #478

Merged
merged 11 commits into from
Sep 8, 2023
Merged
2 changes: 1 addition & 1 deletion confiture-web-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@gouvfr/dsfr": "1.9.0",
"@sentry/tracing": "^7.37.2",
"@sentry/vue": "^7.37.2",
"@vueuse/head": "^1.0.22",
"@unhead/vue": "^1.5.3",
"chart.js": "^4.1.0",
"dompurify": "^2.4.1",
"ky": "^0.33.0",
Expand Down
2 changes: 1 addition & 1 deletion confiture-web-app/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { provide, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useHead } from "@vueuse/head";
import { useHead } from "@unhead/vue";

import Breadcrumb, { BreadcrumbLink } from "./components/Breadcrumb.vue";
import ToastNotification from "./components/ToastNotification.vue";
Expand Down
49 changes: 28 additions & 21 deletions confiture-web-app/src/components/AuditGeneralInformationsForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -164,27 +164,26 @@ const route = useRoute();
:key="i"
class="fr-mt-4w fr-p-4w page-card"
>
<div class="fr-mb-2w page-header">
<legend>
<h3 class="fr-h6 fr-mb-0">Page {{ i + 1 }}</h3>
</legend>

<button
class="fr-btn fr-btn--tertiary-no-outline"
type="button"
:disabled="pages.length === 1"
@click="deletePage(i)"
>
Supprimer
<span class="sr-only">la page {{ i + 1 }}</span>
</button>
</div>
<legend class="page-legend">
<h3 class="fr-h6 fr-mb-0">Page {{ i + 1 }}</h3>
</legend>

<button
class="fr-btn fr-btn--tertiary-no-outline page-delete-button"
type="button"
:disabled="pages.length === 1"
@click="deletePage(i)"
>
Supprimer
<span class="sr-only">la page {{ i + 1 }}</span>
</button>

<DsfrField
:id="`page-name-${i + 1}`"
ref="pageNameFieldRefs"
v-model="page.name"
label="Nom de la page"
class="fr-mt-2w page-field"
/>

<DsfrField
Expand All @@ -193,6 +192,7 @@ const route = useRoute();
label="URL de la page"
type="url"
required
class="page-field"
>
<template #hint>
L’URL de la page doit commencer par <code>https://</code>
Expand Down Expand Up @@ -304,14 +304,21 @@ const route = useRoute();

.page-card {
border: 1px solid var(--border-default-grey);
display: grid;
grid-template-columns: auto auto;
align-items: center;
}

.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
.page-legend {
float: left;
}

.page-delete-button {
justify-self: end;
}

.page-field {
grid-column: 1 / -1;
}

.auditor-fields {
Expand Down
8 changes: 6 additions & 2 deletions confiture-web-app/src/components/AuditGenerationCriterium.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
import { useResultsStore, useFiltersStore } from "../store";
import { useNotifications } from "../composables/useNotifications";
import RadioGroup, { RadioColor } from "./RadioGroup.vue";
import { captureWithPayloads } from "../utils";
import { captureWithPayloads, formatStatus } from "../utils";
import { useIsOffline } from "../composables/useIsOffline";

const store = useResultsStore();
Expand Down Expand Up @@ -265,7 +265,11 @@ const isOffline = useIsOffline();
class="fr-toggle__label fr-pr-2w"
:for="`applicable-all-pages-${uniqueId}`"
>
Sur toutes les pages
<span class="sr-only">
Appliquer le statut {{ formatStatus(result.status) }} pour le
critère {{ topicNumber }}.{{ criterium.number }}
</span>
&nbsp;Sur toutes les pages
</label>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion confiture-web-app/src/components/AuditGenerationFilters.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { computed, watch, nextTick } from "vue";
import { ref } from "vue";
import { useFiltersStore, useResultsStore } from "../store";
import { pluralize } from "../utils";

defineProps<{
topics: { title: string; number: number; value: number }[];
Expand Down Expand Up @@ -116,7 +117,8 @@ watch(

<div role="alert" aria-live="polite">
<p v-if="filterStore.search" class="fr-mt-2w fr-mb-1w">
{{ resultsCount }} {{ resultsCount !== 1 ? "résultats" : "résultat" }}
{{ resultsCount }}
{{ pluralize("résultat", "résultats", resultsCount) }}
</p>
<!-- FIXME: can't change color on dismissable tags. "fr-tag--blue-france" -->
</div>
Expand Down
4 changes: 2 additions & 2 deletions confiture-web-app/src/components/PageMeta.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { defineComponent } from "vue";
import { useHead } from "@vueuse/head";
import { useHead } from "@unhead/vue";

const PageMeta = defineComponent({
name: "PageMeta",
Expand All @@ -21,7 +21,7 @@ const PageMeta = defineComponent({
* If no props are provided, defaults are used.
*/
useHead({
title: props.title,
title: () => props.title ?? "",
meta: [
{ name: "description", content: props.description },
{ name: "og:title", content: props.title },
Expand Down
36 changes: 27 additions & 9 deletions confiture-web-app/src/components/ResultDetailsCard.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
<script lang="ts" setup>
import { ref } from "vue";

import { slugify } from "../utils";

defineProps<{
title: string;
tableData: string[][];
}>();

const currentDisplay = ref("chart");

function updateCurrentDisplay(display: string) {
currentDisplay.value = display;
}
</script>

<template>
Expand All @@ -19,44 +27,54 @@ defineProps<{
>
<li role="presentation">
<button
:id="`tabpanel-table-${slugify(title)}`"
:id="`tabpanel-chart-${slugify(title)}`"
class="fr-tabs__tab"
tabindex="0"
role="tab"
aria-selected="true"
:aria-controls="`tabpanel-table-${slugify(title)}-panel`"
:aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
>
Graphique
<span v-if="currentDisplay === 'chart'" class="sr-only"
>&nbsp;Actif</span
>
</button>
</li>
<li role="presentation">
<button
:id="`tabpanel-chart-${slugify(title)}`"
:id="`tabpanel-table-${slugify(title)}`"
class="fr-tabs__tab"
tabindex="-1"
role="tab"
aria-selected="false"
:aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
:aria-controls="`tabpanel-table-${slugify(title)}-panel`"
>
Tableau
<span v-if="currentDisplay === 'table'" class="sr-only"
>&nbsp;Actif</span
>
</button>
</li>
</ul>
<div
:id="`tabpanel-table-${slugify(title)}-panel`"
class="fr-tabs__panel fr-tabs__panel--selected"
:id="`tabpanel-chart-${slugify(title)}-panel`"
class="fr-tabs__panel"
:class="{ 'fr-tabs__panel--selected': currentDisplay === 'chart' }"
role="tabpanel"
:aria-labelledby="`tabpanel-table-${slugify(title)}`"
:aria-labelledby="`tabpanel-chart-${slugify(title)}`"
tabindex="0"
v-on="{ 'dsfr.disclose': () => updateCurrentDisplay('chart') }"
>
<slot />
</div>
<div
:id="`tabpanel-chart-${slugify(title)}-panel`"
:id="`tabpanel-table-${slugify(title)}-panel`"
class="fr-tabs__panel"
:class="{ 'fr-tabs__panel--selected': currentDisplay === 'table' }"
role="tabpanel"
:aria-labelledby="`tabpanel-chart-${slugify(title)}`"
:aria-labelledby="`tabpanel-table-${slugify(title)}`"
tabindex="0"
v-on="{ 'dsfr.disclose': () => updateCurrentDisplay('table') }"
>
<div class="fr-table fr-table--no-caption fr-mb-0">
<table>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -280,22 +280,22 @@ function combineEnvironments(
:key="i"
class="fr-fieldset fr-m-0 fr-p-0 fr-mt-4w fr-p-4w env-card"
>
<div class="fr-mb-2w env-header">
<legend>
<h3 class="fr-h6 fr-mb-0">Environnement {{ i + 1 }}</h3>
</legend>
<button
class="fr-btn fr-btn--tertiary-no-outline"
type="button"
:disabled="customEnvironments.length === 1"
@click="deleteEnvironment(i)"
>
Supprimer
</button>
</div>
<div class="fr-form-group">
<legend class="env-legend">
<h3 class="fr-h6 fr-mb-0">Environnement {{ i + 1 }}</h3>
</legend>
<button
class="fr-btn fr-btn--tertiary-no-outline env-delete-button"
type="button"
:disabled="customEnvironments.length === 1"
@click="deleteEnvironment(i)"
>
Supprimer
</button>
<div class="fr-form-group env-form">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-fieldset__legend fr-text--regular">Support</legend>
<legend class="fr-fieldset__legend fr-text--regular fr-mt-2w">
Support
</legend>
<div class="fr-fieldset__content">
<div class="fr-radio-group">
<input
Expand Down Expand Up @@ -438,15 +438,21 @@ function combineEnvironments(

.env-card {
border: 1px solid var(--border-default-grey);
display: block;
display: grid;
grid-template-columns: auto auto;
align-items: center;
}

.env-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
.env-legend {
float: left;
}

.env-delete-button {
justify-self: end;
}

.env-card > *:not(.env-legend, .env-delete-button) {
grid-column: 1 / -1;
}

@media (max-width: 992px) {
Expand Down
2 changes: 1 addition & 1 deletion confiture-web-app/src/main.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import { marked } from "marked";
import { createHead } from "@vueuse/head";
import { createHead } from "@unhead/vue";
// @ts-expect-error vue-matomo does not have any sort of typescript support :'(
import Matomo from "vue-matomo";

Expand Down
11 changes: 7 additions & 4 deletions confiture-web-app/src/pages/consult/ReportPage.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { computed, ref, watch, Ref } from "vue";
bellangerq marked this conversation as resolved.
Show resolved Hide resolved
import { useRoute, useRouter } from "vue-router";

import OnboardingModal from "../../components/OnboardingModal.vue";
Expand Down Expand Up @@ -94,10 +94,10 @@ function onOnboardingAlertClose() {
localStorage.setItem("confiture:hide-onboarding-alert", "true");
}

const targetTab = route.params.tab as string | undefined;
const targetTab = ref(route.params.tab) as Ref<string | undefined>;
bellangerq marked this conversation as resolved.
Show resolved Hide resolved
const targetTabIndex = computed(() => {
let index = tabs.value.findIndex(
(t) => slugify(t.title).toLowerCase() === targetTab?.toLowerCase()
(t) => slugify(t.title).toLowerCase() === targetTab?.value?.toLowerCase()
bellangerq marked this conversation as resolved.
Show resolved Hide resolved
);
return index === -1 ? 0 : index;
});
Expand All @@ -116,6 +116,8 @@ function handleTabChange(tab: { title: string }) {
},
}).fullPath
);

targetTab.value = slugify(tab.title);
}

const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
Expand Down Expand Up @@ -288,14 +290,15 @@ const csvExportSizeEstimation = computed(() => {
:aria-controls="`tabpanel-${slugify(tab.title)}-panel`"
>
{{ tab.title }}
<span v-if="i === targetTabIndex" class="sr-only">&nbsp;Actif</span>
</button>
</li>
</ul>
<div
v-for="(tab, i) in tabs"
:id="`tabpanel-${slugify(tab.title)}-panel`"
:key="tab.title"
class="fr-tabs__panel fr-tabs__panel--selected"
class="fr-tabs__panel"
:class="{ 'fr-tabs__panel--selected': i === targetTabIndex }"
role="tabpanel"
:aria-labelledby="`tabpanel-${slugify(tab.title)}`"
Expand Down
Loading