Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00
Code Issues Projects Releases Wiki Activity

[PM-2532][PM-2430][Desktop] Fix Region Selector Issues (#5824)

Browse Source 
* 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>
This commit is contained in:
rr-bw 2023-09-18 16:33:11 -07:00 committed by GitHub
parent b6ea1b1f40
commit d21cc261e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/auth/popup/home.component.html
View File

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

14
apps/browser/src/popup/scss/environment.scss
View File

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

10
apps/desktop/src/scss/environment.scss
View File

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

43
libs/angular/src/auth/components/environment-selector.component.html
View File

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