From f017edb088228cf9ecba918eb6c35ba77cd7b9be Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Tue, 13 Aug 2024 10:15:14 -0700
Subject: [PATCH] [PM-10651] Use bitLink instead of icon button and add a11y
 title (#10483)

---
 apps/browser/src/_locales/en/messages.json                | 3 +++
 apps/web/src/locales/en/messages.json                     | 3 +++
 .../login-details-section.component.html                  | 8 +++++---
 .../login-details-section.component.ts                    | 2 ++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 86e8c6b84b..3ee0d1b73d 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -690,6 +690,9 @@
   "totpHelperWithCapture": {
     "message": "Bitwarden can store and fill 2-step verification codes. Select the camera icon to take a screenshot of this website's authenticator QR code, or copy and paste the key into this field."
   },
+  "learnMoreAboutAuthenticators": {
+    "message": "Learn more about authenticators"
+  },
   "copyTOTP": {
     "message": "Copy Authenticator key (TOTP)"
   },
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 0cf671980c..5733b6cb02 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -212,6 +212,9 @@
   "totpHelperWithCapture": {
     "message": "Bitwarden can store and fill 2-step verification codes. Select the camera icon to take a screenshot of this website's authenticator QR code, or copy and paste the key into this field."
   },
+  "learnMoreAboutAuthenticators": {
+    "message": "Learn more about authenticators"
+  },
   "folder": {
     "message": "Folder"
   },
diff --git a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
index 0ba2338afa..97c226eab9 100644
--- a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
+++ b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
@@ -88,11 +88,13 @@
       <bit-label>
         {{ "authenticatorKey" | i18n }}
         <button
-          bitIconButton="bwi-question-circle"
+          bitLink
           type="button"
-          size="small"
           [bitPopoverTriggerFor]="totpPopover"
-        ></button>
+          [appA11yTitle]="'learnMoreAboutAuthenticators' | i18n"
+        >
+          <i class="bwi bwi-sm bwi-question-circle" aria-hidden="true"></i>
+        </button>
         <bit-popover #totpPopover [title]="'totpHelperTitle' | i18n">
           <p>{{ (canCaptureTotp ? "totpHelperWithCapture" : "totpHelper") | i18n }}</p>
         </bit-popover>
diff --git a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.ts b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.ts
index 91c8ad258c..020c2d18bd 100644
--- a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.ts
+++ b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.ts
@@ -14,6 +14,7 @@ import {
   CardComponent,
   FormFieldModule,
   IconButtonModule,
+  LinkModule,
   PopoverModule,
   SectionComponent,
   SectionHeaderComponent,
@@ -43,6 +44,7 @@ import { AutofillOptionsComponent } from "../autofill-options/autofill-options.c
     NgIf,
     PopoverModule,
     AutofillOptionsComponent,
+    LinkModule,
   ],
 })
 export class LoginDetailsSectionComponent implements OnInit {