Skip to content

Commit

Permalink
a11y: découpage de la page en landmark et liens d'évitement
Browse files Browse the repository at this point in the history
  • Loading branch information
@thom4parisot
thom4parisot committed May 21, 2024
1 parent c45d45e commit b6ed1c2
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 49 deletions.
19 changes: 12 additions & 7 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,23 @@

<RouterView v-slot="{ Component, route }">
<Suspense>
<component
:is="Component"
:key="route.meta.usePathKey ? route.path : undefined"
/>
<template #default>
<main id="content">
<component
:is="Component"
:key="route.meta.usePathKey ? route.path : undefined"
/>
</main>
</template>

<template #fallback>
<div class="fr-container fr-py-9v">
<main class="fr-container fr-py-9v" id="content">
<div class="fr-grid-row">
<div class="fr-col-12">
<Spinner class="fr-h5">Chargement des données…</Spinner>
<Spinner class="fr-h5">Chargement des données …</Spinner>
</div>
</div>
</div>
</main>
</template>
</Suspense>
</RouterView>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MainFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<div class="fr-container">
<div class="fr-footer__body">
<div class="fr-footer__brand fr-enlarge-link">
<a href="/" title="Retour à l’accueil">
<p class="fr-logo" title="république française">
<a href="https://agencebio.org" title="Accéder au site de l'Agence Bio" tabindex="-1">
<p class="fr-logo" title="République française">
République<br>
française
</p>
Expand Down
23 changes: 15 additions & 8 deletions src/components/MainHeader.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,19 @@ describe("MainHeader", () => {
vi.unstubAllEnvs()
})

test('skip links target content, menu and footer', () => {
const wrapper = mount(MainHeader)
const result = wrapper.findAll('.fr-skiplinks .fr-link').map(w => w.attributes('href'))

expect(result).toEqual(['#content', '#header-navigation', '#footer'])
})

test("as a guest", () => {
const wrapper = mount(MainHeader)

expect(wrapper.find('.tool-username').exists()).toEqual(false)
expect(wrapper.find('.fr-header__tools').text()).toEqual('À propos Aide Connexion')
expect(wrapper.find('[role="navigation"]').text()).toEqual('Aide À propos de CartoBio Connexion')
expect(wrapper.find('.fr-nav[role="navigation"]').text()).toEqual('Aide À propos de CartoBio Connexion')
})

