mirror of
https://github.com/bitwarden/browser
synced 2026-02-11 22:13:32 +00:00
d21cc261e6
* pull in a11y changes from PR #5532 * add focus to popup when selected via keyboard * make popup close upon outside click * prevent close() from running twice on click * pull in typo fix changes from PR #5530 (addressing PM-2433) * add class to make backdrop transparent * Change toggle button and dialog buttons for region selection (#5532) * `<a>` elements without `href` don't take focus, currently making the region selection trigger not operable with keyboard - changing to `<button>` * region buttons now convey their state (selected or not) with `aria-pressed` Co-authored-by: rr-bw <102181210+rr-bw@users.noreply.github.com> * remove span * cleanup browser styles * cleanup desktop styles --------- Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
100 lines
3.1 KiB
HTML
100 lines
3.1 KiB
HTML
<div class="environment-selector-btn">
|
|
{{ "loggingInOn" | i18n }}:
|
|
<button
|
|
type="button"
|
|
(click)="toggle(null)"
|
|
cdkOverlayOrigin
|
|
#trigger="cdkOverlayOrigin"
|
|
aria-haspopup="dialog"
|
|
aria-controls="cdk-overlay-container"
|
|
[ngSwitch]="selectedEnvironment"
|
|
>
|
|
<span *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{
|
|
"usDomain" | i18n
|
|
}}</span>
|
|
<span *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{
|
|
"euDomain" | i18n
|
|
}}</span>
|
|
<span *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
|
|
"selfHostedServer" | i18n
|
|
}}</span>
|
|
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<ng-template
|
|
cdkConnectedOverlay
|
|
[cdkConnectedOverlayOrigin]="trigger"
|
|
[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'"
|
|
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"
|
|
style="padding-bottom: 1px"
|
|
aria-hidden="true"
|
|
[style.visibility]="
|
|
selectedEnvironment === ServerEnvironmentType.US ? 'visible' : 'hidden'
|
|
"
|
|
></i>
|
|
<span>{{ "usDomain" | i18n }}</span>
|
|
</button>
|
|
<br />
|
|
<button
|
|
type="button"
|
|
class="environment-selector-dialog-item"
|
|
(click)="toggle(ServerEnvironmentType.EU)"
|
|
[attr.aria-pressed]="selectedEnvironment === ServerEnvironmentType.EU ? 'true' : 'false'"
|
|
*ngIf="euServerFlagEnabled"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw bwi-sm bwi-check"
|
|
style="padding-bottom: 1px"
|
|
aria-hidden="true"
|
|
[style.visibility]="
|
|
selectedEnvironment === ServerEnvironmentType.EU ? 'visible' : 'hidden'
|
|
"
|
|
></i>
|
|
<span>{{ "euDomain" | i18n }}</span>
|
|
</button>
|
|
<br *ngIf="euServerFlagEnabled" />
|
|
<button
|
|
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"
|
|
style="padding-bottom: 1px"
|
|
aria-hidden="true"
|
|
[style.visibility]="
|
|
selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'visible' : 'hidden'
|
|
"
|
|
></i>
|
|
<span>{{ "selfHostedServer" | i18n }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|