[PM-281] A11y visual distinction required for page links (#9878)

* [PM-281] Visual distinction required for login page links

* add bitLink to report links

* add bitLink to billing history

* [PM-281] Adding more references to bitLink and incorporating changes to aria labels for a variety of buttons

* Added editItemWithName to announce links within reports even better

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Cesar Gonzalez 2024-09-20 09:04:48 -05:00 committed by GitHub
parent 8f05581ba0
commit c276d5dfa5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 112 additions and 44 deletions

View File

@ -40,7 +40,7 @@
bitLink
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutMemberRoles' | i18n }}"
href="https://bitwarden.com/help/user-types-access-control/"
slot="end"
>

View File

@ -39,7 +39,7 @@
<p bitTypography="body1">
{{ "apiKeyDesc" | i18n }}
<a bitLink href="https://docs.bitwarden.com" target="_blank" rel="noreferrer">
{{ "learnMore" | i18n }}
{{ "learnMoreAboutApi" | i18n }}
</a>
</p>
<button type="button" bitButton buttonType="secondary" (click)="viewApiKey()">

View File

@ -43,7 +43,7 @@
</div>
<p bitTypography="body1" class="tw-mb-0">
{{ "troubleLoggingIn" | i18n }}<br />
<a routerLink="/login">{{ "useADifferentLogInMethod" | i18n }}</a>
<a bitLink routerLink="/login">{{ "useADifferentLogInMethod" | i18n }}</a>
</p>
</div>
</div>

View File

@ -48,14 +48,15 @@
<p class="tw-m-0 tw-text-sm">
{{ "newAroundHere" | i18n }}
<!-- Two notes:
(1) We check the value and validity of email so we don't send an invalid email to autofill
<!-- Two notes:
(1) We check the value and validity of email so we don't send an invalid email to autofill
on load of register for both enter and mouse based navigation
(2) We use mousedown to trigger navigation so that the onBlur form validation does not fire
and move the create account link down the page on click which causes the user to miss actually
clicking on the link. Mousedown fires before onBlur.
(2) We use mousedown to trigger navigation so that the onBlur form validation does not fire
and move the create account link down the page on click which causes the user to miss actually
clicking on the link. Mousedown fires before onBlur.
-->
<a
bitLink
[routerLink]="registerRoute$ | async"
[queryParams]="emailFormControl.valid ? { email: emailFormControl.value } : {}"
(mousedown)="goToRegister()"
@ -72,6 +73,7 @@
<button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
</bit-form-field>
<a
bitLink
class="tw-mt-2"
routerLink="/hint"
(mousedown)="goToHint()"
@ -120,7 +122,7 @@
<div class="tw-m-0 tw-text-sm">
<p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
<a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
<a bitLink [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
</div>
</div>
</form>

View File

@ -115,11 +115,11 @@
<bit-label for="register-form-input-accept-policies">
{{ "acceptPolicies" | i18n }}<br />
<a href="https://bitwarden.com/terms/" target="_blank" rel="noreferrer">{{
<a bitLink href="https://bitwarden.com/terms/" target="_blank" rel="noreferrer">{{
"termsOfService" | i18n
}}</a
>,
<a href="https://bitwarden.com/privacy/" target="_blank" rel="noreferrer">{{
<a bitLink href="https://bitwarden.com/privacy/" target="_blank" rel="noreferrer">{{
"privacyPolicy" | i18n
}}</a>
</bit-label>
@ -151,7 +151,7 @@
</div>
<p class="tw-m-0 tw-mt-5 tw-text-sm">
{{ "alreadyHaveAccount" | i18n }}
<a routerLink="/login">{{ "logIn" | i18n }}</a>
<a bitLink routerLink="/login">{{ "logIn" | i18n }}</a>
</p>
<bit-error-summary *ngIf="showErrorSummary" [formGroup]="formGroup"></bit-error-summary>
</div>

View File

@ -104,7 +104,7 @@
href="https://bitwarden.com/help/account-encryption-key/#rotate-your-encryption-key"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'impactOfRotatingYourEncryptionKey' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>

View File

@ -21,7 +21,7 @@
rel="noreferrer"
bitLink
linkType="primary"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutUserAccess' | i18n }}"
href="https://bitwarden.com/help/emergency-access/#user-access"
slot="end"
>

View File

@ -9,7 +9,7 @@
target="_blank"
rel="noreferrer"
>
{{ "learnMore" | i18n }}.
{{ "learnMoreAboutEmergencyAccess" | i18n }}
</a>
</p>
<bit-callout *ngIf="isOrganizationOwner" type="warning" title="{{ 'warning' | i18n }}">{{

View File

@ -21,7 +21,7 @@
href="https://bitwarden.com/help/kdf-algorithms"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutEncryptionAlgorithms' | i18n }}"
slot="end"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
@ -57,7 +57,7 @@
href="https://bitwarden.com/help/what-encryption-is-used/#changing-kdf-iterations"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutKDFIterations' | i18n }}"
slot="end"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>

View File

@ -11,7 +11,7 @@
<p>
<ng-container *ngIf="isEnterpriseOrg; else teamsDescription">
{{ "twoStepLoginEnterpriseDescStart" | i18n }}
<a routerLink="../policies">{{ "twoStepLoginPolicy" | i18n }}.</a>
<a bitLink routerLink="../policies">{{ "twoStepLoginPolicy" | i18n }}.</a>
<br />
{{ "twoStepLoginOrganizationDuoDesc" | i18n }}
<br />

View File

@ -42,7 +42,7 @@
aria-hidden="true"
></i>
-
<a href="#" appStopClick (click)="remove(k)">{{ "remove" | i18n }}</a>
<a bitLink href="#" appStopClick (click)="remove(k)">{{ "remove" | i18n }}</a>
</ng-container>
</li>
</ul>

View File

@ -15,7 +15,13 @@
>
<i class="bwi bwi-file-pdf" aria-hidden="true"></i
></a>
<a href="{{ i.url }}" target="_blank" rel="noreferrer" title="{{ 'viewInvoice' | i18n }}">
<a
bitLink
href="{{ i.url }}"
target="_blank"
rel="noreferrer"
title="{{ 'viewInvoice' | i18n }}"
>
{{ "invoiceNumber" | i18n: i.number }}</a
>
</td>

View File

@ -55,7 +55,7 @@
target="_blank"
rel="noreferrer"
class="hover:tw-no-underline"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'whatIsACvvNumber' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>

View File

@ -56,7 +56,7 @@
href="https://bitwarden.com/help/localization/"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutLocalization' | i18n }}"
slot="end"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
@ -76,7 +76,7 @@
href="https://bitwarden.com/help/website-icons/"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutWebsiteIcons' | i18n }}"
slot="end"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>

View File

@ -6,7 +6,7 @@
href="https://bitwarden.com/help/fingerprint-phrase/"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutYourAccountFingerprintPhrase' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i
></a>

View File

@ -45,10 +45,11 @@
<td bitCell>
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
<a
bitLink
href="#"
appStopClick
(click)="selectCipher(r)"
title="{{ 'editItem' | i18n }}"
title="{{ 'editItemWithName' | i18n: r.name }}"
>{{ r.name }}</a
>
</ng-container>

View File

@ -48,10 +48,11 @@
</td>
<td bitCell>
<a
bitLink
href="#"
appStopClick
(click)="selectCipher(r)"
title="{{ 'editItem' | i18n }}"
title="{{ 'editItemWithName' | i18n: r.name }}"
>{{ r.name }}</a
>
<ng-container *ngIf="!organization && r.organizationId">

View File

@ -50,10 +50,11 @@
<td bitCell>
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
<a
bitLink
href="#"
appStopClick
(click)="selectCipher(r)"
title="{{ 'editItem' | i18n }}"
title="{{ 'editItemWithName' | i18n: r.name }}"
>{{ r.name }}</a
>
</ng-container>

View File

@ -47,9 +47,15 @@
<app-vault-icon [cipher]="r"></app-vault-icon>
</td>
<td bitCell>
<a href="#" appStopClick (click)="selectCipher(r)" title="{{ 'editItem' | i18n }}">{{
r.name
}}</a>
<a
bitLink
href="#"
appStopClick
(click)="selectCipher(r)"
title="{{ 'editItemWithName' | i18n: r.name }}"
>
{{ r.name }}
</a>
<ng-container *ngIf="!organization && r.organizationId">
<i
class="bwi bwi-collection"

View File

@ -48,10 +48,11 @@
<td bitCell>
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
<a
bitLink
href="#"
appStopClick
(click)="selectCipher(r)"
title="{{ 'editItem' | i18n }}"
title="{{ 'editItemWithName' | i18n: r.name }}"
>{{ r.name }}</a
>
</ng-container>

View File

@ -151,6 +151,7 @@
</div>
<!-- Add new custom field -->
<a
bitLink
href="#"
appStopClick
(click)="addField()"

View File

@ -385,7 +385,7 @@
href="https://bitwarden.com/help/uri-match-detection/"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutMatchDetection' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
@ -418,6 +418,7 @@
</ng-container>
<a
href="#"
bitLink
appStopClick
(click)="addUri()"
class="d-inline-block mb-3"
@ -923,7 +924,7 @@
</div>
<div *ngIf="hasPasswordHistory">
<b class="font-weight-semibold">{{ "passwordHistory" | i18n }}:</b>
<a href="#" appStopClick (click)="viewHistory()" title="{{ 'view' | i18n }}">
<a href="#" bitLink appStopClick (click)="viewHistory()" title="{{ 'view' | i18n }}">
{{ cipher.passwordHistory.length }}
</a>
</div>
@ -953,7 +954,7 @@
<a
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutMasterPasswordReprompt' | i18n }}"
href="https://bitwarden.com/help/managing-items/#protect-individual-items"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>

View File

@ -10,7 +10,7 @@
href="https://bitwarden.com/help/searching-vault/"
target="_blank"
rel="noreferrer"
appA11yTitle="{{ 'learnMore' | i18n }}"
appA11yTitle="{{ 'learnMoreAboutSearchingYourVault' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>

View File

@ -9029,6 +9029,48 @@
"purchasedSeatsRemoved": {
"message": "purchased seats removed"
},
"learnMoreAboutEmergencyAccess": {
"message":"Learn more about emergency access"
},
"learnMoreAboutMatchDetection": {
"message": "Learn more about match detection"
},
"learnMoreAboutMasterPasswordReprompt": {
"message": "Learn more about master password re-prompt"
},
"learnMoreAboutSearchingYourVault": {
"message": "Learn more about searching your vault"
},
"learnMoreAboutYourAccountFingerprintPhrase": {
"message": "Learn about your account fingerprint phrase"
},
"impactOfRotatingYourEncryptionKey": {
"message": "Impact of rotating your encryption key"
},
"learnMoreAboutEncryptionAlgorithms": {
"message": "Learn more about encryption algorithms"
},
"learnMoreAboutKDFIterations": {
"message": "Learn more about KDF iterations"
},
"learnMoreAboutLocalization": {
"message": "Learn more about localization"
},
"learnMoreAboutWebsiteIcons": {
"message": "Learn more about using website icons"
},
"learnMoreAboutUserAccess": {
"message": "Learn more about user access"
},
"learnMoreAboutMemberRoles": {
"message": "Learn more about member roles and permissions"
},
"whatIsACvvNumber": {
"message": "What is a CVV number?"
},
"learnMoreAboutApi": {
"message": "Learn more about Bitwarden's API"
},
"fileSends": {
"message": "File Sends"
},

View File

@ -1,8 +1,12 @@
<bit-callout type="warning">
{{ "experimentalFeature" | i18n }}
<a href="https://bitwarden.com/help/auto-fill-browser/" target="_blank" rel="noreferrer">{{
"learnMoreAboutAutofill" | i18n
}}</a>
<a
bitLink
href="https://bitwarden.com/help/auto-fill-browser/"
target="_blank"
rel="noreferrer"
>{{ "learnMoreAboutAutofill" | i18n }}</a
>
</bit-callout>
<bit-form-control>

View File

@ -13,7 +13,7 @@
<form [formGroup]="ssoConfigForm" [bitSubmit]="submit" *ngIf="!loading">
<p>
{{ "ssoPolicyHelpStart" | i18n }}
<a routerLink="../policies">{{ "ssoPolicyHelpAnchor" | i18n }}</a>
<a bitLink routerLink="../policies">{{ "ssoPolicyHelpAnchor" | i18n }}</a>
{{ "ssoPolicyHelpEnd" | i18n }}
<br />
</p>
@ -31,7 +31,7 @@
<input bitInput type="text" formControlName="ssoIdentifier" />
<bit-hint>
{{ "ssoIdentifierHintPartOne" | i18n }}
<a routerLink="../domain-verification">{{ "domainVerification" | i18n }}</a>
<a bitLink routerLink="../domain-verification">{{ "domainVerification" | i18n }}</a>
</bit-hint>
</bit-form-field>
@ -70,7 +70,9 @@
</bit-label>
<bit-hint>
{{ "memberDecryptionKeyConnectorDescStart" | i18n }}
<a routerLink="../policies">{{ "memberDecryptionKeyConnectorDescLink" | i18n }}</a>
<a bitLink routerLink="../policies">{{
"memberDecryptionKeyConnectorDescLink" | i18n
}}</a>
{{ "memberDecryptionKeyConnectorDescEnd" | i18n }}
</bit-hint>
</bit-radio-button>
@ -85,15 +87,15 @@
</bit-label>
<bit-hint>
{{ "memberDecryptionOptionTdeDescriptionPartOne" | i18n }}
<a routerLink="../policies">{{
<a bitLink routerLink="../policies">{{
"memberDecryptionOptionTdeDescriptionLinkOne" | i18n
}}</a>
{{ "memberDecryptionOptionTdeDescriptionPartTwo" | i18n }}
<a routerLink="../policies">{{
<a bitLink routerLink="../policies">{{
"memberDecryptionOptionTdeDescriptionLinkTwo" | i18n
}}</a>
{{ "memberDecryptionOptionTdeDescriptionPartThree" | i18n }}
<a routerLink="../policies">{{
<a bitLink routerLink="../policies">{{
"memberDecryptionOptionTdeDescriptionLinkThree" | i18n
}}</a>
{{ "memberDecryptionOptionTdeDescriptionPartFour" | i18n }}