Skip to content

Commit

Permalink
Accessibilité ♿️
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincentlaine
vincentlaine committed Nov 25, 2024
1 parent 3ec158c commit 2258099
Show file tree
Hide file tree
Showing 23 changed files with 2,550 additions and 2,653 deletions.
1 change: 1 addition & 0 deletions client/assets/dsfr.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@

.fr-tabs__list {
min-height: 0;
display: none;
}

.fr-tabs__panel {
Expand Down
23 changes: 16 additions & 7 deletions client/assets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ body {
overflow-x: hidden;
}

.sr-only{
.sr-only {
border: 0 !important;
clip: rect(1px,1px,1px,1px) !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
Expand Down Expand Up @@ -69,6 +69,8 @@ fieldset {
&__title {
color: var(--blue-france-sun-113-625);
line-height: 1.5rem;
display: flex;
align-items: center;
}

&__desc {
Expand All @@ -88,21 +90,28 @@ fieldset {

&-3 {
background-color: #FC4E2A;
color: var(--grey-1000-50);
color: #000;
}

&-2 {
background-color: #FEB24C;
color: var(--grey-1000-50);
color: #000;
}

&-1 {
background-color: #BCA12B;
color: var(--grey-1000-50);
background-color: #FFEDA0;
color: #000;
}

&-0 {
background-color: var(--info-950-100);
color: #000;
}
}

.fr-badge {
&.situation-level-bg-0, &.situation-level-bg-1, &.situation-level-bg-2, &.situation-level-bg-3, &.situation-level-bg-4 {
border: 1px solid currentColor;
}
}

Expand All @@ -120,7 +129,7 @@ fieldset {
}

&-1 {
color: #BCA12B;
color: #FFEDA0;
}

&-0 {
Expand Down
132 changes: 85 additions & 47 deletions client/components/FdrAutoComplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,7 @@ function convertRemToPixels(rem) {
function selectOption(option) {
optionSelected.value = option;
emit('update:modelValue', option);
if (inputSearchBar.value && inputSearchBar.value.$el.children[1]) {
nextTick(() => {
inputSearchBar.value.$el.children[1].focus();
});
}
inputSearchBar.value?.focus();
}
const displayAtTheTop = ref(false);
Expand Down Expand Up @@ -122,19 +118,18 @@ function checkKeyboardNav($event) {
$event.preventDefault();
}
if ($event.key === 'Enter') {
selectOption(props.options[activeOption.value > 0 ? activeOption.value : 0]);
selectOption(props.options[activeOption.value >= 0 ? activeOption.value : 0]);
hasFocus.value = false;
} else if ($event.key === 'ArrowUp') {
moveToPreviousOption();
} else if ($event.key === 'ArrowDown') {
moveToNextOption();
} else if ($event.key === 'search') {
if (!!props.options.length) {
selectOption(props.options[activeOption.value > 0 ? activeOption.value : 0]);
if (props.options.length) {
selectOption(props.options[activeOption.value >= 0 ? activeOption.value : 0]);
} else if (optionSelected.value) {
emit('update:modelValue', optionSelected.value);
}
hasFocus.value = false;
}
}
Expand All @@ -150,50 +145,68 @@ function displayOption(option) {
return toDisplay;
}
defineExpose({
focusInput: () => inputSearchBar.value.focus(),
});
</script>

<template>
<div ref="container"
class="relative search-autocomplete">
<DsfrSearchBar :model-value="modelValue"
:placeholder="placeholder"
:label="label"
v-bind="$attrs"
:required="required"
:large="!light"
:disabled="disabled"
buttonText="Rechercher"
@update:model-value="$emit('update:modelValue', $event)"
ref="inputSearchBar"
@focus="hasFocus = true"
@blur="looseFocus()"
@keydown="checkKeyboardNav($event)"
@search="checkKeyboardNav({key: 'search'})" />
<div v-if="displayOptions"
class="sr-only"
aria-live="polite"
aria-atomic="true">
<p>{{ options.length }} options disponibles</p>
<div class="fr-search-bar">
<DsfrInput label-visible
:model-value="modelValue"
:hint="placeholder"
:label="label"
v-bind="$attrs"
:required="required"
:large="!light"
:disabled="disabled"
role="combobox"
aria-autocomplete="list"
aria-expanded="true"
:aria-haspopup="displayOptions"
:autocomplete="hasFocus ? 'off' : 'address-line1'"
buttonText="Rechercher"
@update:model-value="$emit('update:modelValue', $event)"
ref="inputSearchBar"
@focus="hasFocus = true"
@blur="looseFocus()"
@keydown="checkKeyboardNav($event)" />
<DsfrButton title="Rechercher"
:disabled="disabled"
:aria-disabled="disabled"
@click="checkKeyboardNav({key: 'search'})">
Rechercher
</DsfrButton>
<div v-show="displayOptions"
class="sr-only"
aria-live="polite"
aria-atomic="true">
<p>{{ options.length }} options disponibles</p>
</div>
<ul v-show="displayOptions"
role="listbox"
:aria-label="ariaLabelList"
ref="optionsList"
tabindex="1"
class="list-none absolute m-0 right-0 z-1 left-0 bg-white box-shadow max-h-17 scroll pointer"
:class="{'at-the-top': displayAtTheTop,}">
<li v-for="(option, i) of options"
:key="option"
role="option"
tabindex="0"
:aria-selected="optionSelected === option"
class="list-item fr-p-1w fr-pl-2w"
:class="{ 'active-option': activeOption === i }"
@click.stop="selectOption(option)"
@keyup.enter="selectOption(option)">
{{ displayOption(option) }}
</li>
</ul>

</div>
<ul v-show="displayOptions"
role="listbox"
:aria-label="ariaLabelList"
ref="optionsList"
tabindex="1"
class="list-none absolute m-0 right-0 z-1 left-0 bg-white box-shadow max-h-17 scroll pointer"
:class="{'at-the-top': displayAtTheTop,}">
<li v-for="(option, i) of options"
:key="option"
role="option"
tabindex="0"
:aria-selected="optionSelected === option"
class="list-item fr-p-1w fr-pl-2w"
:class="{ 'active-option': activeOption === i }"
@click.stop="selectOption(option)"
@keyup.enter="selectOption(option)">
{{ displayOption(option) }}
</li>
</ul>
</div>
</template>

Expand Down Expand Up @@ -233,10 +246,35 @@ function displayOption(option) {
margin-top: 0;
padding: 0;
text-align: left;
top: 100%;
li {
cursor: pointer;
}
}
}
.fr-search-bar {
flex-wrap: wrap;
:deep(.fr-input), .fr-btn {
margin-top: .5rem;
flex: 1;
}
:deep(.fr-label) {
width: 100%;
height: auto;
position: relative;
}
/**
* Obligé de faire ça car la couleur est codée en dur dans le DSFR
* sans prendre en compte que ce champ pouvait être disabled.
*/
.fr-input:disabled {
box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
color: var(--text-disabled-grey);
}
}
</style>
4 changes: 0 additions & 4 deletions client/components/accueil/Carte.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,6 @@ const date = computed(() => {
height: 20px;
width: 20px;
}
.situation-level-bg-1 {
background-color: #FFEDA0;
}
}
&-drom {
Expand Down
3 changes: 2 additions & 1 deletion client/components/accueil/Gestes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ const selectedTagIndex: Ref<number> = ref(0);
<DsfrTabs class="tabs-light" v-model="selectedTagIndex">
<DsfrTabContent v-for="(tag, index) in gesteTags"
:panel-id="'tab-content-' + index"
:tab-id="'tab-' + index">
:tab-id="'tab-' + index"
role="">
<div class="fr-grid-row fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<GestesCard v-for="geste in gestesFiltered(tag)"
:geste="geste"
Expand Down
2 changes: 1 addition & 1 deletion client/components/accueil/Liens.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import liens from '../../data/liens.json'
target="_blank"
rel="external"
class="fr-link"
:title="lien.title + ' - nouvelle fenêtre'">
:title="lien.title + ' (nouvelle fenêtre)'">
{{ lien.title }}
</a>
</li>
Expand Down
5 changes: 0 additions & 5 deletions client/components/carte/Map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,11 +564,6 @@ h6 {
}
.map-legend, :deep(.maplibregl-popup-content) {
.situation-level-bg-1 {
background-color: #FFEDA0;
color: var(--grey-50-1000);
}
.situation-level-bg-0 {
background-color: #e8edff;
color: var(--grey-50-1000);
Expand Down
31 changes: 22 additions & 9 deletions client/components/carte/Table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,15 +127,17 @@ watch(() => props, () => {
<h3 class="fr-mt-2w fr-mb-1w fr-h4">{{ pageTitle }}</h3>
<div class="fr-grid-row fr-grid-row--center departement-card-wrapper fr-mb-2w">
<div class="fr-col-lg fr-p-2w fr-m-1w departement-card" v-for="resume of dataResume">
<div>
<DsfrBadge small
no-icon
:class="classObject(utils.getRestrictionRank(resume.niveauGravite))"
:label="resume.label" />
</div>
<div class="departement-card__number fr-mt-1w">
{{ resume.number }} départements
</div>
<ul>
<li>
<DsfrBadge small
no-icon
:class="classObject(utils.getRestrictionRank(resume.niveauGravite))"
:label="resume.label" />
</li>
<li class="departement-card__number fr-mt-1w">
{{ resume.number }} départements
</li>
</ul>
</div>
</div>
</div>
Expand All @@ -148,6 +150,7 @@ watch(() => props, () => {
placeholder="Rechercher"
large
buttonText="Rechercher"
title="Rechercher un département"
ref="input"
@search="checkKeyboardNav({key: 'search'})" />
<DsfrTable :title="tableTitle"
Expand Down Expand Up @@ -212,6 +215,16 @@ watch(() => props, () => {
&-wrapper {
margin: 0 -0.5rem;
}
ul {
margin: 0;
padding: 0;
}
li {
padding: 0;
list-style-type: none;
}
}
.fr-table {
Expand Down
4 changes: 2 additions & 2 deletions client/components/gestes/Callout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<img src="/callout_simulateur.svg"
style="max-width: 100%"
width="120" height="121"
alt="Arrosoir"
alt=""
/>
</div>
<div class="fr-col-12 callout--text">
Expand All @@ -17,7 +17,7 @@
id="matomo_calculateur_consommation"
target="_blank"
rel="external"
title="Je découvre le calculateur Cieau - nouvelle fenêtre"
title="Je découvre le calculateur Cieau (nouvelle fenêtre)"
href="https://www.cieau.com/le-metier-de-leau/usages-consommation-conseils/calculateur-consommation-eau-annuelle/">
Je découvre le calculateur Cieau
</a>
Expand Down
5 changes: 3 additions & 2 deletions client/components/mail/MailForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ const submitForm = async () => {
:disabled="subscribing"
:exactAddress="true"
:aria-invalid="v$.lon.$errors.length > 0"
:required="true"
@search="setAddress($event.address, $event.geo)"
/>
</DsfrInputGroup>
Expand All @@ -154,7 +155,7 @@ const submitForm = async () => {

<DsfrInputGroup class="fr-mt-2w"
:error-message="utils.showInputError(v$, 'email')">
<DsfrInput placeholder="Ex: [email protected]"
<DsfrInput hint="Ex: [email protected]"
label="Entrez votre email"
label-visible
v-model="formData.email"
Expand All @@ -180,7 +181,7 @@ const submitForm = async () => {
</DsfrInputGroup>

<p>Les
<router-link to="/donnees-personnelles" target="_blank" title="Données collectées - nouvelle fenêtre">données collectées</router-link>
<router-link to="/donnees-personnelles" target="_blank" title="Données collectées (nouvelle fenêtre)">données collectées</router-link>
lors de votre inscription sont utilisées dans le cadre d’une mission de
service public dont les responsables de traitement sont la Direction générale de l’Aménagement, du Logement et de
la Nature (DGALN).
Expand Down
Loading

0 comments on commit 2258099

Please sign in to comment.