test("with a warning header", async () => {
Expand Down Expand Up @@ -62,9 +69,9 @@ describe("MainHeader", () => {
await flushPromises()

expect(wrapper.find('.tool-username a').classes('fr-icon-medal-fill')).toEqual(true)
expect(wrapper.find('[role="navigation"]').text()).toEqual('Nom Aide À propos de CartoBio Déconnexion')
expect(wrapper.find('[role="navigation"] a').attributes('href')).toEqual('/certification/exploitations')
expect(wrapper.find('[role="navigation"] a[target="_blank"]').attributes('href')).toEqual('https://docs-cartobio.agencebio.org/organisme-certification')
expect(wrapper.find('.fr-nav[role="navigation"]').text()).toEqual('Nom Aide À propos de CartoBio Déconnexion')
expect(wrapper.find('.fr-nav[role="navigation"] a').attributes('href')).toEqual('/certification/exploitations')
expect(wrapper.find('.fr-nav[role="navigation"] a[target="_blank"]').attributes('href')).toEqual('https://docs-cartobio.agencebio.org/organisme-certification')

await wrapper.find('.tool-logout a').trigger('click')
await flushPromises()
Expand All @@ -78,9 +85,9 @@ describe("MainHeader", () => {
await flushPromises()

expect(wrapper.find('.tool-username a').classes('fr-icon-plant-fill')).toEqual(true)
expect(wrapper.find('[role="navigation"]').text()).toEqual('Nom Aide À propos de CartoBio Déconnexion')
expect(wrapper.find('[role="navigation"] a').attributes('href')).toEqual('/exploitations')
expect(wrapper.find('[role="navigation"] a[target="_blank"]').attributes('href')).toEqual('https://docs-cartobio.agencebio.org/agriculteurs.trices')
expect(wrapper.find('.fr-nav[role="navigation"]').text()).toEqual('Nom Aide À propos de CartoBio Déconnexion')
expect(wrapper.find('.fr-nav[role="navigation"] a').attributes('href')).toEqual('/exploitations')
expect(wrapper.find('.fr-nav[role="navigation"] a[target="_blank"]').attributes('href')).toEqual('https://docs-cartobio.agencebio.org/agriculteurs.trices')
})

test("as unknown role", async () => {
Expand All @@ -91,6 +98,6 @@ describe("MainHeader", () => {
await flushPromises()

expect(wrapper.find('.tool-username a').classes('fr-icon-account-circle-fill')).toEqual(true)
expect(wrapper.find('[role="navigation"]').text()).toEqual('Nom Aide À propos de CartoBio Déconnexion')
expect(wrapper.find('.fr-nav[role="navigation"]').text()).toEqual('Nom Aide À propos de CartoBio Déconnexion')
})
})
72 changes: 40 additions & 32 deletions src/components/MainHeader.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,19 @@
<template>
<div class="fr-skiplinks">
<nav role="navigation" aria-label="Accès rapide" class="fr-container">
<ul class="fr-skiplinks__list">
<li>
<a class="fr-link" href="#content">Contenu</a>
</li>
<li>
<a class="fr-link" href="#header-navigation">Menu</a>
</li>
<li>
<a class="fr-link" href="#footer">Pied de page</a>
</li>
</ul>
</nav>
</div>
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
Expand All @@ -12,7 +27,8 @@
</div>

<div class="fr-header__operator">
<img src="@/assets/logo-agence-bio.svg" class="fr-responsive-img fr-hidden fr-unhidden-lg logo" alt="L'Agence Bio" />
<img src="@/assets/logo-agence-bio.svg" class="fr-responsive-img fr-hidden fr-unhidden-lg logo"
alt="L'Agence Bio" />
</div>
</div>

Expand All @@ -23,55 +39,47 @@
</p>
</router-link>

<p class="fr-header__service-tagline fr-hidden fr-unhidden-sm">Parcellaire cultivé en Agriculture Biologique</p>
<p class="fr-header__service-tagline fr-hidden fr-unhidden-sm">Parcellaire cultivé en Agriculture
Biologique</p>
</div>

<div class="fr-header__navbar">
<button
title="Menu"
class="fr-btn--menu fr-btn"
id="mobile-menu-button"
:data-fr-opened="menuIsOpen"
aria-controls="mobile-menu"
aria-haspopup="menu"
@click="menuIsOpen = !menuIsOpen"
>
<button title="Menu" class="fr-btn--menu fr-btn" id="mobile-menu-button" :data-fr-opened="menuIsOpen"
aria-controls="mobile-menu" aria-haspopup="menu" @click="menuIsOpen = !menuIsOpen">
Menu
</button>
</div>
</div>

<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<ul class="fr-btns-group" id="header-navigation">
<li>
<router-link to="/projet" class="fr-btn">
À propos
</router-link>
</li>
<li>
<a :href="documentationPage" target="_blank" class="fr-btn fr-btn--icon-left fr-icon-questionnaire-fill">
<a :href="documentationPage" target="_blank"
class="fr-btn fr-btn--icon-left fr-icon-questionnaire-fill">
Aide
</a>
</li>
</ul>
<ul class="fr-btns-group" v-if="isLogged">
<li class="tool-username" aria-hidden="true">
<li class="tool-username" aria-hidden="true" v-if="isLogged">
<router-link :to="startPage" :class="['fr-btn', 'fr-mr-1w', roleIcon]">
{{ user.nom }}
</router-link>
</li>
<li class="tool-logout">
<li class="tool-logout" v-if="isLogged">
<router-link to="/logout" custom v-slot="{ href }">
<a :href="href" class="fr-btn fr-icon--sm fr-icon-logout-box-r-line" @click.prevent="logout">
Déconnexion
</a>
</router-link>
</li>
</ul>
<ul class="fr-btns-group" v-else>
<li>
<router-link to="/login" class="fr-btn fr-icon-account-circle-fill fr-btn--icon-left" aria-role="button">
<li v-if="!isLogged">
<router-link to="/login" class="fr-btn fr-icon-account-circle-fill fr-btn--icon-left"
aria-role="button">
Connexion
</router-link>
</li>
Expand All @@ -81,12 +89,8 @@
</div>
</div>

<div
class="fr-header__menu fr-modal fr-hidden-lg"
id="mobile-menu"
:class="{ 'fr-modal--opened': menuIsOpen }"
aria-labelledby="mobile-menu-button"
>
<div class="fr-header__menu fr-modal fr-hidden-lg" id="mobile-menu" :class="{ 'fr-modal--opened': menuIsOpen }"
aria-labelledby="mobile-menu-button">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="mobile-menu" title="Fermer" @click="menuIsOpen = false">
Fermer
Expand All @@ -95,12 +99,14 @@
<nav class="fr-nav" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item" v-if="isLogged">
<router-link :to="startPage" class="fr-nav__link fr-btn--icon-left" :class="roleIcon" aria-current="false">
<router-link :to="startPage" class="fr-nav__link fr-btn--icon-left" :class="roleIcon"
aria-current="false">
{{ user.nom }}
</router-link>
</li>
<li class="fr-nav__item">
<a :href="documentationPage" target="_blank" rel="noopener" class="fr-nav__link fr-btn--icon-left fr-icon-questionnaire-fill">
<a :href="documentationPage" target="_blank" rel="noopener"
class="fr-nav__link fr-btn--icon-left fr-icon-questionnaire-fill">
Aide
</a>
</li>
Expand All @@ -110,12 +116,14 @@
</router-link>
</li>
<li class="fr-nav__item fr-hidden-lg">
<router-link v-if="isLogged" to="/logout" custom v-slot="{ href }">
<a :href="href" @click.prevent="logout" class="fr-nav__link fr-btn--icon-left fr-icon-logout-box-r-line">
<router-link v-if="isLogged" to="/logout" custom v-slot="{ href }">
<a :href="href" @click.prevent="logout"
class="fr-nav__link fr-btn--icon-left fr-icon-logout-box-r-line">
Déconnexion
</a>
</router-link>
<router-link v-else to="/login" aria-role="button" class="fr-nav__link fr-btn--icon-left fr-icon-account-circle-fill">
<router-link v-else to="/login" aria-role="button"
class="fr-nav__link fr-btn--icon-left fr-icon-account-circle-fill">
Connexion
</router-link>
</li>
Expand Down

0 comments on commit b6ed1c2

Please sign in to comment.