Upstream/bitwarden-desktop
1
0
Fork 0
mirror of https://github.com/bitwarden/desktop.git synced 2024-11-28 12:35:40 +01:00
Code Issues Projects Releases Wiki Activity

aria hide page content when modal shown

Browse Source
This commit is contained in:
Kyle Spearrin 2019-04-02 09:15:58 -04:00
parent adff98e55a
commit 1c5233c7dd
4 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/accounts/login.component.html
View File

@ -1,4 +1,4 @@
<form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise"> <form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise" attr.aria-hidden="{{showingModal}}">
<div class="content"> <div class="content">
<img class="logo-image" alt="Bitwarden"> <img class="logo-image" alt="Bitwarden">
<p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p> <p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
@ -36,8 +36,9 @@
<div class="sub-options"> <div class="sub-options">
<a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a> <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
</div> </div>
<a href="#" appStopClick (click)="settings()" class="settings-icon"> <a href="#" appStopClick (click)="settings()" class="settings-icon" attr.aria-label="{{'settings' | i18n}}">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{'settings' | i18n}}</span> <i class="fa fa-cog fa-lg" aria-hidden="true"></i><span
aria-hidden="true">&nbsp;{{'settings' | i18n}}</span>
</a> </a>
</div> </div>
</form> </form>

12
src/app/accounts/login.component.ts
View File

@ -24,6 +24,8 @@ import { ModalComponent } from 'jslib/angular/components/modal.component';
export class LoginComponent extends BaseLoginComponent { export class LoginComponent extends BaseLoginComponent {
@ViewChild('environment', { read: ViewContainerRef }) environmentModal: ViewContainerRef; @ViewChild('environment', { read: ViewContainerRef }) environmentModal: ViewContainerRef;
showingModal = false;
constructor(authService: AuthService, router: Router, constructor(authService: AuthService, router: Router,
i18nService: I18nService, syncService: SyncService, i18nService: I18nService, syncService: SyncService,
private componentFactoryResolver: ComponentFactoryResolver, storageService: StorageService, private componentFactoryResolver: ComponentFactoryResolver, storageService: StorageService,
@ -37,9 +39,17 @@ export class LoginComponent extends BaseLoginComponent {
settings() { settings() {
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent); const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
const modal = this.environmentModal.createComponent(factory).instance; const modal = this.environmentModal.createComponent(factory).instance;
modal.onShown.subscribe(() => {
this.showingModal = true;
});
modal.onClosed.subscribe(() => {
this.showingModal = false;
modal.onShown.unsubscribe();
modal.onClosed.unsubscribe();
});
const childComponent = modal.show<EnvironmentComponent>(EnvironmentComponent, const childComponent = modal.show<EnvironmentComponent>(EnvironmentComponent,
this.environmentModal); this.environmentModal);
childComponent.onSaved.subscribe(() => { childComponent.onSaved.subscribe(() => {
modal.close(); modal.close();
}); });

2
src/app/accounts/two-factor.component.html
View File

@ -1,4 +1,4 @@
<form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise"> <form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise" attr.aria-hidden="{{showingModal}}">
<div class="content"> <div class="content">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p> <p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>

12
src/app/accounts/two-factor.component.ts
View File

@ -28,6 +28,8 @@ import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/comp
export class TwoFactorComponent extends BaseTwoFactorComponent { export class TwoFactorComponent extends BaseTwoFactorComponent {
@ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef; @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
showingModal = false;
constructor(authService: AuthService, router: Router, constructor(authService: AuthService, router: Router,
i18nService: I18nService, apiService: ApiService, i18nService: I18nService, apiService: ApiService,
platformUtilsService: PlatformUtilsService, syncService: SyncService, platformUtilsService: PlatformUtilsService, syncService: SyncService,
@ -41,9 +43,17 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
anotherMethod() { anotherMethod() {
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent); const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
const modal = this.twoFactorOptionsModal.createComponent(factory).instance; const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
modal.onShown.subscribe(() => {
this.showingModal = true;
});
modal.onClosed.subscribe(() => {
this.showingModal = false;
modal.onShown.unsubscribe();
modal.onClosed.unsubscribe();
});
const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent, const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
this.twoFactorOptionsModal); this.twoFactorOptionsModal);
childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => { childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
modal.close(); modal.close();
this.selectedProviderType = provider; this.selectedProviderType = provider;