[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>

apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html

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

apps/web/src/app/admin-console/organizations/settings/account.component.html

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

apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.html

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

apps/web/src/app/auth/login/login.component.html

@@ -48,14 +48,15 @@
 
     <p class="tw-m-0 tw-text-sm">
       {{ "newAroundHere" | i18n }}
-      <!-- Two notes:  
+      <!-- Two notes:
-           (1) We check the value and validity of email so we don't send an invalid email to autofill 
+           (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 
+           (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 
+           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. 
+           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>

apps/web/src/app/auth/register-form/register-form.component.html

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

apps/web/src/app/auth/settings/change-password.component.html

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

apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html

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

apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html

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

apps/web/src/app/auth/settings/security/change-kdf/change-kdf.component.html

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

apps/web/src/app/auth/settings/two-factor-setup.component.html

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

apps/web/src/app/auth/settings/two-factor-webauthn.component.html

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

apps/web/src/app/billing/shared/billing-history.component.html

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

apps/web/src/app/billing/shared/payment/payment.component.html

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

apps/web/src/app/settings/preferences.component.html

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

apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html

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

apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html

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

apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html

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

apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html

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

apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html

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

apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html

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

apps/web/src/app/vault/individual-vault/add-edit-custom-fields.component.html

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

apps/web/src/app/vault/individual-vault/add-edit.component.html

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

apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html

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

apps/web/src/locales/en/messages.json

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

bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html

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

bitwarden_license/bit-web/src/app/auth/sso/sso.component.html

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