From 5d25754c1652a4c6bda55fa05fec7fedcc5e6910 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 15 Feb 2022 12:32:27 +0100
Subject: [PATCH] lang selector aria and ids

---
 .../steps/step-four/step-four.component.html  | 10 ++-
 .../language-selector.component.html          | 68 +++++++++++--------
 .../language-selector.component.scss          |  9 ++-
 .../language-selector.component.ts            |  6 +-
 4 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html
index 4a59b629..1816b7f4 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.html
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.html
@@ -82,11 +82,7 @@
 >
 	<ng-template pTemplate="titlebar">
 		<div class="columns">
-			<div class="column">
-				<h1 class="title">
-					{{ 'hours.modal.title' | translate }}
-				</h1>
-			</div>
+			<div class="column"></div>
 			<div class="column is-narrow">
 				<button
 					id="close_dialog"
@@ -97,7 +93,9 @@
 				</button>
 			</div>
 		</div>
-
+		<h1 class="title">
+			{{ 'hours.modal.title' | translate }}
+		</h1>
 		<section class="same-time-slices">
 			<section class="same-time-slices">
 				<section class="proposals" *ngIf="environment.creation_display_proposals_time_slices">
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 7d238486..2367b200 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
@@ -3,6 +3,7 @@
 		id="lang_button_popup{{ idSuffix }}"
 		class="lang-button"
 		(click)="openDialogLang()"
+		[attr.aria-controls]="'lang_selector_modale'"
 		[attr.aria-label]="'LANGUAGES.' + currentLang.toUpperCase() | translate"
 	>
 		<i class="fa fa-language"></i>
@@ -22,41 +23,54 @@
 		[draggable]="false"
 		[showHeader]="false"
 		[resizable]="true"
+		[attr.aria-labelledby]="'popup.languages.title' | translate"
+		role="dialog"
+		id="lang_selector_modale"
 	>
 		<ng-template pTemplate="titlebar">
-			<div class="top">
+			<div class="columns">
+				<div class="column">
+					<div class="top">
+						<button
+							id="close_dialog{{ idSuffix }}"
+							class="button cancel-button-reject pull-right img-marged-left"
+							lang="{{ currentLang }}"
+							(click)="focusOnCancelButton()"
+						>
+							{{ 'SENTENCES.Close' | translate }}
+							<img class="icon" src="assets/icons/x_blue.svg" />
+						</button>
+					</div>
+				</div>
+			</div>
+			<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
+				{{ 'popup.languages.title' | translate }}
+			</h1>
+
+			<div class="list-of-langs">
 				<button
-					id="close_dialog{{ idSuffix }}"
-					class="button cancel-button-reject pull-right img-marged-left"
-					(click)="focusOnCancelButton()"
+					class="lang-element button"
+					[ngClass]="{ 'is-primary': language_to_apply === language, 'is-current': language === currentLang }"
+					*ngFor="let language of availableLanguages"
+					value="{{ language }}"
+					(click)="language_to_apply = language"
 				>
-					{{ 'SENTENCES.Close' | translate }}
-					<img class="icon" src="assets/icons/x_blue.svg" />
+					<!--				{{ language }} - -->
+					{{ language }} -
+					{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
 				</button>
 			</div>
-			<h2 class="title is-2 has-text-left">
-				{{ 'popup.languages.title' | translate }}
-			</h2>
-
-			<button
-				class="lang-element button"
-				[ngClass]="{ 'is-primary': language_to_apply === language, 'is-current': language === currentLang }"
-				*ngFor="let language of availableLanguages"
-				value="{{ language }}"
-				(click)="language_to_apply = language"
-			>
-				<!--				{{ language }} - -->
-				{{ language }} -
-				{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
-			</button>
 		</ng-template>
+
 		<ng-template pTemplate="footer">
-			<button class="button" (click)="applyLangAndClosePopup()">
-				{{ 'SENTENCES.Cancel' | translate }}
-			</button>
-			<button class="button is-primary" (click)="applyLangAndClosePopup()">
-				{{ 'nav.save' | translate }}
-			</button>
+			<div class="buttons-bottom">
+				<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
+					{{ 'SENTENCES.Cancel' | translate }}
+				</button>
+				<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
+					{{ 'nav.save' | translate }}
+				</button>
+			</div>
 		</ng-template>
 	</p-dialog>
 </div>
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.scss b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
index 7b367dbe..b0227386 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.scss
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.scss
@@ -35,7 +35,14 @@
 .lang-element {
 	float: left;
 	margin: 0.5em;
-	min-width: 11em;
+	min-width: 8em;
+	border: 0;
+	border-radius: 2rem;
+	padding: 0.5rem 0.25rem;
+
+	&:hover {
+		background: $d-neutral;
+	}
 }
 
 .is-current {
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.ts b/src/app/shared/components/selectors/language-selector/language-selector.component.ts
index 85d87305..71e2f625 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.ts
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
 
 import { LanguageEnum } from '../../../../core/enums/language.enum';
 import { LanguageService } from '../../../../core/services/language.service';
@@ -23,6 +23,7 @@ export class LanguageSelectorComponent implements OnInit {
 		private languageService: LanguageService,
 		private storageService: StorageService,
 		private pollService: PollService,
+		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any
 	) {}
 
@@ -78,7 +79,8 @@ export class LanguageSelectorComponent implements OnInit {
 
 	openDialogLang() {
 		this.display_lang_dialog = true;
-		let elem = this.document.querySelector('#lang_button_popup');
+		this.cd.detectChanges();
+		let elem = this.document.querySelector('#close_dialog');
 		if (elem) {
 			elem.focus();
 		}