From fcd00315a0513ba5ad89a95d5d7a2932d691cd40 Mon Sep 17 00:00:00 2001
From: Emmanuel Raviart <emmanuel@raviart.com>
Date: Mon, 25 Nov 2024 17:14:14 +0100
Subject: [PATCH] UI & aria fixes
---
src/lib/components/NavBar.svelte | 39 +++++++++----------
src/lib/components/search/Search.svelte | 1 +
.../components/test_cases/TestCaseTab.svelte | 3 +-
.../components/transverse_pages/Footer.svelte | 5 +--
.../variables/VariableReferredInputs.svelte | 3 ++
src/routes/accueil/+page.svelte | 27 ++++++++-----
6 files changed, 44 insertions(+), 34 deletions(-)
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 699c3bc55..c0c3f427d 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -354,13 +354,13 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri:drag-drop-line"
- />Tutoriel interactif
+ ></iconify-icon>Tutoriel interactif
<br /><span
class="lx-link-uppercase hidden group-hover:flex group-hover:underline"
>commencer<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri:arrow-right-line"
- /></span
+ ></iconify-icon></span
>
</button>
{/snippet}
@@ -377,12 +377,12 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri:video-line"
- />
+ ></iconify-icon>
Tutoriels vidéos
<iconify-icon
class="ml-0.5 align-[-0.15rem] text-base"
icon="ri:external-link-line"
- />
+ ></iconify-icon>
</a>
{/snippet}
</DropdownMenu.Item>
@@ -396,7 +396,7 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri-database-line"
- />Méthode de calcul et traitement des données
+ ></iconify-icon>Méthode de calcul et traitement des données
</a>
{/snippet}
</DropdownMenu.Item>
@@ -409,6 +409,7 @@
{#if user === undefined}
<li>
<button
+ aria-label="Identification"
class="rounded-sm p-1 uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
onclick={() => goto(loginUrl)}
>
@@ -432,7 +433,7 @@
<iconify-icon
class="align-[-0.4rem] text-2xl"
icon="ri-account-circle-fill"
- />
+ ></iconify-icon>
<span class="sr-only">Open user menu</span>
<span class="hidden xl:flex">
@@ -452,10 +453,8 @@
>
<span class="whitespace-nowrap pl-1">Se déconnecter</span>
- <iconify-icon
- class="text-lg"
- icon="ri-logout-box-r-line"
- />
+ <iconify-icon class="text-lg" icon="ri-logout-box-r-line"
+ ></iconify-icon>
</button>
{/snippet}
</DropdownMenu.Item>
@@ -515,7 +514,7 @@
<iconify-icon
class="align-[-0.2rem] text-2xl"
icon="ri-menu-line"
- />
+ ></iconify-icon>
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content
@@ -534,7 +533,7 @@
<iconify-icon
class="mr-1 align-[-0.2rem] text-lg"
icon="ri-key-fill"
- />Se connecter</span
+ ></iconify-icon>Se connecter</span
>
</button>
{/snippet}
@@ -551,7 +550,7 @@
<iconify-icon
class="mr-1 align-[-0.2rem] text-lg"
icon="ri-logout-box-r-line"
- />Se déconnecter ({user.preferred_username.split(
+ ></iconify-icon>Se déconnecter ({user.preferred_username.split(
"@",
)[0]})</span
>
@@ -570,7 +569,7 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri-list-check-3"
- /> Présentation des fonctionnalités
+ ></iconify-icon> Présentation des fonctionnalités
</a>
{/snippet}
</DropdownMenu.Item>
@@ -584,7 +583,7 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri:drag-drop-line"
- />Tutoriel interactif
+ ></iconify-icon>Tutoriel interactif
</button>
{/snippet}
</DropdownMenu.Item>
@@ -600,12 +599,12 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri:video-line"
- />
+ ></iconify-icon>
Tutoriels vidéos
<iconify-icon
class="ml-0.5 align-[-0.15rem] text-base"
icon="ri:external-link-line"
- />
+ ></iconify-icon>
</a>
{/snippet}
</DropdownMenu.Item>
@@ -619,7 +618,7 @@
<iconify-icon
class="mr-1 align-[-0.25rem] text-xl"
icon="ri-database-line"
- /> Méthode de calcul et traitement des données
+ ></iconify-icon> Méthode de calcul et traitement des données
</a>
{/snippet}
</DropdownMenu.Item>
@@ -644,10 +643,10 @@
<iconify-icon
class="mr-1 align-[-0.2rem] text-lg"
icon="ri:home-2-line"
- />Accueil LexImpact<iconify-icon
+ ></iconify-icon>Accueil LexImpact<iconify-icon
class="align-[-0.25rem] text-xl"
icon="ri:arrow-right-up-line"
- />
+ ></iconify-icon>
</a>
{/snippet}
</DropdownMenu.Item>
diff --git a/src/lib/components/search/Search.svelte b/src/lib/components/search/Search.svelte
index db5aab2e4..060f46e0b 100644
--- a/src/lib/components/search/Search.svelte
+++ b/src/lib/components/search/Search.svelte
@@ -121,6 +121,7 @@
/>
{#if isSearchActive}
<button
+ aria-label="Effacer"
class="mx-1 cursor-pointer p-1 text-black"
onclick={() => (searchInputValue = "")}
>
diff --git a/src/lib/components/test_cases/TestCaseTab.svelte b/src/lib/components/test_cases/TestCaseTab.svelte
index 7cb482fec..96bede823 100644
--- a/src/lib/components/test_cases/TestCaseTab.svelte
+++ b/src/lib/components/test_cases/TestCaseTab.svelte
@@ -30,8 +30,7 @@
href={!isDisabled ? href : undefined}
>
{#if pictoComponent !== undefined}
- {@const SvelteComponent = pictoComponent}
- <SvelteComponent classNames="w-5 2xl:w-6" />
+ <pictoComponent classNames="w-5 2xl:w-6"></pictoComponent>
{:else}
<iconify-icon {icon} class="text-xl 2xl:text-2xl"></iconify-icon>
{/if}
diff --git a/src/lib/components/transverse_pages/Footer.svelte b/src/lib/components/transverse_pages/Footer.svelte
index 13d2efdaa..008ee39d5 100644
--- a/src/lib/components/transverse_pages/Footer.svelte
+++ b/src/lib/components/transverse_pages/Footer.svelte
@@ -70,10 +70,9 @@
href="TODO"
>
Tutoriels
- <iconify-icon
- class="mr-1 align-[-0.3rem] text-xl"
+ <iconify-icon class="mr-1 align-[-0.3rem] text-xl"
icon="ri-arrow-right-line"
- />
+ ></iconify-icon>
</a> -->
<a
class="lx-link-uppercase block pb-3 font-sans"
diff --git a/src/lib/components/variables/VariableReferredInputs.svelte b/src/lib/components/variables/VariableReferredInputs.svelte
index 56518ccea..59e6afabb 100644
--- a/src/lib/components/variables/VariableReferredInputs.svelte
+++ b/src/lib/components/variables/VariableReferredInputs.svelte
@@ -79,6 +79,7 @@
>{variable.short_label ?? variable.label ?? variable.name}</span
>
<a
+ aria-label="Plus d'informations"
class="lx-link-simple mr-3 text-gray-500"
href="/variables/{variable.name}"
>
@@ -125,6 +126,7 @@
/>
{#if directInputsQuery.length > 0}
<button
+ aria-label="Effacer"
class="rounded-full p-2 transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 md:mr-1.5"
onclick={() => (directInputsQuery = "")}
>
@@ -190,6 +192,7 @@
/>
{#if allInputsQuery.length > 0}
<button
+ aria-label="Effacer"
class="rounded-full p-2 transition-all duration-200 ease-out-back hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 md:mr-1.5"
onclick={() => (allInputsQuery = "")}
>
diff --git a/src/routes/accueil/+page.svelte b/src/routes/accueil/+page.svelte
index 479382b34..a2fdc37df 100644
--- a/src/routes/accueil/+page.svelte
+++ b/src/routes/accueil/+page.svelte
@@ -467,7 +467,11 @@
</ul>
</div>
- <img class="ml-20 w-28 md:mt-6" src="/picto-affaires-sociales.svg" />
+ <img
+ alt="Illustration affaires sociales"
+ class="ml-20 w-28 md:mt-6"
+ src="/picto-affaires-sociales.svg"
+ />
</div>
</div>
<div class="col-span-4 md:col-span-2 xl:col-span-1">
@@ -575,6 +579,7 @@
class="col-span-4 justify-self-center font-serif text-lg lg:justify-self-end xl:col-span-2"
>
<img
+ alt="Exemple de simuation budgétaire"
class="m-5 max-h-[500px] rounded-lg border bg-white p-4 shadow-2xl"
src="welcome-capture-ecran-impact-budget.png"
/>
@@ -688,6 +693,7 @@
class="col-span-4 justify-self-center font-serif text-lg lg:col-span-2 lg:justify-self-end"
>
<img
+ alt="Exemple de fiche de paie"
class="m-5 max-h-[500px] rounded-lg border shadow-2xl"
src="welcome-capture-ecran-feuille-de-paie.png"
/>
@@ -764,6 +770,7 @@
class="col-span-4 justify-self-center font-serif text-lg lg:col-span-2 lg:justify-self-end"
>
<img
+ alt="Exemple de simulation d'un cas type"
class="m-5 max-h-[500px] rounded-lg border shadow-2xl"
src="welcome-capture-ecran-graphiques-cas-types.png"
/>
@@ -839,13 +846,11 @@
href="https://dai.ly/k7pPDs4uaxsCxbBehSc?start=333"
class="font-sans items-center gap-2 lx-link-uppercase mt-6 text-center"
>
- <iconify-icon
- class="text-2xl align-[-0.4rem] mr-1"
+ <iconify-icon class="text-2xl align-[-0.4rem] mr-1"
icon="twemoji:film-frames"
- />Voir la vidéo<iconify-icon
- class="text-xl align-[-0.2rem] ml-0.5"
+ ></iconify-icon>Voir la vidéo<iconify-icon class="text-xl align-[-0.2rem] ml-0.5"
icon="ri-external-link-line"
- /></a
+ ></iconify-icon></a
>
</div>
<div
@@ -918,6 +923,7 @@
class="col-span-4 justify-self-center font-serif text-lg lg:col-span-2 lg:justify-self-end"
>
<img
+ alt="Exemple de simulation gagnants-perdants"
class="m-5 max-h-[500px] rounded-lg border shadow-2xl"
src="welcome-capture-ecran-impact-gagnants-perdants.png"
/>
@@ -1058,6 +1064,7 @@
target="_blank"
>
<img
+ alt="Logo OpenFisca"
class="max-h-[100px] object-contain"
src="welcome-logo-europe-openfisca.png"
/>
@@ -1103,9 +1110,11 @@
@apply before:bg-le-jaune before:bg-opacity-65;
}
- .highlight-grey {
- @apply before:bg-[#C5C39C] before:bg-opacity-65;
- }
+ /*
+ .highlight-grey {
+ @apply before:bg-[#C5C39C] before:bg-opacity-65;
+ }
+ */
.fond {
background-color: #ffffff;
--
GitLab