Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

lang selector aria and ids

Browse Source
This commit is contained in:
Tykayn 2022-02-15 12:32:27 +01:00 committed by tykayn
parent 00a2dd7e1d
commit 5d25754c16
4 changed files with 57 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

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

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

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

9
src/app/shared/components/selectors/language-selector/language-selector.component.scss
View File

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

6
src/app/shared/components/selectors/language-selector/language-selector.component.ts
View File

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