:gears: RGAA skip links shown on keyboard nav

src/app/app-routing.module.ts

@@ -3,7 +3,12 @@ import { RouterModule } from '@angular/router';
 import { routes } from './routes-framadate';
 
 @NgModule({
-	imports: [RouterModule.forRoot(routes, { useHash: true })],
+	imports: [
+		RouterModule.forRoot(routes, {
+			useHash: true,
+			anchorScrolling: 'enabled',
+		}),
+	],
 	exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -29,19 +29,9 @@ import { CipheringComponent } from './features/shared/components/ui/static-pages
 import { ErrorsListComponent } from './features/shared/components/ui/form/errors-list/errors-list.component';
 import { KeyboardShortcutsModule } from 'ng-keyboard-shortcuts';
 import { AdministrationModule } from './features/administration/administration.module';
-import { EditComponent } from './features/consultation/edit/edit.component';
 import { ChoiceButtonDinumComponent } from './features/shared/components/choice-button-dinum/choice-button-dinum.component';
 import { StaticPagesComponent } from './features/shared/static-pages/static-pages.component';
 
-// register languages files for translation
-// import localeEn from '@angular/common/locales/en';
-// import localeFr from '@angular/common/locales/fr';
-// import localeEs from '@angular/common/locales/es';
-// // code for locale are listed by the ISO-639
-// registerLocaleData(localeFr, 'fr-FR');
-// registerLocaleData(localeEn, 'en-EN');
-// registerLocaleData(localeEs, 'ca-ES');
-
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
 	public handle(params: MissingTranslationHandlerParams): string {
 		return `MISSING TRANSLATION FOR [${params.key}]`;

src/app/features/administration/form/steps/step-five/step-five.component.html

@@ -1,10 +1,10 @@
-<app-stepper [step_current]="5" [step_max]="pollService.step_max"></app-stepper>
+<app-stepper [step_current]="5" [optionnal_step]="true" [step_max]="pollService.step_max"></app-stepper>
 <div class="step step-five">
 	<div class="min-height">
 		<section class="supplement">
 			<app-errors-list [form]="pollService.form"></app-errors-list>
 			<div class="advanced-config">
-				<h1 class="title-step title is-1">
+				<h1 class="title-step title is-1" id="step_title">
 					{{ 'advanced.title' | translate }}
 				</h1>
 				<p class="decription">

src/app/features/administration/form/steps/step-four/step-four.component.html

@@ -4,7 +4,7 @@
 		<app-errors-list [form]="pollService.form"></app-errors-list>
 
 		<div class="custom-day-time-slices">
-			<h1 class="title is-1">
+			<h1 class="title is-1" id="step_title">
 				{{ 'hours.title' | translate }}
 			</h1>
 			<div class="no-days-error has-text-danger" *ngIf="!pollService.dateChoiceList.length">

src/app/features/administration/form/steps/step-one/step-one.component.html

@@ -2,7 +2,7 @@
 <div class="step step-container">
 	<form class="min-height" [formGroup]="pollService.form">
 		<section class="poll-title">
-			<h1 class="title is-1">
+			<h1 class="title is-1" id="step_title">
 				{{ 'creation.choose_title' | translate }}
 			</h1>
 			<div class="columns">

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -1,6 +1,6 @@
 <app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
 <div class="step min-height step-resume">
-	<h1 class="title is-1">
+	<h1 class="title is-1" id="step_title">
 		{{ 'resume.title' | translate }}
 	</h1>
 	<p class="helper description">

src/app/features/administration/form/steps/step-six/step-six.component.html

@@ -2,7 +2,7 @@
 <div class="step min-height">
 	<div class="min-height">
 		<form action="#" [formGroup]="pollService.form">
-			<h1 class="title is-1">
+			<h1 class="title is-1" id="step_title">
 				{{ 'owner.title' | translate }}
 			</h1>
 			<label for="name">

src/app/features/administration/form/steps/step-three/step-three.component.html

@@ -6,7 +6,7 @@
 		<app-option-link></app-option-link>
 	</div>
 	<div class="date-options" *ngIf="pollService.form.value.isAboutDate">
-		<h1 class="title is-1">
+		<h1 class="title is-1" id="step_title">
 			{{ 'dates.title' | translate }}
 		</h1>
 		<!--	sélecteur d'interface-->

src/app/features/administration/form/steps/step-two/step-two.component.html

@@ -3,7 +3,7 @@
 	<form action="#" [formGroup]="pollService.form">
 		<div class="min-height">
 			<app-errors-list [form]="pollService.form"></app-errors-list>
-			<h1 class="title is-1">
+			<h1 class="title is-1" id="step_title">
 				{{ 'creation.want' | translate }}
 			</h1>
 			<div class=" ">

src/app/features/administration/nav-steps/nav-steps.component.html

@@ -2,15 +2,16 @@
 	<div class="contained-in-main-column">
 		<button
 			*ngIf="display_previous_button"
+			id="button_next_step"
 			class="button-previous is-secondary"
 			[attr.aria-label]="'nav.previous' | translate"
 			[routerLink]="['/administration/step/' + previous_step_number]"
 		>
 			{{ 'nav.previous' | translate }}
 		</button>
-
 		<button
 			*ngIf="display_next_button"
+			id=""
 			class="button-next pull-right"
 			[disabled]="next_is_disabled"
 			[attr.aria-label]="(is_finish_step ? 'nav.save' : 'nav.next') | translate"

src/app/features/administration/stepper/stepper.component.html

@@ -1,4 +1,5 @@
 <header class="creation-stepper" id="creation_stepper" role="header">
+	<app-skip-links [optionnal_step]="optionnal_step"></app-skip-links>
 	<div class="shortcuts" *ngIf="environment.showStepperShortcuts">
 		<a
 			class="shortcut"

src/app/features/administration/stepper/stepper.component.ts

@@ -20,6 +20,8 @@ export class StepperComponent implements OnInit {
 	public step_current: number = 1;
 	@Input()
 	public step_max: number = 5;
+	@Input()
+	public optionnal_step: boolean = false;
 	public environment = environment;
 	display_cancel_dialog: boolean = false;
 	display_mobile_menu: boolean = false;

src/app/features/shared/components/rgaa/skip-links/skip-links.component.html

@@ -0,0 +1,14 @@
+<nav class="skip-links has-text-centered">
+	<ul class="show-links-on-focus">
+		<li>
+			<a class="clickable" [routerLink]="[]" fragment="step_title">
+				{{ 'nav.skip_links.go_to_content' | translate }}
+			</a>
+		</li>
+		<li *ngIf="optionnal_step">
+			<a href="clickable" [routerLink]="[]" fragment="button_next_step">
+				{{ 'nav.skip_links.skip_this_step' | translate }}
+			</a>
+		</li>
+	</ul>
+</nav>

src/app/features/shared/components/rgaa/skip-links/skip-links.component.scss

@@ -0,0 +1,21 @@
+.skip-links {
+	//height: 2rem;
+	top: 0.25rem;
+	background: white;
+}
+.show-links-on-focus {
+	overflow: hidden;
+	a {
+		display: inline-block;
+		max-width: 100%;
+		position: absolute;
+		left: -100vw;
+		&:focus {
+			left: 0;
+			display: inline;
+			background: white;
+			width: 100%;
+			padding: 1rem;
+		}
+	}
+}

src/app/features/shared/components/rgaa/skip-links/skip-links.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkipLinksComponent } from './skip-links.component';
+
+describe('SkipLinksComponent', () => {
+	let component: SkipLinksComponent;
+	let fixture: ComponentFixture<SkipLinksComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [SkipLinksComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(SkipLinksComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/shared/components/rgaa/skip-links/skip-links.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-skip-links',
+	templateUrl: './skip-links.component.html',
+	styleUrls: ['./skip-links.component.scss'],
+})
+export class SkipLinksComponent implements OnInit {
+	@Input() optionnal_step: boolean = false;
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/shared/shared.module.ts

@@ -36,6 +36,7 @@ import { ChoiceButtonDinumComponent } from '../features/shared/components/choice
 import { DialogModule } from 'primeng/dialog';
 import { HeaderComponent } from '../core/components/header/header.component';
 import { FooterComponent } from '../core/components/footer/footer.component';
+import { SkipLinksComponent } from 'src/app/features/shared/components/rgaa/skip-links/skip-links.component';
 
 const COMPONENTS = [
 	AboutComponent,
@@ -74,9 +75,9 @@ const MATERIAL_MODULES = [
 ];
 
 @NgModule({
-	declarations: COMPONENTS,
+	declarations: [COMPONENTS, SkipLinksComponent],
 	imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule, RouterModule, DialogModule],
-	exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS],
+	exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS, SkipLinksComponent],
 	providers: [ConfirmationService],
 })
 export class SharedModule {}

src/assets/i18n/en.json

@@ -20,7 +20,11 @@
         "on": "of",
         "no_title": "(no title)",
 				"remove": "Remove",
-        "save": "Save"
+        "save": "Save",
+			"skip_links": {
+				"go_to_content":"Go to content",
+				"skip_this_step":"Skip this step"
+			}
     },
     "PAGE_NOT_FOUND": {
         "DEFAULT": "This page doesn’t exist.",

src/assets/i18n/fr.json

@@ -20,7 +20,11 @@
         "no_title": "(aucun titre)",
         "next": "Suivant",
         "remove": "Supprimer",
-        "save": "Enregistrer"
+        "save": "Enregistrer",
+			"skip_links": {
+				"go_to_content":"Aller au contenu",
+				"skip_this_step":"Passer cette étape"
+			}
     },
     "PAGE_NOT_FOUND": {
         "DEFAULT": "Cette page n’existe pas.",