diff --git a/src/app/admin/admin.scss b/src/app/admin/admin.scss
index 353c296646fd3c6298549cb31dad6b7288a4bfd5..2dc3064b906cb0bf418fe137d1c5834844d9a923 100644
--- a/src/app/admin/admin.scss
+++ b/src/app/admin/admin.scss
@@ -1,6 +1,6 @@
@import 'color';
-header {
+.header {
padding-top: 32px;
display: flex;
flex-direction: column;
diff --git a/src/app/admin/components/manage-jobs/attached-users/attached-users.component.html b/src/app/admin/components/manage-jobs/attached-users/attached-users.component.html
index 79877cac0ab7c1eb696546681aa1d23945ca5ed9..55e61d2fd1baa93608f24d2ba0ef271ffc816c5a 100644
--- a/src/app/admin/components/manage-jobs/attached-users/attached-users.component.html
+++ b/src/app/admin/components/manage-jobs/attached-users/attached-users.component.html
@@ -1,6 +1,6 @@
<div *ngIf="users.data.users && users.data.users.length !== 0">
<p *ngFor="let user of users.data.users">
- <span tabindex="0" (click)="goToManageUsers()" (keyup.enter)="goToManageUsers()">
+ <span role="button" tabindex="0" (click)="goToManageUsers()" (keyup.enter)="goToManageUsers()">
{{ user.name }} {{ user.surname }} - {{ user.email }}
</span>
</p>
diff --git a/src/app/admin/components/manage-users/manage-users.component.html b/src/app/admin/components/manage-users/manage-users.component.html
index 4549c91f7be2d097398a88cf44b24f88e768bf6d..2dd43a6928cc8e3f6c05094a7cda542dde86f32b 100644
--- a/src/app/admin/components/manage-users/manage-users.component.html
+++ b/src/app/admin/components/manage-users/manage-users.component.html
@@ -25,7 +25,7 @@
<h3 *ngIf="unAttachedUsers" class="title inline">
Utilisateurs non rattachés ({{ unAttachedUsers.length }})
- <app-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (click)="exportUsers('unattached')" />
+ <app-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (action)="exportUsers('unattached')" />
</h3>
<ag-grid-angular
@@ -44,7 +44,7 @@
<h3 *ngIf="attachedUsers" class="title inline">
Utilisateurs rattachés ({{ attachedUsers.length }})
- <app-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (click)="exportUsers('attached')" />
+ <app-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (action)="exportUsers('attached')" />
</h3>
<ag-grid-angular
*ngIf="validatedJobs && validatedEmployers"
diff --git a/src/app/admin/components/nav-bar/nav-bar.component.html b/src/app/admin/components/nav-bar/nav-bar.component.html
index f077ae671a5984e89d00d79a23e34af492139e0d..d03c00d6c7d0465d9cbc9c3517b85bcaf583f278 100644
--- a/src/app/admin/components/nav-bar/nav-bar.component.html
+++ b/src/app/admin/components/nav-bar/nav-bar.component.html
@@ -1,37 +1,37 @@
-<header>
+<div class="header">
<h1>Administration</h1>
<nav>
<app-button
[label]="'Revendication structure'"
[variant]="'secondary'"
- (click)="router.navigateByUrl(routes.pendingStructures.link)"
+ (action)="router.navigateByUrl(routes.pendingStructures.link)"
/>
<app-button
[label]="'Liste structures'"
[variant]="'secondary'"
- (click)="router.navigateByUrl(routes.structuresList.link)"
+ (action)="router.navigateByUrl(routes.structuresList.link)"
/>
<app-button
[label]="'Structures supprimées'"
[variant]="'secondary'"
- (click)="router.navigateByUrl(routes.deletedStructures.link)"
+ (action)="router.navigateByUrl(routes.deletedStructures.link)"
/>
<app-button
[label]="'Gestion des utilisateurs'"
[variant]="'secondary'"
- (click)="router.navigateByUrl(routes.manageUsers.link)"
+ (action)="router.navigateByUrl(routes.manageUsers.link)"
/>
<app-button [label]="'Fonctions'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.jobsList.link)" />
<app-button
[label]="'Employeurs'"
[variant]="'secondary'"
- (click)="router.navigateByUrl(routes.employersList.link)"
+ (action)="router.navigateByUrl(routes.employersList.link)"
/>
<app-button
[label]="'CNFS Espace Coop'"
[variant]="'secondary'"
- (click)="router.navigateByUrl(routes.espaceCoopCNFS.link)"
+ (action)="router.navigateByUrl(routes.espaceCoopCNFS.link)"
/>
- <app-button [variant]="'tertiary'" [label]="'Ghost'" (click)="openGhost()" />
+ <app-button [variant]="'tertiary'" [label]="'Ghost'" (action)="openGhost()" />
</nav>
-</header>
+</div>
diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html
index e25bf4cb1be1d60a38b5d0a2cc18058e9f108b65..5031c5b066464b4fa47cd546d7e4c959b3baa6ee 100644
--- a/src/app/annuaire/filter-modal/filter-modal.component.html
+++ b/src/app/annuaire/filter-modal/filter-modal.component.html
@@ -12,8 +12,8 @@
</div>
<div class="modalFooter">
- <app-button [variant]="'secondary'" [label]="'Effacer'" (click)="clearFilters()" />
- <app-button [variant]="'primary'" [label]="'Appliquer'" (click)="onSubmitFilters()" />
+ <app-button [variant]="'secondary'" [label]="'Effacer'" (action)="clearFilters()" />
+ <app-button [variant]="'primary'" [label]="'Appliquer'" (action)="onSubmitFilters()" />
</div>
</div>
</div>
diff --git a/src/app/annuaire/result-list/result-list.component.html b/src/app/annuaire/result-list/result-list.component.html
index 0b198da379a9c7bf7f41324b307ef359b620d67e..698532a6662266dea585e5e6e9fd91220e787099 100644
--- a/src/app/annuaire/result-list/result-list.component.html
+++ b/src/app/annuaire/result-list/result-list.component.html
@@ -1,7 +1,7 @@
<div class="results" id="resultList">
<div *ngIf="!isLogged && !isLoading" class="notConnected">
- <img src="../../assets/ico/annuaire-unlogged.svg" alt="Illustration annuaire" />
- <div class="count" [ngPlural]="totalUserResult">
+ <img src="../../assets/ico/annuaire-unlogged.svg" alt="" />
+ <div class="count" aria-live="polite" [ngPlural]="totalUserResult">
<ng-template ngPluralCase="0">Aucun membre n'est présent dans l'annuaire Rés'in</ng-template>
<ng-template ngPluralCase="1">1 membre est présent dans l'annuaire Rés'in</ng-template>
<ng-template ngPluralCase="other">
@@ -30,7 +30,6 @@
<p class="noResult">Aucun résultat ne correspond à vos filtres</p>
<p class="filtersInfo">Merci de réinitialiser ou modifier les filtres afin d'élargir votre recherche</p>
<app-button
- tabindex="0"
[variant]="'primary'"
[wide]="true"
[label]="'Réinitialiser les filtres'"
@@ -39,17 +38,20 @@
(click)="resetFilters()"
/>
</ng-container>
- <div *ngIf="userList.length" class="users">
+ <div *ngIf="userList.length" role="list" class="users">
<app-member-card
*ngFor="let user of userList"
+ role="listitem"
[member]="user"
[showAppointment]="true"
[showContactInfo]="false"
[showEmployer]="true"
+ (keydown)="onMemberCardKeydown($event)"
/>
<div *ngIf="showPagination && !isLoading" class="pagination">
<p>{{ userList.length }} membres affichés sur {{ totalUserResult }}</p>
<app-button
+ aria-live="polite"
[label]="'Voir plus'"
[variant]="'primaryBlack'"
[size]="'medium'"
@@ -61,6 +63,6 @@
</div>
</ng-container>
<div *ngIf="isLoading" class="loader" aria-busy="true">
- <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+ <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt="Chargement en cours" />
</div>
</div>
diff --git a/src/app/annuaire/result-list/result-list.component.ts b/src/app/annuaire/result-list/result-list.component.ts
index 032a7672dd146bec945c5a7c96d162ee186ea249..5a112acbb32f0ed00e61c7c64f2cef20d1e07d22 100644
--- a/src/app/annuaire/result-list/result-list.component.ts
+++ b/src/app/annuaire/result-list/result-list.component.ts
@@ -1,4 +1,13 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnChanges,
+ Output,
+ SimpleChanges,
+} from '@angular/core';
import { Router } from '@angular/router';
import { UserAnnuary } from '../../models/user.model';
import { WindowScrollService } from '../../shared/service/windowScroll.service';
@@ -12,6 +21,7 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
constructor(
private router: Router,
private windowScrollService: WindowScrollService,
+ private elementRef: ElementRef,
) {}
@Input() userList: UserAnnuary[];
@Input() totalUserResult: number;
@@ -21,13 +31,13 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
@Output() showMoreEvent = new EventEmitter<void>();
public maxPerPage = 20;
public showPagination = false;
+ public keyboardEvent = false;
+ public nextChildIndex: number;
ngAfterViewInit(): void {
- // Delay required before all member-card components are displayed on the page
- setTimeout(
- () => document.getElementById('app-body')?.scrollTo({ top: this.windowScrollService.scrollYToPreserve.value }),
- 10,
- );
+ requestAnimationFrame(() => {
+ document.getElementById('app-body')?.scrollTo({ top: this.windowScrollService.scrollYToPreserve.value });
+ });
}
ngOnChanges(changes: SimpleChanges): void {
@@ -35,6 +45,13 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
this.showPagination = true;
}
if (this.userList.length >= this.totalUserResult) this.showPagination = false;
+
+ // Accessibility: after click on "view more" button, send focus to the first newly displayed member card
+ if (this.keyboardEvent && this.nextChildIndex) {
+ requestAnimationFrame(() => {
+ this.setFocusOnFirstNewMemberCard();
+ });
+ }
}
public goToUser(userId: string): void {
this.router.navigateByUrl(`/profile/${userId}`);
@@ -48,7 +65,29 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
public resetFilters(): void {
this.resetEvent.emit();
}
+
+ public onMemberCardKeydown(event: KeyboardEvent): void {
+ switch (event.key) {
+ case 'ArrowUp':
+ case 'ArrowDown':
+ case 'Tab':
+ this.keyboardEvent = true;
+ break;
+ }
+ }
+
+ private setFocusOnFirstNewMemberCard(): void {
+ const lastFocusedMemberCard = this.elementRef.nativeElement.querySelector(
+ `.users app-member-card:nth-child(${this.nextChildIndex}) > div`,
+ );
+ if (lastFocusedMemberCard) {
+ const focusedElement = lastFocusedMemberCard as HTMLElement;
+ focusedElement.focus();
+ }
+ }
+
public showMore(): void {
+ this.nextChildIndex = this.userList.length + 1;
this.showMoreEvent.emit();
}
}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9c6e35adc207da6636b821a60bbdc541f1c0d7af..9adfa5413a0b0980f236410b9febbb3921f063f5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
<app-header />
-<div class="app-container">
+<main class="app-container">
<div class="app-body" id="app-body" (scroll)="onScroll($event)">
<div *ngIf="loading" class="loader" aria-busy="true">
<img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
@@ -8,7 +8,7 @@
<router-outlet name="left-pane" />
<router-outlet />
</ng-container>
- <router-outlet *ngIf="!loading" name="footer" />
</div>
-</div>
+</main>
+<router-outlet *ngIf="!loading" name="footer" />
<router-outlet name="print" />
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index 3f0f49a0d6b10ba0bb3bd0f6b54a6460c488b67e..0b76199a2383159518a8eeedbed01856fd89361a 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -48,7 +48,7 @@
/>
<div class="buttons">
- <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
+ <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="goToHome()" />
<app-button
[type]="'submit'"
[variant]="'primary'"
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index 1e1231ad352dd4c841d7d160ed808c170660ed3d..eb9b1c73cc5d10ae54c5bb424b0e9625b4baaebc 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -57,6 +57,10 @@ export class ContactComponent implements OnInit {
return this.authService.getUserEmailDisplay();
}
+ public goToHome(): void {
+ this.router.navigateByUrl('/home');
+ }
+
public onSubmit(): void {
this.loading = true;
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 58d5ad453b5f6400b26bbe3a71dc16101f38fc62..358806c4bd7cde2478e982a69243de8f71b63880 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -15,7 +15,7 @@
target="_blank"
rel="noopener noreferrer"
>
- <img class="logo-grand-lyon" src="/assets/logos/linkedin.svg" alt role="img" />
+ <img class="logo-grand-lyon" src="/assets/logos/linkedin.svg" alt />
Linkedin
</a>
<a
@@ -25,7 +25,7 @@
target="_blank"
rel="noopener noreferrer"
>
- <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt role="img" />
+ <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
<p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
</a>
</div>
diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
index f74cea5bb71f617948053df17934d94b62660fd9..42f1c9a4e3449b821bc1fafd3f740be7187de921 100644
--- a/src/app/form/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -25,7 +25,6 @@ export class FooterFormComponent {
@Input() nbPagesForm: number;
@Input() form: UntypedFormGroup;
@Input() linkedStructureId: string[] = null;
- @Input() acceptNewsletter: boolean;
@Input() currentStep: stepType;
@Input() hasOtherPersonalOffer: boolean;
@Input() isPersonalOfferProfile: boolean;
@@ -102,7 +101,7 @@ export class FooterFormComponent {
user.structuresLink = this.linkedStructureId;
try {
await firstValueFrom(this.authService.register(user));
- if (this.acceptNewsletter) {
+ if (this.form.value.hasAcceptedNewsletter) {
this.newsletterService.subscribe(user.email).subscribe();
}
document.getElementsByClassName('page')[0].scrollTo(0, 0);
diff --git a/src/app/form/form-view/account-form/account-form.component.html b/src/app/form/form-view/account-form/account-form.component.html
index c6d69a41d236a6c4ed5ee2464f1a1f501b5db3ae..4c8b83fadb82ef05343c76feffd26c5f35c04fa5 100644
--- a/src/app/form/form-view/account-form/account-form.component.html
+++ b/src/app/form/form-view/account-form/account-form.component.html
@@ -12,11 +12,7 @@
/>
</ng-container>
<ng-container *ngIf="currentStep === accountFormStepEnum.accountNewsletter">
- <app-account-newsletter
- [accountForm]="accountForm"
- [profile]="profile"
- (acceptNewsletter)="acceptReceiveNewsletter($event)"
- />
+ <app-account-newsletter [accountForm]="accountForm" [profile]="profile" (validateForm)="setValidationsForm()" />
</ng-container>
<ng-container *ngIf="currentStep === accountFormStepEnum.confirmEmailSentInfo">
<app-information-step [step]="accountFormStepEnum.confirmEmailSentInfo" [formType]="formType.account" />
diff --git a/src/app/form/form-view/account-form/account-form.component.ts b/src/app/form/form-view/account-form/account-form.component.ts
index f944c1b249714b7acedabdf786a72b151f8468ec..a16940f4a85b39947fed0016dfcbc71be8e0350a 100644
--- a/src/app/form/form-view/account-form/account-form.component.ts
+++ b/src/app/form/form-view/account-form/account-form.component.ts
@@ -50,7 +50,7 @@ export class AccountFormComponent implements OnInit, OnChanges {
this.accountForm.get('confirmPassword').valid,
};
this.pagesValidation[accountFormStep.accountNewsletter] = {
- valid: true,
+ valid: this.accountForm.get('hasAcceptedNewsletter').value !== null,
};
this.pagesValidation[accountFormStep.confirmEmailSentInfo] = {
valid: true,
@@ -74,7 +74,4 @@ export class AccountFormComponent implements OnInit, OnChanges {
const isPageValid = this.pagesValidation[this.currentStep].valid;
this.pageValid.emit(isPageValid);
}
- public acceptReceiveNewsletter(accept: boolean): void {
- this.acceptNewsletter.emit(accept);
- }
}
diff --git a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html
index 25656d5750eb5f2f829abc49ff06147b8860c183..b72dd38756c724eadba48ce907057e5d97495cdb 100644
--- a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html
+++ b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html
@@ -8,14 +8,14 @@
[id]="'yes'"
[label]="'Oui'"
[value]="true"
- [selected]="userAcceptNewsletter"
+ [selected]="accountForm.get('hasAcceptedNewsletter').value === true"
(click)="acceptReceiveNewsletter(true)"
/>
<app-radio-option
[id]="'no'"
[label]="'Non'"
[value]="false"
- [selected]="!userAcceptNewsletter"
+ [selected]="accountForm.get('hasAcceptedNewsletter').value === false"
(click)="acceptReceiveNewsletter(false)"
/>
</div>
diff --git a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts
index 952d50bd8112cd4e819266599ec7a99929e4ff19..64c37f011c53d3395363cf828cfe3d94affc20c8 100644
--- a/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts
+++ b/src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts
@@ -9,11 +9,10 @@ import { User } from '../../../../models/user.model';
export class AccountNewsletterComponent {
@Input() accountForm: UntypedFormGroup;
@Input() profile: User;
- @Output() acceptNewsletter = new EventEmitter<any>();
- public userAcceptNewsletter = false;
+ @Output() validateForm = new EventEmitter<any>();
public acceptReceiveNewsletter(accepts: boolean): void {
- this.userAcceptNewsletter = accepts;
- this.acceptNewsletter.emit(accepts);
+ this.accountForm.get('hasAcceptedNewsletter').setValue(accepts);
+ this.validateForm.emit();
}
}
diff --git a/src/app/form/form-view/form-view.component.html b/src/app/form/form-view/form-view.component.html
index 4b92517b4b06dc7d6204922485af368002596050..8c3a89528ec34991b8a449a29576fae58b35498d 100644
--- a/src/app/form/form-view/form-view.component.html
+++ b/src/app/form/form-view/form-view.component.html
@@ -25,7 +25,6 @@
[isAccountMode]="isAccountMode"
(goNext)="nextPage()"
(pageValid)="validatePage($event)"
- (acceptNewsletter)="acceptReceiveNewsletter($event)"
/>
<app-profile-form
*ngIf="formType[routeParam] === formType.profile"
@@ -66,7 +65,6 @@
[form]="currentForm"
[linkedStructureId]="linkedStructureId"
[isValid]="isPageValid"
- [acceptNewsletter]="userAcceptNewsletter"
[hasOtherPersonalOffer]="hasOtherPersonalOffer"
[isPersonalOfferProfile]="isPersonalOfferProfile"
[isEditMode]="isEditMode"
diff --git a/src/app/form/form-view/form-view.component.ts b/src/app/form/form-view/form-view.component.ts
index fd71532bec513c49b336d141c10fcc3eff2da56f..bbff09df452667b65488264d2fc4405f7f43c33f 100644
--- a/src/app/form/form-view/form-view.component.ts
+++ b/src/app/form/form-view/form-view.component.ts
@@ -37,7 +37,6 @@ export class FormViewComponent implements OnInit, AfterViewInit {
public formUtils = new FormUtils();
// Account Form
public accountForm: UntypedFormGroup;
- public userAcceptNewsletter: boolean;
// Profile Form
public profileForm: UntypedFormGroup;
public isPersonalOfferProfile = false;
@@ -214,6 +213,7 @@ export class FormViewComponent implements OnInit, AfterViewInit {
Validators.pattern(CustomRegExp.PASSWORD), // NOSONAR
]),
confirmPassword: new UntypedFormControl(''),
+ hasAcceptedNewsletter: new UntypedFormControl(null),
},
[MustMatch('password', 'confirmPassword')],
);
@@ -235,10 +235,6 @@ export class FormViewComponent implements OnInit, AfterViewInit {
});
}
- public acceptReceiveNewsletter(isAccepted: boolean): void {
- this.userAcceptNewsletter = isAccepted;
- }
-
private createPersonalOfferForm(personalOffer: PersonalOffer): void {
this.personalOfferForm = new UntypedFormGroup({
categories: new UntypedFormGroup({
diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.html b/src/app/form/form-view/global-components/information-step/information-step.component.html
index 7dd1b5176502db8014c72736cf3a1349bb8e2816..5f564df4e862c908f3df0ebe926958aebb977918 100644
--- a/src/app/form/form-view/global-components/information-step/information-step.component.html
+++ b/src/app/form/form-view/global-components/information-step/information-step.component.html
@@ -6,7 +6,7 @@
<h3>Un email vous a été envoyé afin de finaliser votre inscription</h3>
</div>
<div class="btnContainer">
- <app-button [variant]="'primary'" [wide]="true" [label]="'Terminer'" (click)="goToHome()" />
+ <app-button [variant]="'primary'" [wide]="true" [label]="'Terminer'" (action)="goToHome()" />
</div>
</ng-container>
@@ -18,8 +18,8 @@
</div>
<div class="btnContainer">
<div class="btnGroup">
- <app-button [label]="'Plus tard'" [variant]="'secondary'" (click)="goToHome()" />
- <app-button [label]="'C\'est parti !'" [variant]="'primary'" (click)="goToNextPage()" />
+ <app-button [label]="'Plus tard'" [variant]="'secondary'" (action)="goToHome()" />
+ <app-button [label]="'C\'est parti !'" [variant]="'primary'" (action)="goToNextPage()" />
</div>
</div>
</ng-container>
@@ -77,7 +77,7 @@
</p>
</div>
<div class="btnContainer">
- <app-button [variant]="'primary'" [wide]="true" [label]="'J\'ai compris'" (click)="goBackProfile()" />
+ <app-button [variant]="'primary'" [wide]="true" [label]="'J\'ai compris'" (action)="goBackProfile()" />
</div>
</ng-container>
@@ -90,7 +90,7 @@
<h3>Merci, les informations de votre profil ont été mises à jour</h3>
</div>
<div class="btnContainer">
- <app-button [variant]="'primary'" [wide]="true" [label]="'Voir mon compte'" (click)="goBackProfile()" />
+ <app-button [variant]="'primary'" [wide]="true" [label]="'Voir mon compte'" (action)="goBackProfile()" />
</div>
</ng-container>
</div>
diff --git a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html
index 2863ff1d639c71c7ad76a80b5e49178e67617def..e49b6babab9a221a558aaf33fae290db573e6469 100644
--- a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html
+++ b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html
@@ -17,14 +17,15 @@
/>
<div class="scroll">
<div *ngIf="!isAlreadySearching" class="autocomplete-items">
- <p
+ <div
*ngFor="let employer of employers"
+ role="button"
tabindex="0"
(click)="selectedResult(employer)"
(keyup.enter)="selectedResult(employer)"
>
- {{ employer.name }}
- </p>
+ <p>{{ employer.name }}</p>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html
index 872fe459bf5c864333b6c3cdf3d1f703f839f00b..9536fdca728092bc2ad1385fb1a6b017e37d0a85 100644
--- a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html
+++ b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html
@@ -20,6 +20,7 @@
<div class="structure-list">
<div
*ngFor="let structure of structures"
+ role="button"
tabindex="0"
class="form-list"
[ngClass]="{
diff --git a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
index b6fb15cfdd87487189f25f5e2e883d810248b708..af83ef0c3f33069ef2a2473f51b36cba77bb0770 100644
--- a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
+++ b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html
@@ -3,6 +3,10 @@
<div class="title">
<h3>La structure propose-t-elle une aide gratuite<sup>*</sup> aux démarches en ligne ?</h3>
<p>Facultatif - Plusieurs choix possibles</p>
+ <p *ngIf="isEditMode">
+ Il s’agit de l’offre globale de la structure.<br />L’offre proposée par les accompagnant·es numériques au sein de
+ la structure est éditable depuis leur profil.
+ </p>
</div>
<div class="tagList">
<app-tag-item
diff --git a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
index 4b5e67465cdf980e1606475431388d2558707b10..15bfe7d66e2dba182af8e3247db40ab249a229d7 100644
--- a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
+++ b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
@@ -18,7 +18,7 @@
[iconColor]="'currentColor'"
[size]="'medium'"
[disabled]="structureForm.value.nbComputers === 0"
- (click)="changeValueHandler(equipment.module.id, -1)"
+ (action)="changeValueHandler(equipment.module.id, -1)"
/>
<input
type="number"
@@ -39,7 +39,7 @@
[iconColor]="'currentColor'"
[size]="'medium'"
[disabled]="structureForm.value.nbPrinters === 0"
- (click)="changeValueHandler(equipment.module.id, -1)"
+ (action)="changeValueHandler(equipment.module.id, -1)"
/>
<input
type="number"
@@ -60,7 +60,7 @@
[iconColor]="'currentColor'"
[size]="'medium'"
[disabled]="structureForm.value.nbScanners === 0"
- (click)="changeValueHandler(equipment.module.id, -1)"
+ (action)="changeValueHandler(equipment.module.id, -1)"
/>
<input
type="number"
@@ -79,7 +79,7 @@
[iconName]="'plus'"
[iconColor]="'currentColor'"
[size]="'medium'"
- (click)="changeValueHandler(equipment.module.id, 1)"
+ (action)="changeValueHandler(equipment.module.id, 1)"
/>
</div>
</div>
diff --git a/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html b/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html
index 36afc980719fade30890f675ccc8149efb385681..469fa8c759505887c3d24821d2c46135289c81e3 100644
--- a/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html
+++ b/src/app/form/form-view/structure-form/structure-training-type/structure-training-type.component.html
@@ -1,10 +1,11 @@
<form *ngIf="structureForm && trainingCategories.length > 0" [formGroup]="structureForm">
<app-go-back *ngIf="isEditMode" (action)="goBack()" />
<div class="title">
- <h3>La structure propose-t-elle un accompagnement aux usages numérique ?</h3>
+ <h3>La structure propose-t-elle un accompagnement aux usages numériques ?</h3>
<p>Facultatif - Plusieurs choix possibles</p>
- <p *ngIf="isEditMode" class="info">
- L'offre des accompagnants numériques est éditable sur le profil de l'accompagnant numérique
+ <p *ngIf="isEditMode">
+ Il s’agit de l’offre globale de la structure.<br />L’offre proposée par les accompagnant·es numériques au sein de
+ la structure est éditable depuis leur profil.
</p>
</div>
<app-training-type-picker
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
index bd8c104fda9468e77d1ea38466418e27d4bac686..02c32a75404e6523c26c485994964e6834ce70ee 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
+++ b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
@@ -13,7 +13,7 @@
<div class="structures-section">
<p>Sélectionnez la structure de votre choix</p>
- <div class="list-structures">
+ <div role="list" class="list-structures">
<app-card
*ngFor="let structure of structuresLinked"
role="listitem"
diff --git a/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.html b/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.html
index 8b843e7ae17f1d831813a39ae66276ef71fe7aba..bb1cb5d3aefe0e43238ef551feee7c12969ec3ca 100644
--- a/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.html
@@ -14,7 +14,7 @@
</div>
<div class="picker-section">
<p>Sélectionnez un·e accompagnant·e numérique</p>
- <div class="list-choices">
+ <div role="list" class="list-choices">
<app-member-card
*ngFor="let owner of owners"
role="listitem"
@@ -43,7 +43,7 @@
<div class="picker-section">
<p>Sélectionnez la structure de votre choix</p>
- <div class="list-choices">
+ <div role="list" class="list-choices">
<app-card
*ngFor="let structure of structures"
role="listitem"
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index abf1a45d7772f3aa59cb0e66f167d5117435f128..5d07e0752eeaeab960a19ef7961b14d94cd3a041 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -12,7 +12,14 @@
(keyup.enter)="openMenu()"
/>
</div>
- <div class="logo clickable" aria-label="Retour accueil" role="button" routerLink="/home" tabindex="0">
+ <div
+ class="logo clickable"
+ aria-label="Retour accueil"
+ role="button"
+ tabindex="0"
+ (click)="goToHome()"
+ (keyup.enter)="goToHome()"
+ >
<img
*ngIf="displayLogo(); else customTitle"
class="logo-grand-lyon"
@@ -35,49 +42,51 @@
(keyup.enter)="isLoggedIn ? openProfileMenu() : goToLoginPage()"
/>
</div>
- <div class="rightHeader" role="menu">
- <a routerLink="/news" role="menuitem" i18n [routerLinkActive]="'active'" [attr.aria-current]="isActive('/news')"
- >Actualités</a
- >
- <a
- routerLink="/acteurs"
- role="menuitem"
- [routerLinkActive]="'active'"
- i18n
- [attr.aria-current]="isActive('/acteurs')"
- >
- Cartographie
- </a>
- <a
- routerLink="/orientation"
- role="menuitem"
- [routerLinkActive]="'active'"
- i18n
- [attr.aria-current]="isActive('/orientation')"
- >
- Orienter un bénéficiaire
- </a>
- <a
- routerLink="/annuaire"
- role="menuitem"
- [routerLinkActive]="'active'"
- i18n
- [attr.aria-current]="isActive('/annuaire')"
- >
- Annuaire
- </a>
- <a
- *ngIf="isAdmin"
- routerLink="/admin"
- role="menuitem"
- [routerLinkActive]="'active'"
- [attr.aria-current]="isActive('/admin')"
- >Administration</a
- >
+ <div class="rightHeader">
+ <div class="menuItems" role="menu">
+ <a routerLink="/news" role="menuitem" i18n [routerLinkActive]="'active'" [attr.aria-current]="isActive('/news')"
+ >Actualités</a
+ >
+ <a
+ routerLink="/acteurs"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/acteurs')"
+ >
+ Cartographie
+ </a>
+ <a
+ routerLink="/orientation"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/orientation')"
+ >
+ Orienter un bénéficiaire
+ </a>
+ <a
+ routerLink="/annuaire"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/annuaire')"
+ >
+ Annuaire
+ </a>
+ <a
+ *ngIf="isAdmin"
+ routerLink="/admin"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/admin')"
+ >Administration</a
+ >
+ </div>
<app-button
*ngIf="isLoggedIn"
class="connected"
- ariaLabel="Ouvrir le menu Mon compte"
+ ariaLabel="Ouvrir le menu Mon compte - {{ displayName }}"
[variant]="'primary'"
[label]="displayName"
[size]="'small'"
@@ -219,8 +228,8 @@
<span class="name">{{ displayFullName }}</span>
</div>
<div class="profileMenuButtons">
- <app-button [variant]="'primaryBlack'" [label]="'Voir mon compte'" [size]="'small'" (click)="goToProfile()" />
- <app-button [label]="'Se déconnecter'" [variant]="'secondary'" [size]="'small'" (action)="logout()" />
+ <app-button [variant]="'primaryBlack'" [label]="'Voir mon compte'" [size]="'small'" (action)="goToProfile()" />
+ <app-button [variant]="'secondary'" [label]="'Se déconnecter'" [size]="'small'" (action)="logout()" />
</div>
</div>
</div>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 45d9e75d53a43b457d0a19edd94434efe894e3a4..3f11bef632f09d84725f780c75cdd2b0b4202451 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -30,6 +30,13 @@ header {
display: flex;
align-items: center;
gap: 3vw;
+
+ .menuItems {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 3vw;
+ }
}
.connected {
box-shadow: 0px 4px 8px 0px $red-20;
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index ce2af666559242027df3598bbf4127a69638d6d5..2c3ae29c336cf178cc55f827cdc2864707536042 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -54,6 +54,9 @@ export class HeaderComponent {
public isActive(route: string): 'page' | '' {
return this.router.url === route ? 'page' : '';
}
+ public goToHome(): void {
+ this.router.navigateByUrl('/home');
+ }
public goToProfile(): void {
this.showProfileMenu = false;
this.router.navigateByUrl('/profile');
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 47f257f572a13e39e04bd769c48a8e7f4f734682..b3a425cbc11da41c7c42fefe200d944c5915dec8 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -206,6 +206,7 @@ export class MapComponent implements OnChanges {
structure.getLat(),
structure.getLon(),
this.getMarkerType(structure),
+ structure.structureName,
structure._id,
this.buildPopup(structure),
)
@@ -279,6 +280,7 @@ export class MapComponent implements OnChanges {
mdm.geometry.getLat(),
mdm.geometry.getLon(),
MarkerType.mdm,
+ mdm.properties.nom,
null,
this.buildMdmPopUp(mdm.properties),
)
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index d96d1c1dea49974ecb6eeb12fa4db57f199f8f06..64013fe38b3d63e2ab3d4bcd8894d0f08c7408f8 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -16,8 +16,16 @@ import {
export class MapService {
private static markersList = {};
- public createMarker(lat: number, lon: number, markerType: MarkerType, id?: string, popup?: string): Marker {
+ public createMarker(
+ lat: number,
+ lon: number,
+ markerType: MarkerType,
+ name: string,
+ id?: string,
+ popup?: string,
+ ): Marker {
const marker = new Marker([lat, lon], {
+ title: name,
icon: this.getMarkerIcon(markerType),
attribution: this.getLayerAttribution(markerType),
});
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.html b/src/app/newsletter-subscription/newsletter-subscription.component.html
index 202cb0faea4812278ae3b9f31e408f8c25d3b25e..ca7ff6703f9cfb71412c144ded66894d7475357c 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.html
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.html
@@ -17,7 +17,7 @@
<div class="actions">
<div class="buttons">
- <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" />
+ <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="goToHome()" />
<app-button
[variant]="'primary'"
[label]="subscriptionMod ? 'S\'inscrire' : 'Se désinscrire'"
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.ts b/src/app/newsletter-subscription/newsletter-subscription.component.ts
index a069f34a35f58660f4f386fcd0fbb744af076d35..28c75a2ffc2db6ab7c740bb61a02bb7ce735a38a 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.ts
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.ts
@@ -88,4 +88,8 @@ export class NewsletterSubscriptionComponent implements OnInit {
});
}
}
+
+ public goToHome(): void {
+ this.router.navigateByUrl('/home');
+ }
}
diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html
index 85341967a8250ebe15d87fdb58456136c5fcf002..338b769c4e06bd51e183ab6c29c24e87fba057c4 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -1,11 +1,4 @@
-<div
- *ngIf="post"
- class="post"
- tabindex="0"
- role="listitem"
- (click)="showDetails(post)"
- (keyup.enter)="showDetails(post)"
->
+<div *ngIf="post" class="post" tabindex="0" role="button" (click)="showDetails(post)" (keyup.enter)="showDetails(post)">
<div class="imageContainer">
<img *ngIf="post.feature_image" alt="{{ post.feature_image_alt }}" [src]="post.feature_image" />
<img
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index e095b8a4ae4737633e192d1c3166abfdbe6cd485..0131c534fda0feb228fef23ec05f7a861979d4d1 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,5 +1,5 @@
import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { RouterListenerService } from '../../../services/routerListener.service';
import { Post } from '../../models/post.model';
@@ -21,6 +21,7 @@ export class PostDetailsComponent implements OnInit {
private routerListener: RouterListenerService,
private readonly elementRef: ElementRef,
private renderer: Renderer2,
+ private title: Title,
) {}
ngOnInit(): void {
@@ -38,6 +39,8 @@ export class PostDetailsComponent implements OnInit {
const script = this.renderer.createElement('script');
script.src = '/assets/ghost/cards.min.js';
this.renderer.appendChild(this.elementRef.nativeElement, script);
+ // set page title
+ this.title.setTitle(this.post.title + " | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon");
}
public backToPosts(): void {
diff --git a/src/app/post/components/post-header/post-header.component.html b/src/app/post/components/post-header/post-header.component.html
index 153e928fba9097b8a05c596b2fd523273dc85dbf..5ec1cb46fcae9f1b7d4b188c7e691b0016d35091 100644
--- a/src/app/post/components/post-header/post-header.component.html
+++ b/src/app/post/components/post-header/post-header.component.html
@@ -1,22 +1,24 @@
<div class="section-container news">
- <header>
+ <div class="header">
<h1>Les actualités</h1>
<h2>du réseau d’inclusion numérique</h2>
- </header>
+ </div>
- <div class="navigation">
- <nav>
- <span
+ <nav>
+ <div role="tablist" class="navigation">
+ <div
*ngFor="let tag of tags.others"
class="tag"
+ role="tab"
tabindex="0"
- role="listitem"
[ngClass]="{ active: tag.slug === mainActiveTag.slug || tag.name === mainActiveTag.slug }"
(click)="activateTag(tag)"
(keydown.enter)="activateTag(tag)"
>
- {{ tag.name }}
- </span>
- </nav>
- </div>
+ <span>
+ {{ tag.name }}
+ </span>
+ </div>
+ </div>
+ </nav>
</div>
diff --git a/src/app/post/components/post-header/post-header.component.scss b/src/app/post/components/post-header/post-header.component.scss
index ec582e639d17319af21b847a688e63b6d7e103a2..4de72a4ef87b0dcd4db91805bdb887dd5098d719 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -3,7 +3,7 @@
@import 'breakpoint';
@import 'layout';
-header {
+.header {
padding-block: 2rem;
h1 {
@include font-bold-30;
@@ -14,17 +14,18 @@ header {
}
}
-.navigation {
+nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $grey-4;
- nav {
+ .navigation {
display: flex;
overflow-x: auto;
white-space: nowrap;
+
.tag {
cursor: pointer;
user-select: none;
diff --git a/src/app/post/components/post-list/post-list.component.html b/src/app/post/components/post-list/post-list.component.html
index 18758c913f79a44b44f38bc49cbf424b3fc46a73..2beb8bb1031716247b73dd6f36139df68cd49ec3 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -5,7 +5,7 @@
</div>
<div class="posts-container" role="list">
- <app-post-card *ngFor="let news of allPosts" class="col" [post]="news" />
+ <app-post-card *ngFor="let post of allPosts" class="col" role="listitem" [post]="post" />
</div>
<div *ngIf="isLoading" class="loader" aria-busy="true">
@@ -18,6 +18,6 @@
[variant]="'primaryBlack'"
[label]="'Voir plus d\'actualités'"
[wide]="true"
- (click)="loadMore()"
+ (action)="loadMore()"
/>
</div>
diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index 0ea7c9266055703b471d54990f91e6279c762d14..40109df17207a027a83d0169c4569232418a7d44 100644
--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -136,14 +136,15 @@
<div class="structureResults">
<div *ngIf="!isAlreadySearching" class="autocomplete-items">
- <p
+ <div
*ngFor="let employer of employers"
+ role="button"
tabindex="0"
(click)="selectEmployer(employer)"
(keyup.enter)="selectEmployer(employer)"
>
- {{ employer.name }}
- </p>
+ <p>{{ employer.name }}</p>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
index 45995a07e5cbb2b26d40de93bff63c96b6b4ef46..895ea56f9053b3207c76fbc3233a70c7872bfccb 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
@@ -29,6 +29,7 @@
<div class="navigation">
<span
tabindex="0"
+ role="button"
[ngClass]="{ tab: true, selected: currentTab === tabsEnum.onlineProcedures }"
(click)="navigateTo(tabsEnum.onlineProcedures)"
(keyup.enter)="navigateTo(tabsEnum.onlineProcedures)"
@@ -37,6 +38,7 @@
</span>
<span
tabindex="0"
+ role="button"
[ngClass]="{ tab: true, selected: currentTab === tabsEnum.digitalSkills }"
(click)="navigateTo(tabsEnum.digitalSkills)"
(keyup.enter)="navigateTo(tabsEnum.digitalSkills)"
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
index c5c545d163d6fb92f0a15047c5ebdff87d07f253..4a2d4c50c6e00ce04e45d030f661a8c4f0344b18 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
@@ -4,21 +4,20 @@
<app-button
*ngIf="!isPublic"
class="hide-on-mobile"
- [state]="{ structureName: this.structureName }"
- routerLink="./edit-personal-offer/{{ this.personalOffer._id }}"
[variant]="'secondary'"
[label]="'Modifier mon offre'"
[iconName]="'edit'"
[size]="'small'"
[wide]="true"
+ (action)="goToEditPersonalOffer()"
/>
<app-icon-button
*ngIf="!isPublic"
ariaLabel="Modifier mon offre"
class="hide-on-desktop"
- routerLink="./edit-personal-offer/{{ this.personalOffer._id }}"
[variant]="'secondary'"
[iconName]="'edit'"
+ (action)="goToEditPersonalOffer()"
/>
</div>
<div class="content">
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts b/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
index 9c6a10a7a1467c623569269fd52a702eda72e916..526d64fc4c253615e50a32b770a1d0a33721137b 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
@@ -1,4 +1,5 @@
import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
import { PersonalOffer } from './../../../models/personalOffer.model';
@Component({
@@ -10,4 +11,12 @@ export class PersonalOfferComponent {
@Input() public personalOffer: PersonalOffer;
@Input() public isPublic: boolean;
@Input() public structureName?: string;
+
+ constructor(private router: Router) {}
+
+ public goToEditPersonalOffer(): void {
+ this.router.navigateByUrl(`/profile/edit-personal-offer/${this.personalOffer._id}`, {
+ state: { structureName: this.structureName },
+ });
+ }
}
diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html
index d32bc5cbfc6bb34968e62a6e90a2b88293f2be12..6ed99f9c6914a03aad9aa6c9f7f084faf2aafbc2 100644
--- a/src/app/profile/profile-structure/profile-structure.component.html
+++ b/src/app/profile/profile-structure/profile-structure.component.html
@@ -33,7 +33,7 @@
[variant]="'secondary'"
[label]="'Annuler la demande'"
[size]="'small'"
- (click)="handleCancelJoin(structure._id); $event.stopPropagation()"
+ (action)="handleCancelJoin(structure._id); $event.stopPropagation()"
/>
</div>
</div>
@@ -45,60 +45,65 @@
<div class="sectionButtons">
<app-button
class="hide-on-mobile"
- routerLink="./"
- tabindex="none"
- [routerLinkActive]="'active'"
[variant]="'secondary'"
[label]="'Voir la structure'"
[iconFolder]="'form'"
[iconName]="'visibility'"
[size]="'small'"
- [queryParams]="{ id: structure._id }"
+ (action)="goToDetail()"
/>
<app-icon-button
ariaLabel="Voir la structure"
class="hide-on-desktop"
- routerLink="./"
- tabindex="none"
- [routerLinkActive]="'active'"
[variant]="'secondary'"
[iconFolder]="'form'"
[iconName]="'visibility'"
- [queryParams]="{ id: structure._id }"
+ (action)="goToDetail()"
/>
<app-button
*ngIf="!isPublic && !isPending"
class="hide-on-mobile"
- tabindex="none"
- routerLink="./edit-structure/{{ structure._id }}"
- [routerLinkActive]="'active'"
[variant]="isValid() ? 'primaryBlack' : 'primaryWarning'"
[label]="'Modifier la structure'"
[size]="'small'"
+ (action)="goToEditStructure()"
/>
<app-icon-button
*ngIf="!isPublic && !isPending"
ariaLabel="Modifier la structure"
class="hide-on-desktop"
- tabindex="none"
- routerLink="./edit-structure/{{ structure._id }}"
- [routerLinkActive]="'active'"
[variant]="isValid() ? 'primaryBlack' : 'primaryWarning'"
[iconName]="'edit'"
+ (action)="goToEditStructure()"
/>
</div>
</div>
<div class="sectionContent infoSection">
<div class="row">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'address'" />
+ <app-svg-icon
+ [attr.aria-label]="'Adresse postale'"
+ [iconClass]="'icon-20'"
+ [folder]="'tags'"
+ [icon]="'address'"
+ />
{{ getAddress() }}
</div>
<div *ngIf="structure.contactPhone" class="row">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'phone'" />
+ <app-svg-icon
+ [attr.aria-label]="'Numéro de téléphone'"
+ [iconClass]="'icon-20'"
+ [folder]="'tags'"
+ [icon]="'phone'"
+ />
{{ structure.contactPhone | phone }}
</div>
<div *ngIf="structure.contactMail" class="row">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'mail'" />
+ <app-svg-icon
+ [attr.aria-label]="'Adresse e-mail'"
+ [iconClass]="'icon-20'"
+ [folder]="'tags'"
+ [icon]="'mail'"
+ />
<a href="mailto:{{ structure.contactMail }}">{{ structure.contactMail }}</a>
</div>
</div>
@@ -116,23 +121,20 @@
<app-button
*ngIf="!isPublic && !isPending"
class="hide-on-mobile"
- routerLink="./structure-members-management/{{ structure._id }}"
- [routerLinkActive]="'active'"
[variant]="'primaryBlack'"
[label]="'Gérer les membres'"
[iconName]="'edit'"
[size]="'small'"
[wide]="true"
+ (action)="goToStructureMembersManagement()"
/>
<app-icon-button
*ngIf="!isPublic && !isPending"
ariaLabel="Gérer les membres"
class="hide-on-desktop"
- routerLink="./structure-members-management/{{ structure._id }}"
- [routerLinkActive]="'active'"
[variant]="'secondary'"
[iconName]="'edit'"
- [queryParams]="{ id: structure._id }"
+ (action)="goToStructureMembersManagement()"
/>
</div>
<div *ngIf="membersWithJobWithPO.length > 0" class="sectionContent members">
@@ -154,7 +156,6 @@
class="call-to-action"
>
<app-button
- [routerLinkActive]="'active'"
[variant]="'primaryBlack'"
[label]="'Ajouter une offre'"
[iconName]="'plus'"
diff --git a/src/app/profile/profile-structure/profile-structure.component.ts b/src/app/profile/profile-structure/profile-structure.component.ts
index 47d9a0a49f14673d8ffafc6dbf6524acd353893c..cf36739743df94a66b9d38dfa07f8082253f4118 100644
--- a/src/app/profile/profile-structure/profile-structure.component.ts
+++ b/src/app/profile/profile-structure/profile-structure.component.ts
@@ -1,8 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
import { DateTime } from 'luxon';
-import { structureFormStep } from '../../form/form-view/structure-form/structureFormStep.enum';
import { Structure } from '../../models/structure.model';
import { StructureWithOwners } from '../../models/structureWithOwners.model';
import { CollapseType } from '../../shared/components/collapse/collapse.type';
@@ -34,6 +33,7 @@ export class ProfileStructureComponent implements OnInit {
public personalOffer: PersonalOffer;
constructor(
+ private route: ActivatedRoute,
private router: Router,
private userService: UserService,
private searchService: SearchService,
@@ -78,12 +78,21 @@ export class ProfileStructureComponent implements OnInit {
public goBack(): void {
history.back();
}
- public goToEdit(step: structureFormStep): void {
- this.router.navigate(['/form/structure', this.structureWithOwners.structure._id, structureFormStep[step]]);
+ public goToHome(): void {
+ this.router.navigateByUrl('/home');
+ }
+ public goToDetail(): void {
+ this.router.navigate(['/profile'], { queryParams: { id: this.structure._id } });
}
public goToOffer(): void {
this.router.navigate(['/form/personaloffer'], { state: { structure: this.structure } });
}
+ public goToEditStructure(): void {
+ this.router.navigateByUrl(`/profile/edit-structure/${this.structure._id}`);
+ }
+ public goToStructureMembersManagement(): void {
+ this.router.navigateByUrl(`/profile/structure-members-management/${this.structure._id}`);
+ }
public isValid(): boolean {
return this.structureForm.valid;
}
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 5e7c91a9f9daefab481ca89f0bd4858ed68734d5..324cf9783c356a3d949113e1373950fa99e249b9 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -9,37 +9,30 @@
<app-button
*ngIf="isPublic && userProfile.withAppointment"
class="hide-on-mobile rdv"
- tabindex="none"
- [routerLink]="['/orientation']"
- [state]="{ rdvUser: userProfile }"
- [routerLinkActive]="'active'"
[variant]="'primaryBlack'"
[label]="'Demander un RDV'"
[iconName]="'calendar'"
[size]="'small'"
[wide]="true"
+ (action)="goToOrientation()"
/>
<app-button
*ngIf="!isPublic"
class="hide-on-mobile"
- tabindex="none"
- routerLink="/profile/edit"
- [routerLinkActive]="'active'"
[variant]="'primaryBlack'"
[label]="'Modifier mon profil'"
[iconName]="'edit'"
[size]="'small'"
[wide]="true"
+ (action)="goToProfileEdit()"
/>
<app-icon-button
*ngIf="!isPublic"
ariaLabel="Modifier mon profil"
class="hide-on-desktop"
- tabindex="none"
- routerLink="/profile/edit"
- [routerLinkActive]="'active'"
[variant]="'primaryBlack'"
[iconName]="'edit'"
+ (action)="goToProfileEdit()"
/>
</div>
<div class="profile">
@@ -51,11 +44,21 @@
</div>
<div class="block contact">
<div class="row">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'phone'" />
+ <app-svg-icon
+ [attr.aria-label]="'Numéro de téléphone'"
+ [iconClass]="'icon-20'"
+ [folder]="'tags'"
+ [icon]="'phone'"
+ />
<div>{{ userProfile.phone | phone }}</div>
</div>
<div class="row">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'mail'" />
+ <app-svg-icon
+ [attr.aria-label]="'Adresse e-mail'"
+ [iconClass]="'icon-20'"
+ [folder]="'tags'"
+ [icon]="'mail'"
+ />
<a href="mailto:{{ userProfile.email }}">{{ userProfile.email }}</a>
</div>
<div *ngIf="isPublic && userProfile.withAppointment" class="row">
@@ -70,15 +73,12 @@
<app-button
*ngIf="!isPublic && !userProfile.description"
class="centerButton"
- tabindex="none"
- routerLink="/profile/edit"
- [routerLinkActive]="'active'"
- [state]="{ data: 'description' }"
[variant]="'secondary'"
[label]="'Ajouter une description'"
[iconName]="'plus'"
[size]="'small'"
[wide]="true"
+ (action)="goToProfileEdit('description')"
/>
</section>
@@ -93,24 +93,20 @@
<app-button
*ngIf="userProfile.structuresLink.length > 0"
class="hide-on-mobile"
- routerLink="./structures-management"
- tabindex="none"
- [routerLinkActive]="'active'"
[iconName]="'edit'"
[variant]="'primaryBlack'"
[label]="'Gérer mes structures'"
[size]="'small'"
[wide]="true"
+ (action)="goToStructuresManagement()"
/>
<app-icon-button
*ngIf="userProfile.structuresLink.length > 0"
ariaLabel="Gérer mes structures"
class="hide-on-desktop"
- tabindex="none"
- routerLink="./structures-management"
- [routerLinkActive]="'active'"
[variant]="'primaryBlack'"
[iconName]="'edit'"
+ (action)="goToStructuresManagement()"
/>
</div>
<div
@@ -136,13 +132,12 @@
</div>
<app-button
class="centerButton"
- tabindex="none"
- routerLink="/form/structure"
[variant]="'secondary'"
[label]="'Ajouter une structure'"
[iconName]="'plus'"
[size]="'small'"
[wide]="true"
+ (action)="goToFormStructure()"
/>
</section>
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
index a40d74722465db84d494ffd4bf045fcfeb9c514b..86f1a4969126257815f048e2b5051b67bfd73b3a 100644
--- a/src/app/profile/profile.component.ts
+++ b/src/app/profile/profile.component.ts
@@ -101,6 +101,23 @@ export class ProfileComponent implements OnInit {
this.location.back();
}
+ public goToOrientation(): void {
+ this.router.navigate(['/orientation'], { state: { rdvUser: this.userProfile } });
+ }
+ public goToProfileEdit(tabToSelect?: string): void {
+ if (tabToSelect) {
+ this.router.navigateByUrl('/profile/edit', { state: { data: tabToSelect } });
+ } else {
+ this.router.navigateByUrl('/profile/edit');
+ }
+ }
+ public goToStructuresManagement(): void {
+ this.router.navigateByUrl('/profile/structures-management');
+ }
+ public goToFormStructure(): void {
+ this.router.navigateByUrl('/form/structure');
+ }
+
public addStructure(): void {
this.router.navigateByUrl('/form/structure');
}
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.html b/src/app/profile/structure-members-management/structure-members-management.component.html
index 7e6529c2245019daa819507ff7614427e89e5340..4a93bdd6be97deff8e41f124305bd7904d2360f5 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.html
+++ b/src/app/profile/structure-members-management/structure-members-management.component.html
@@ -6,13 +6,12 @@
<h2>{{ structure.structureName }}</h2>
</div>
<app-button
- tabindex="0"
[variant]="'primaryBlack'"
[label]="'Ajouter un membre'"
[iconName]="'plus'"
[size]="'small'"
[wide]="true"
- (click)="addMemberModalOpened = true"
+ (action)="addMemberModalOpened = true"
/>
</div>
@@ -38,7 +37,6 @@
</div>
<app-button
*ngIf="currentProfile._id !== member._id"
- tabindex="0"
[variant]="'secondaryDelete'"
[label]="'Exclure ce membre'"
[size]="'small'"
@@ -60,7 +58,6 @@
<div class="pendingContainer">
<p class="text">Demande de rattachement envoyée le {{ member.updatedAt | date: 'dd/MM/YYYY' }}</p>
<app-button
- tabindex="0"
[variant]="'secondary'"
[label]="'Annuler la demande'"
[size]="'small'"
diff --git a/src/app/profile/structures-management/structures-management.component.html b/src/app/profile/structures-management/structures-management.component.html
index 6798265871aac43d464d0dd124d8da8d60a26802..f07aad9fb53397fef6b7ede0b4cff6b2b8d75842 100644
--- a/src/app/profile/structures-management/structures-management.component.html
+++ b/src/app/profile/structures-management/structures-management.component.html
@@ -7,13 +7,12 @@
<ng-template ngPluralCase="other">Gérer mes structures</ng-template>
</h1>
<app-button
- routerLink="/form/structure"
- tabindex="0"
[variant]="'primaryBlack'"
[label]="'Ajouter une structure'"
[iconName]="'plus'"
[size]="'small'"
[wide]="true"
+ (action)="goToFormStructure()"
/>
</div>
<div *ngIf="structures" class="structuresList">
@@ -44,21 +43,21 @@
[variant]="'secondary'"
[label]="'Quitter la structure'"
[size]="'small'"
- (click)="selectedStructure = elt.structure; leaveModalOpened = true"
+ (action)="selectedStructure = elt.structure; leaveModalOpened = true"
/>
<app-button
*ngIf="!isBeingDeleted(elt.structure)"
[variant]="'secondaryDelete'"
[label]="'Supprimer la structure'"
[size]="'small'"
- (click)="selectedStructure = elt.structure; deleteModalOpened = true"
+ (action)="selectedStructure = elt.structure; deleteModalOpened = true"
/>
<app-button
*ngIf="isBeingDeleted(elt.structure)"
[variant]="'primary'"
[label]="'Annuler suppression'"
[size]="'small'"
- (click)="selectedStructure = elt.structure; cancelDeleteModalOpened = true"
+ (action)="selectedStructure = elt.structure; cancelDeleteModalOpened = true"
/>
</div>
</div>
diff --git a/src/app/profile/structures-management/structures-management.component.ts b/src/app/profile/structures-management/structures-management.component.ts
index 645c05598292f8aa633c38d2ff17af218b45b208..193e936fa6f660bfba84035157617acee7150229 100644
--- a/src/app/profile/structures-management/structures-management.component.ts
+++ b/src/app/profile/structures-management/structures-management.component.ts
@@ -37,6 +37,9 @@ export class StructuresManagementComponent implements OnInit {
public goBack(): void {
history.back();
}
+ public goToFormStructure(): void {
+ this.router.navigateByUrl('/form/structure');
+ }
private shouldRedirect(structures: StructureWithOwners[] | Observable<any>[]): void {
if (!structures.length) {
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
index 772a290ce9e78c69533cbe92fca90cf896cb1af2..04eb72bd68d28c652dbdc6c7222e0cc2e0ec59cd 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
@@ -10,8 +10,14 @@
[value]="searchString"
(valueChange)="onSearchChange($event)"
/>
-<div *ngIf="!isAlreadySearching" class="autocomplete-items">
- <p *ngFor="let hit of data" tabindex="0" (click)="selectedResult(hit)" (keyup.enter)="selectedResult(hit)">
- {{ hit.displayedName }}
- </p>
+<div *ngIf="!isAlreadySearching" role="list" class="autocomplete-items">
+ <div
+ *ngFor="let hit of data"
+ role="listitem"
+ tabindex="0"
+ (click)="selectedResult(hit)"
+ (keyup.enter)="selectedResult(hit)"
+ >
+ <p tabindex="none" role="button">{{ hit.displayedName }}</p>
+ </div>
</div>
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 784e822f616468f01899def2081e9e01dcfc629d..9a5c736eb3fc75703677789371def014ec7e3c0e 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,9 +1,9 @@
-<button type="button" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()">
+<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown.enter)="clicked()">
<app-checkbox [checked]="isChecked" />
<svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
<use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg" />
</svg>
- <p>{{ text }}</p>
-</button>
+ <p id="checkboxLabel">{{ text }}</p>
+</div>
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index 167a1bc2c0ea5ba14609f0d34a530549376d4ca8..0078cd1529fb42cf59d66dd5317befe9624d01ea 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -1,7 +1,7 @@
@import 'color';
@import 'typography';
-button {
+div.checkbox {
width: 100%;
height: 80px;
padding: 1rem;
diff --git a/src/app/shared/components/checkbox/checkbox.component.html b/src/app/shared/components/checkbox/checkbox.component.html
index 17d7e6d70e490579f76c744f3ac2a179a37e0584..c2185f1c7cd973795887d9cb04675a0cfccb2019 100644
--- a/src/app/shared/components/checkbox/checkbox.component.html
+++ b/src/app/shared/components/checkbox/checkbox.component.html
@@ -5,5 +5,6 @@
[checked]="checked"
[indeterminate]="indeterminate"
[disabled]="disabled"
+ [attr.aria-labelledby]="'checkboxLabel'"
(click)="action.emit($event)"
/>
diff --git a/src/app/shared/components/collapsable-filter/collapsable-filter.component.html b/src/app/shared/components/collapsable-filter/collapsable-filter.component.html
index 0c75310f9703c5aadbedc30e0976f07336188550..75c95e42854a66c8b70efa9bcb887a24771db14d 100644
--- a/src/app/shared/components/collapsable-filter/collapsable-filter.component.html
+++ b/src/app/shared/components/collapsable-filter/collapsable-filter.component.html
@@ -1,5 +1,6 @@
<button
type="button"
+ [attr.aria-label]="'Déplier les filtres : ' + label"
[ngClass]="{
expanded: expanded,
active: active
diff --git a/src/app/shared/components/member-card/member-card.component.html b/src/app/shared/components/member-card/member-card.component.html
index 51d6d974a38b784d344feb645d3df8857793d89d..720190e177624c4c2d3d6e28ec82bb4e0cab43ce 100644
--- a/src/app/shared/components/member-card/member-card.component.html
+++ b/src/app/shared/components/member-card/member-card.component.html
@@ -1,5 +1,6 @@
<div
class="structureMember"
+ role="button"
[ngClass]="{ clickable: isInteractive(), isChecked: isChecked }"
[tabindex]="isInteractive() ? '0' : '-1'"
(click)="cardClicked()"
@@ -12,7 +13,7 @@
<p>{{ getJob() }}</p>
<div *ngIf="showAppointment && member.withAppointment" class="appointment">
<app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'rdv'" />
- <span>Rendez-vous</span>
+ <span aria-label="Prise de rendez-vous possible">Rendez-vous</span>
</div>
</div>
<div *ngIf="showContactInfo" class="infoDetails">
diff --git a/src/app/shared/components/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html
index eb393e445524c8f1253f20b7068063916a820046..6c3d913fe4934a43b885d84f6e6ca1982232ca48 100644
--- a/src/app/shared/components/modal/modal.component.html
+++ b/src/app/shared/components/modal/modal.component.html
@@ -4,7 +4,8 @@
<h3>{{ title }}</h3>
<app-svg-icon
tabindex="0"
- alt="Fermer la fenêtre"
+ role="button"
+ aria-label="Fermer la fenêtre"
[folder]="'ico'"
[icon]="'cross'"
[iconClass]="'icon-24 hover'"
diff --git a/src/app/shared/components/radio-option/radio-option.component.html b/src/app/shared/components/radio-option/radio-option.component.html
index 00f21749e6d978e90610b438bf8be9da186a6615..5b6c4ce9505cedd6a0d10abfd15ae1456ed53aa9 100644
--- a/src/app/shared/components/radio-option/radio-option.component.html
+++ b/src/app/shared/components/radio-option/radio-option.component.html
@@ -1,4 +1,4 @@
-<button type="button" tabindex="-1" [ngClass]="{ selected: selected }" (click)="clicked()">
+<button type="button" tabindex="0" [ngClass]="{ selected: selected }" (click)="clicked()">
<app-radio
[id]="id"
[checked]="selected === true"
diff --git a/src/app/shared/components/radio/radio.component.html b/src/app/shared/components/radio/radio.component.html
index 354dc5120f1f8c6baa94c0db4adcec7ae5a5d10b..6d0da5a2e978eabbf03ca0563d25c2411bd77d89 100644
--- a/src/app/shared/components/radio/radio.component.html
+++ b/src/app/shared/components/radio/radio.component.html
@@ -1,6 +1,7 @@
<div class="radioContainer">
<input
type="radio"
+ tabindex="-1"
[id]="id"
[checked]="checked"
[disabled]="disabled"
diff --git a/src/app/shared/components/switch/switch.component.html b/src/app/shared/components/switch/switch.component.html
index b8d06fa95f6279f3fe5b3c5df578eeff5ad8b86b..54cfc1a913eb01bf3c02f711ab322b3936cd2f34 100644
--- a/src/app/shared/components/switch/switch.component.html
+++ b/src/app/shared/components/switch/switch.component.html
@@ -1,6 +1,7 @@
<div class="content">
<div
class="switch"
+ role="button"
tabindex="0"
[attr.aria-label]="checked ? 'Désactiver' : 'Activer'"
[ngClass]="{ disabled: disabled, checked: checked }"
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 1c40f18e494851ae67bce97a8ef9273bc285f026..5e80e14380f90b78bd2a1fab353a692f68d64366 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,5 +1,6 @@
<div
class="structure"
+ role="button"
[tabindex]="isInteractive() ? '0' : '-1'"
[ngClass]="{ orientation: isOrientation, interactive: isInteractive(), isChecked: isChecked }"
(click)="cardClicked()"
@@ -69,7 +70,7 @@
class="hide-on-desktop"
[variant]="'primary'"
[iconName]="'calendar'"
- (click)="cardRDV(); $event.stopPropagation()"
+ (action)="cardRDV(); $event.stopPropagation()"
/>
</ng-container>
<app-svg-icon
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html
index 9773311159828762928acb60c919d19918cd8479..9edc35ba14222eb2cd09d5de00cd9bd8579a958c 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.html
+++ b/src/app/structure-list/components/more-filters/more-filters.component.html
@@ -5,6 +5,8 @@
<h3>Plus de filtres</h3>
<app-svg-icon
tabindex="0"
+ role="button"
+ aria-label="Fermer la fenêtre"
[iconClass]="'icon-24 hover'"
[iconColor]="'grey-1'"
[icon]="'cross'"
@@ -53,8 +55,8 @@
</app-collapse>
</div>
<div class="modalFooter">
- <app-button [variant]="'secondary'" [label]="'Effacer'" (click)="clearFilters()" />
- <app-button [variant]="'primary'" [label]="'Appliquer'" (click)="emitModules(checkedModules)" />
+ <app-button [variant]="'secondary'" [label]="'Effacer'" (action)="clearFilters()" />
+ <app-button [variant]="'primary'" [label]="'Appliquer'" (action)="emitModules(checkedModules)" />
</div>
</div>
</div>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 3f49b3cb7e0b4f8aeea412cfe840c5b583d5eb6c..918053f95d84f331284faace7e6bb1041c41e50e 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -22,7 +22,9 @@
/>
</div>
<app-svg-icon
+ role="button"
tabindex="0"
+ aria-label="Fermer"
[folder]="'ico'"
[icon]="'cross'"
[iconColor]="'grey-1'"
@@ -37,8 +39,8 @@
class="clickableDiv"
role="button"
tabindex="0"
- [routerLink]="['/orientation']"
- [state]="{ rdvStructure: structure }"
+ (click)="goToOrientation()"
+ (keyup.enter)="goToOrientation()"
>
<app-svg-icon class="icon" [folder]="'ico'" [icon]="'rdvDetail'" [iconClass]="'icon-32'" />
<div class="iconTitle">Demander un RDV</div>
@@ -111,6 +113,7 @@
<a
*ngIf="!structure.deletedAt"
class="primary"
+ role="button"
tabindex="0"
(click)="toggleDeleteModal()"
(keyup.enter)="toggleDeleteModal()"
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 973eba153f519626031ae9444e04b067efccdc93..e14acd3f5802e6220e7913486f58b1b98f4c245a 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -267,6 +267,9 @@ export class StructureDetailsComponent implements OnInit {
}
window.open(url, '_blank');
}
+ public goToOrientation(): void {
+ this.router.navigateByUrl('/orientation', { state: { rdvStructure: this.structure } });
+ }
public displayTrainings(): boolean {
if (this.structure.categoriesDisplay === undefined) return false;
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index deb797e14ec5f9b57d4620939abf9be7709c2d34..0e8363948a2b9af52645d1a290e3fe5de9a91937 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -16,22 +16,24 @@
</div>
</div>
- <div id="listCard" class="listCard" role="list" (mouseleave)="mouseLeave()">
+ <div id="listCard" (mouseleave)="mouseLeave()">
<ng-container *ngIf="!isLoading">
- <app-card
- *ngFor="let structure of structureList"
- class="structure-card"
- role="listitem"
- [structure]="structure"
- [isOrientation]="isOrientation"
- [isOrientationRdv]="isOrientationRdv"
- [isSelected]="isInPrintList(structure._id)"
- (showDetails)="showDetails(structure)"
- (keyup.enter)="showDetails(structure)"
- (hover)="handleCardHover($event)"
- (addToList)="addToList($event)"
- (selectRDV)="selectRDV($event)"
- />
+ <div role="list" class="listCard">
+ <app-card
+ *ngFor="let structure of structureList"
+ class="structure-card"
+ role="listitem"
+ [structure]="structure"
+ [isOrientation]="isOrientation"
+ [isOrientationRdv]="isOrientationRdv"
+ [isSelected]="isInPrintList(structure._id)"
+ (showDetails)="showDetails(structure)"
+ (keyup.enter)="showDetails(structure)"
+ (hover)="handleCardHover($event)"
+ (addToList)="addToList($event)"
+ (selectRDV)="selectRDV($event)"
+ />
+ </div>
<p *ngIf="structureList.length === 0" class="noStructureFound">
Il n'y a aucune réponse correspondant à votre recherche
</p>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 7d76a86140a1c6105466138599e2102de8a57d5f..5ed2c553815f419364731b4133c3257c03e75b77 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -22,16 +22,16 @@
gap: 16px;
padding-block: 24px;
+ .noStructureFound {
+ margin-left: 1rem;
+ }
+
.loader {
margin: auto;
}
}
}
-.noStructureFound {
- margin-left: 1rem;
-}
-
.structureListHeader {
display: flex;
flex-direction: row;