:gears: RGAA skip links shown on keyboard nav

This commit is contained in:
tykayn 2022-03-21 12:26:45 +01:00 committed by Baptiste Lemoine
parent 2dd8c8e825
commit 9de903f867
19 changed files with 105 additions and 24 deletions

View File

@ -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 {}

View File

@ -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}]`;

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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-->

View File

@ -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=" ">

View File

@ -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"

View File

@ -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"

View File

@ -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;

View File

@ -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>

View File

@ -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;
}
}
}

View File

@ -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();
});
});

View File

@ -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 {}
}

View File

@ -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 {}

View File

@ -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 doesnt exist.",

View File

@ -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 nexiste pas.",