[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>
2024-09-20 09:04:48 -05:00 · 2024-09-20 09:04:48 -05:00 · c276d5dfa5
parent 8f05581ba0
commit c276d5dfa5
26 changed files with 112 additions and 44 deletions
--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.html
+++ b/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"
              >
--- a/apps/web/src/app/admin-console/organizations/settings/account.component.html
+++ b/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()">
--- a/apps/web/src/app/auth/login/login-via-webauthn/login-via-webauthn.component.html
+++ b/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>
--- a/apps/web/src/app/auth/login/login.component.html
+++ b/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:  
-           (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>
--- a/apps/web/src/app/auth/register-form/register-form.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/change-password.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
+++ b/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"
          >
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/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 }}">{{
--- a/apps/web/src/app/auth/settings/security/change-kdf/change-kdf.component.html
+++ b/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>
--- a/apps/web/src/app/auth/settings/two-factor-setup.component.html
+++ b/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 />
--- a/apps/web/src/app/auth/settings/two-factor-webauthn.component.html
+++ b/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>
--- a/apps/web/src/app/billing/shared/billing-history.component.html
+++ b/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>
--- a/apps/web/src/app/billing/shared/payment/payment.component.html
+++ b/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>
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/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>
--- a/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html
+++ b/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>
--- a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
+++ b/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>
--- a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
+++ b/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">
--- a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
+++ b/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>
--- a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
+++ b/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 }}">{{
-                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"
--- a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
+++ b/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>
--- a/apps/web/src/app/vault/individual-vault/add-edit-custom-fields.component.html
+++ b/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()"
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.html
+++ b/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>
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
+++ b/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>
--- a/apps/web/src/locales/en/messages.json
+++ b/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"
  },
--- a/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html
+++ b/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">{{
-    "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>
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
+++ b/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 }}