diff --git a/apps/browser/src/auth/popup/home.component.html b/apps/browser/src/auth/popup/home.component.html index da208a8d50..6b42033c4b 100644 --- a/apps/browser/src/auth/popup/home.component.html +++ b/apps/browser/src/auth/popup/home.component.html @@ -9,7 +9,7 @@ <label for="email">{{ "emailAddress" | i18n }}</label> <input id="email" type="email" formControlName="email" appInputVerbatim="false" /> </div> - <environment-selector class="environment-selector-padding"></environment-selector> + <environment-selector></environment-selector> <div class="remember-email-check"> <input id="rememberEmail" diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss index 1ac0f4240b..f6adba86c2 100644 --- a/apps/browser/src/popup/scss/environment.scss +++ b/apps/browser/src/popup/scss/environment.scss @@ -51,15 +51,11 @@ html.browser_safari { color: $text-muted; line-height: 25px; font-weight: 400; - padding-left: 5px; + padding-left: 15px; - label { + span { font-weight: 600; - } - - a, - a label:hover { - cursor: pointer; + font-size: $font-size-small; } } @@ -91,7 +87,3 @@ html.browser_safari { } } } - -.environment-selector-padding { - padding-left: 10px; -} diff --git a/apps/desktop/src/scss/environment.scss b/apps/desktop/src/scss/environment.scss index eae8b4a2d5..0f28ba1954 100644 --- a/apps/desktop/src/scss/environment.scss +++ b/apps/desktop/src/scss/environment.scss @@ -18,15 +18,11 @@ color: $text-muted; line-height: 25px; font-weight: 400; - padding-left: 5px; + padding-left: 15px; - label { + span { font-weight: 600; - } - - a, - a label:hover { - cursor: pointer; + font-size: $font-size-small; } } diff --git a/libs/angular/src/auth/components/environment-selector.component.html b/libs/angular/src/auth/components/environment-selector.component.html index 4e8d33bde6..2765787c31 100644 --- a/libs/angular/src/auth/components/environment-selector.component.html +++ b/libs/angular/src/auth/components/environment-selector.component.html @@ -1,40 +1,51 @@ -<label class="environment-selector-btn"> +<div class="environment-selector-btn"> {{ "loggingInOn" | i18n }}: - <a + <button + type="button" (click)="toggle(null)" cdkOverlayOrigin #trigger="cdkOverlayOrigin" - aria-haspopup="menu" + aria-haspopup="dialog" aria-controls="cdk-overlay-container" [ngSwitch]="selectedEnvironment" > - <label *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{ + <span *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{ "usDomain" | i18n - }}</label> - <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{ + }}</span> + <span *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{ "euDomain" | i18n - }}</label> - <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{ + }}</span> + <span *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{ "selfHostedServer" | i18n - }}</label> + }}</span> <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i> - </a> -</label> + </button> +</div> <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" - (backdropClick)="close()" - (detach)="close()" [cdkConnectedOverlayOpen]="isOpen" [cdkConnectedOverlayPositions]="overlayPosition" + [cdkConnectedOverlayHasBackdrop]="true" + [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'" + (backdropClick)="isOpen = false" + (detach)="close()" > <div class="box-content"> - <div class="environment-selector-dialog" [@transformPanel]="'open'" role="dialog"> + <div + class="environment-selector-dialog" + [@transformPanel]="'open'" + cdkTrapFocus + cdkTrapFocusAutoCapture + role="dialog" + aria-modal="true" + > <button type="button" class="environment-selector-dialog-item" (click)="toggle(ServerEnvironmentType.US)" + [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.US ? 'true' : 'false'" > <i class="bwi bwi-fw bwi-sm bwi-check" @@ -51,6 +62,7 @@ type="button" class="environment-selector-dialog-item" (click)="toggle(ServerEnvironmentType.EU)" + [attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.EU ? 'true' : 'false'" *ngIf="euServerFlagEnabled" > <i @@ -68,6 +80,9 @@ type="button" class="environment-selector-dialog-item" (click)="toggle(ServerEnvironmentType.SelfHosted)" + [attr.aria-pressed]=" + selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'true' : 'false' + " > <i class="bwi bwi-fw bwi-sm bwi-check"