From ba6f11d45ca419a4abcdb557a0261d0e17a10190 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 15 Dec 2021 18:34:39 +0100 Subject: [PATCH] RGAA title hierarchy, focus on close button in popup --- .../steps/step-one/step-one.component.html | 4 +++- .../form/steps/step-one/step-one.component.ts | 4 ++++ .../stepper/stepper.component.html | 22 ++++++++++--------- .../stepper/stepper.component.scss | 14 +++++++----- .../stepper/stepper.component.ts | 17 +++++++++++--- .../language-selector.component.html | 16 ++++++++------ src/styles/dev-utilities/_helpers.scss | 4 ++++ src/styles/partials/_buttons.scss | 13 +++++++++-- src/styles/variables.scss | 2 +- 9 files changed, 67 insertions(+), 29 deletions(-) diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.html b/src/app/features/administration/form/steps/step-one/step-one.component.html index 7f8cd6ef..1e3801db 100644 --- a/src/app/features/administration/form/steps/step-one/step-one.component.html +++ b/src/app/features/administration/form/steps/step-one/step-one.component.html @@ -48,7 +48,9 @@ {{ pollService.form.value.description.length }} / - 300 caractères maximum +

+ 300 caractères maximum +

diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.ts b/src/app/features/administration/form/steps/step-one/step-one.component.ts index 3ce8b060..127cfb56 100644 --- a/src/app/features/administration/form/steps/step-one/step-one.component.ts +++ b/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 { diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html index e2620d58..27e14b1e 100644 --- a/src/app/features/administration/stepper/stepper.component.html +++ b/src/app/features/administration/stepper/stepper.component.html @@ -65,24 +65,26 @@ alt="accueil {{ environment.appTitle }}" /> -

- {{ 'creation.title' | translate }} -

-

- +

+ + {{ 'creation.title' | translate }} + + Étape {{ step_current }} sur {{ step_max }} +

+

+ {{ pollService.form.value.title }} - + (Aucun titre) -

-

Étape {{ step_current }} sur {{ step_max }}

+

- +
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss index 7adb462b..a2356e23 100644 --- a/src/app/features/administration/stepper/stepper.component.scss +++ b/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; - height: 4.5rem; + line-height: $stepper-nav-height; + height: $stepper-nav-height; display: inline-block; padding-left: 1em; &app-language-selector { @@ -63,8 +63,10 @@ } } .cancel-button { - line-height: 4.5rem; - height: 4.5rem; + line-height: $stepper-nav-height; + 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 { diff --git a/src/app/features/administration/stepper/stepper.component.ts b/src/app/features/administration/stepper/stepper.component.ts index 1db62cb6..b152232f 100644 --- a/src/app/features/administration/stepper/stepper.component.ts +++ b/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(['/']); diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html index 0bd20159..39484f4c 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.html +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html @@ -7,13 +7,15 @@