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

- {{ 'hours.modal.title' | translate }} -

-
+
- +

+ {{ 'hours.modal.title' | translate }} +

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" > @@ -22,41 +23,54 @@ [draggable]="false" [showHeader]="false" [resizable]="true" + [attr.aria-labelledby]="'popup.languages.title' | translate" + role="dialog" + id="lang_selector_modale" > -
+
+
+
+ +
+
+
+

+ {{ 'popup.languages.title' | translate }} +

+ +
-

- {{ 'popup.languages.title' | translate }} -

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