RGAA title hierarchy, focus on close button in popup

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

@@ -48,7 +48,9 @@
 						<span class="counter-current" *ngIf="pollService.form.value.description.length">
 							{{ pollService.form.value.description.length }} /
 						</span>
+						<p>
 							300 caractères maximum
+						</p>
 					</div>
 				</div>
 			</div>

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

@@ -4,6 +4,8 @@ import { PollService } from '../../../../../core/services/poll.service';
 import { DOCUMENT } from '@angular/common';
 import { ConfirmationService } from 'primeng/api';
 import { Router } from '@angular/router';
+import { environment } from '../../../../../../environments/environment';
+import { Title } from '@angular/platform-browser';
 
 @Component({
 	selector: 'app-step-one',
@@ -20,9 +22,11 @@ export class StepOneComponent implements OnInit {
 		public pollService: PollService,
 		@Inject(DOCUMENT) private document: any,
 		private router: Router,
+		private titleService: Title,
 		private confirmationService: ConfirmationService
 	) {
 		this.step_max = this.pollService.step_max;
+		this.titleService.setTitle(' Création de sondage - ' + environment.appTitle);
 	}
 
 	ngOnInit(): void {

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

@@ -65,24 +65,26 @@
 						alt="accueil {{ environment.appTitle }}"
 					/>
 				</a>
-				<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
+				<h1 *ngIf="pollService.step_current == 1">
+					<span class="step-title-poll">
 						{{ 'creation.title' | translate }}
-				</h2>
+					</span>
-				<h2 class="step-title-poll" *ngIf="pollService.step_current >= 2">
+					<span class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</span>
-					<span class="poll-title-filled" *ngIf="pollService.form.value.title.length">
+				</h1>
+				<h1 *ngIf="pollService.step_current >= 2">
+					<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
 						{{ pollService.form.value.title }}
 					</span>
-					<span class="poll-title-empty" *ngIf="!pollService.form.value.title.length">
+					<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
 						(Aucun titre)
 					</span>
-				</h2>
+				</h1>
-				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
 			<div class="column has-text-right">
 				<app-language-selector class="nav-button"></app-language-selector>
-				<a class="nav-button cancel-button" (click)="showCancelDialog()">
+				<button class="has-no-border nav-button cancel-button" (click)="showCancelDialog()">
 					{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
-				</a>
+				</button>
 			</div>
 		</div>
 	</div>

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

@@ -4,7 +4,7 @@
 #creation_stepper {
 	@extend .fixed-box;
 	background: $white;
-	height: 64px;
+	height: $stepper-nav-height;
 
 	a {
 		@extend .clickable;
@@ -54,8 +54,8 @@
 
 	.nav-button {
 		margin-top: 0;
-		line-height: 4.5rem;
+		line-height: $stepper-nav-height;
-		height: 4.5rem;
+		height: $stepper-nav-height;
 		display: inline-block;
 		padding-left: 1em;
 		&app-language-selector {
@@ -63,8 +63,10 @@
 		}
 	}
 	.cancel-button {
-		line-height: 4.5rem;
+		line-height: $stepper-nav-height;
-		height: 4.5rem;
+		height: $stepper-nav-height;
+		padding: 0 1rem;
+		color: $secondary_color;
 
 		&:hover {
 			color: $font_color;
@@ -86,6 +88,8 @@
 		font-size: 0.85rem;
 		color: $d-neutral;
 		margin-bottom: 0rem;
+		padding-top: 1rem;
+		display: block;
 	}
 
 	h2 {

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

@@ -1,8 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
 import { PollService } from '../../../core/services/poll.service';
 import { environment } from '../../../../environments/environment';
-import { ConfirmationService } from 'primeng/api';
 import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
 	selector: 'app-stepper',
@@ -20,9 +20,11 @@ export class StepperComponent {
 	public environment = environment;
 	public show_shortcuts = environment.showStepperShortcuts;
 	display_cancel_dialog: boolean;
+
 	constructor(
 		public pollService: PollService,
-		private confirmationService: ConfirmationService,
+		@Inject(DOCUMENT) private document: any,
+		private cd: ChangeDetectorRef,
 		private router: Router
 	) {
 		this.step_current = this.pollService.step_current;
@@ -30,7 +32,16 @@ export class StepperComponent {
 
 	showCancelDialog() {
 		this.display_cancel_dialog = true;
+		this.cd.detectChanges();
+		let buttonClosepopup = this.document.querySelector('.p-dialog-header-close');
+		if (buttonClosepopup) {
+			buttonClosepopup.focus();
+			console.log('button close found');
+		} else {
+			console.log('not found');
 		}
+	}
+
 	goToHome() {
 		this.display_cancel_dialog = false;
 		this.router.navigate(['/']);

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -7,6 +7,7 @@
 
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden">
+			<button>
 				{{ 'selector.lang' | translate }}
 				<span class="lang-title-long is-hidden-mobile">
 					{{ 'LANGUAGES.' + language | translate }}
@@ -14,6 +15,7 @@
 				<span class="lang-title-short is-visible-mobile">
 					{{ 'LANGUAGES_SHORT.' + language | translate }}
 				</span>
+			</button>
 		</label>
 		<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
 			<option *ngFor="let language of availableLanguages" value="{{ language }}">

src/styles/dev-utilities/_helpers.scss

@@ -77,3 +77,7 @@
 		}
 	}
 }
+
+.has-no-border {
+	border: none;
+}

src/styles/partials/_buttons.scss

@@ -8,12 +8,21 @@ button,
 	@extend .is-block;
 }
 
-.btn--primary {
+button {
+	&.is-white {
+		&:hover {
+			background: $secondary_color;
+			color: $white;
+		}
+	}
+}
+
+.btn-primary {
 	@extend .is-primary;
 	color: $white !important;
 }
 
-.btn--warning {
+.is-warning {
 	@extend .is-warning;
 }
 

src/styles/variables.scss

@@ -74,7 +74,7 @@ $mobile-size: 25rem;
 $header-nav-height: 4.25rem;
 $header-nav-inner-height: 4rem;
 $widescreen-width-main-column: 75rem;
-
+$stepper-nav-height: 4.5rem;
 // datepicker
 $cell-size: 30px;
 $cell-size-desktop: 40px;