mirror of
https://github.com/bitwarden/browser
synced 2026-01-11 04:53:49 +00:00
Change links to buttons
- more semantically accurate, will expose these as buttons to assistive technologies - note: while having block-level elements like `<div>` inside a `<button>` is an html validation error, it does not affect functionality as long as there's no more structure inside it
This commit is contained in:
Patrick H. Lauke
@@ -56,17 +56,17 @@
|
||||
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
|
||||
aria-hidden="true"></i>
|
||||
</button>
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
<button type="button" class="row-btn" appStopClick appBlurClick
|
||||
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
|
||||
*ngIf="cipher.viewPassword">
|
||||
<i class="fa fa-lg" aria-hidden="true"
|
||||
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
|
||||
</a>
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
</button>
|
||||
<button type="button" class="row-btn" appStopClick appBlurClick
|
||||
appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()"
|
||||
*ngIf="cipher.viewPassword">
|
||||
<i class="fa fa-lg fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
@@ -90,11 +90,11 @@
|
||||
name="Card.Number" [(ngModel)]="cipher.card.number" appInputVerbatim>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
<button type="button" class="row-btn" appStopClick appBlurClick
|
||||
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()">
|
||||
<i class="fa fa-lg" aria-hidden="true"
|
||||
[ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
@@ -121,11 +121,11 @@
|
||||
name="Card.Code" [(ngModel)]="cipher.card.code" appInputVerbatim>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
<button type="button" class="row-btn" appStopClick appBlurClick
|
||||
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
|
||||
<i class="fa fa-lg" aria-hidden="true"
|
||||
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -225,9 +225,9 @@
|
||||
<ng-container *ngIf="cipher.login.hasUris">
|
||||
<div class="box-content-row box-content-row-multi" appBoxRow
|
||||
*ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
|
||||
<a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
|
||||
<button type="button" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
|
||||
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
|
||||
</a>
|
||||
</button>
|
||||
<div class="row-main">
|
||||
<label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
|
||||
<input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri"
|
||||
@@ -251,21 +251,21 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a *ngIf="currentUris && currentUris.length" class="row-btn" href="#" appStopClick
|
||||
<button type="button" *ngIf="currentUris && currentUris.length" class="row-btn" appStopClick
|
||||
appBlurClick appA11yTitle="{{'toggleCurrentUris' | i18n}}" (click)="toggleUriInput(u)">
|
||||
<i aria-hidden="true" class="fa fa-lg fa-list"></i>
|
||||
</a>
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
</button>
|
||||
<button type="button" class="row-btn" appStopClick appBlurClick
|
||||
appA11yTitle="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
|
||||
<i class="fa fa-lg fa-cog" aria-hidden="true"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<a href="#" appStopClick appBlurClick (click)="addUri()"
|
||||
<button type="button" appStopClick appBlurClick (click)="addUri()"
|
||||
class="box-content-row box-content-row-newmulti">
|
||||
<i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newUri' | i18n}}
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" *ngIf="showAutoFillOnPageLoadOptions">
|
||||
@@ -301,17 +301,17 @@
|
||||
<input id="passwordPrompt" type="checkbox" name="PasswordPrompt" [ngModel]="reprompt"
|
||||
(change)="repromptChanged()">
|
||||
</div>
|
||||
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
|
||||
<button type="button" class="box-content-row box-content-row-flex text-default" appStopClick appBlurClick
|
||||
(click)="attachments()" *ngIf="editMode && showAttachments && !cloneMode">
|
||||
<div class="row-main">{{'attachments' | i18n}}</div>
|
||||
<i class="fa fa-external-link fa-lg fa-fw" aria-hidden="true" *ngIf="openAttachmentsInPopup"></i>
|
||||
<i class="fa fa-chevron-right row-sub-icon" aria-hidden="true" *ngIf="!openAttachmentsInPopup"></i>
|
||||
</a>
|
||||
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
|
||||
</button>
|
||||
<button type="button" class="box-content-row box-content-row-flex text-default" appStopClick appBlurClick
|
||||
(click)="editCollections()" *ngIf="editMode && cipher.organizationId && !cloneMode">
|
||||
<div class="row-main">{{'collections' | i18n}}</div>
|
||||
<i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
@@ -333,9 +333,9 @@
|
||||
<div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
|
||||
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
|
||||
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
|
||||
<a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
|
||||
<button type="button" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
|
||||
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
|
||||
</a>
|
||||
</button>
|
||||
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
|
||||
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
|
||||
<div class="row-main">
|
||||
@@ -352,11 +352,11 @@
|
||||
*ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
|
||||
<div class="action-buttons"
|
||||
*ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
<button type="button" class="row-btn" appStopClick appBlurClick
|
||||
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
|
||||
<i class="fa fa-lg" aria-hidden="true"
|
||||
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
@@ -364,9 +364,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-row box-content-row-newmulti" appBoxRow>
|
||||
<a href="#" appStopClick (click)="addField()">
|
||||
<button type="button" appStopClick (click)="addField()">
|
||||
<i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
|
||||
</a>
|
||||
</button>
|
||||
<label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
|
||||
<select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
|
||||
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
@@ -408,7 +408,7 @@
|
||||
</div>
|
||||
<div class="box list" *ngIf="editMode && !cloneMode">
|
||||
<div class="box-content single-line">
|
||||
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
|
||||
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="delete()"
|
||||
[appApiAction]="deletePromise" #deleteBtn>
|
||||
<div class="row-main text-danger">
|
||||
<div class="icon text-danger" aria-hidden="true">
|
||||
@@ -417,7 +417,7 @@
|
||||
</div>
|
||||
<span>{{'deleteItem' | i18n}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</content>
|
||||
|
||||
Reference in New Issue
Block a user