bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +00:00
Code Issues Releases Wiki Activity

[SG-632] - Change forwarded providers radio buttons list to dropdown (#4045)

Browse Source 
* SG-632 - Changed forwarded providers list of radio buttons to dropdown

* SG-632 - Added role attributes to improve accessibility.

* SG-632 - Added sorting to array and empty option

* SG-632 - Fix styling to match standards.
This commit is contained in:
Carlos Gonçalves
2022-11-21 17:08:47 +00:00
committed by GitHub
parent 156eabe774
commit a6226c7c90
4 changed files with 51 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/browser/src/popup/generator/generator.component.html
View File

@@ -320,22 +320,18 @@
</div> </div>
<div class="box" *ngIf="usernameOptions.type === 'forwarded'"> <div class="box" *ngIf="usernameOptions.type === 'forwarded'">
<div class="box-content"> <div class="box-content">
<div class="box-content-row" role="radiogroup" aria-labelledby="forwardTypeHeading"> <div class="box-content-row" role="listbox" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading" class="radio-header">{{ "service" | i18n }}</label> <label id="forwardTypeHeading">{{ "service" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions"> <select
<input id="ForwardTypeDropdown"
type="radio" name="ForwardType"
[(ngModel)]="usernameOptions.forwardedService" [(ngModel)]="usernameOptions.forwardedService"
name="ForwardType" (change)="saveUsernameOptions()"
id="forwardtype_{{ o.value }}" >
[value]="o.value" <option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
(change)="saveUsernameOptions()"
[checked]="usernameOptions.forwardedService === o.value"
/>
<label for="forwardtype_{{ o.value }}">
{{ o.name }} {{ o.name }}
</label> </option>
</div> </select>
</div> </div>
<ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'"> <ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>

26
apps/desktop/src/app/vault/generator.component.html
View File

@@ -353,22 +353,18 @@
</div> </div>
<div class="box" *ngIf="usernameOptions.type === 'forwarded'" [hidden]="!showOptions"> <div class="box" *ngIf="usernameOptions.type === 'forwarded'" [hidden]="!showOptions">
<div class="box-content condensed"> <div class="box-content condensed">
<div class="box-content-row" role="radiogroup" aria-labelledby="forwardTypeHeading"> <div class="box-content-row" role="listbox" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading" class="radio-header">{{ "service" | i18n }}</label> <label id="forwardTypeHeading">{{ "service" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions"> <select
<input id="ForwardTypeDropdown"
type="radio" name="ForwardType"
[(ngModel)]="usernameOptions.forwardedService" [(ngModel)]="usernameOptions.forwardedService"
name="ForwardType" (change)="saveUsernameOptions()"
id="forwardtype_{{ o.value }}" >
[value]="o.value" <option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
(change)="saveUsernameOptions()"
[checked]="usernameOptions.forwardedService === o.value"
/>
<label for="forwardtype_{{ o.value }}">
{{ o.name }} {{ o.name }}
</label> </option>
</div> </select>
</div> </div>
<ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'"> <ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>

26
apps/web/src/app/tools/generator.component.html
View File

@@ -266,23 +266,19 @@
</div> </div>
</div> </div>
<ng-container *ngIf="usernameOptions.type === 'forwarded'"> <ng-container *ngIf="usernameOptions.type === 'forwarded'">
<div class="form-group"> <div class="form-group" role="listbox">
<label class="d-block">{{ "service" | i18n }}</label> <label class="d-block">{{ "service" | i18n }}</label>
<div class="form-check" *ngFor="let o of forwardOptions"> <select
<input id="ForwardTypeDropdown"
class="form-check-input" name="ForwardType"
type="radio" [(ngModel)]="usernameOptions.forwardedService"
[(ngModel)]="usernameOptions.forwardedService" (change)="saveUsernameOptions()"
name="ForwardType" class="form-control w-auto"
id="forwardtype_{{ o.value }}" >
[value]="o.value" <option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
(change)="saveUsernameOptions()"
[checked]="usernameOptions.forwardedService === o.value"
/>
<label class="form-check-label" for="forwardtype_{{ o.value }}">
{{ o.name }} {{ o.name }}
</label> </option>
</div> </select>
</div> </div>
<div class="row" *ngIf="usernameOptions.forwardedService === 'simplelogin'"> <div class="row" *ngIf="usernameOptions.forwardedService === 'simplelogin'">
<div class="form-group col-4"> <div class="form-group col-4">

25
libs/angular/src/components/generator.component.ts
View File

@@ -70,13 +70,7 @@ export class GeneratorComponent implements OnInit {
]; ];
this.subaddressOptions = [{ name: i18nService.t("random"), value: "random" }]; this.subaddressOptions = [{ name: i18nService.t("random"), value: "random" }];
this.catchallOptions = [{ name: i18nService.t("random"), value: "random" }]; this.catchallOptions = [{ name: i18nService.t("random"), value: "random" }];
this.forwardOptions = [ this.initForwardOptions();
{ name: "SimpleLogin", value: "simplelogin" },
{ name: "AnonAddy", value: "anonaddy" },
{ name: "Firefox Relay", value: "firefoxrelay" },
{ name: "Fastmail", value: "fastmail" },
{ name: "DuckDuckGo", value: "duckduckgo" },
];
} }
async ngOnInit() { async ngOnInit() {
@@ -239,4 +233,21 @@ export class GeneratorComponent implements OnInit {
this.enforcedPasswordPolicyOptions this.enforcedPasswordPolicyOptions
); );
} }
private async initForwardOptions() {
this.forwardOptions = [
{ name: "AnonAddy", value: "anonaddy" },
{ name: "DuckDuckGo", value: "duckduckgo" },
{ name: "Fastmail", value: "fastmail" },
{ name: "Firefox Relay", value: "firefoxrelay" },
{ name: "SimpleLogin", value: "simplelogin" },
];
this.usernameOptions = await this.usernameGenerationService.getOptions();
if (this.usernameOptions.forwardedService == null) {
this.forwardOptions.push({ name: "", value: null });
}
this.forwardOptions = this.forwardOptions.sort((a, b) => a.name.localeCompare(b.name));
}
} }