[PM-1176] Hovering over the Learn More about auto-fill link in the … (#5300)

* [PM-1176] Hovering over the `Learn More about auto-fill` link in the browser extension does not change the cursor

* [PM-1176] Modifying how the anchor element is formatted by prettier

* [PM-1176] Adding translation methodology to the aria-label "opens in a new window" value

apps/browser/src/_locales/en/messages.json

@@ -2202,5 +2202,8 @@
         "example": "CTRL+Shift+L"
       }
     }
+  },
+  "opensInANewWindow": {
+    "message": "Opens in a new window"
   }
 }

apps/browser/src/popup/settings/autofill.component.html

@@ -28,7 +28,17 @@
       {{ "enableAutoFillOnPageLoadDesc" | i18n }}
       <b>{{ "warning" | i18n }}</b
       >: {{ "experimentalFeature" | i18n }}
-      <a (click)="AboutAutofill()">{{ "learnMoreAboutAutofill" | i18n }}</a>
+      <a
+        href="https://bitwarden.com/help/auto-fill-browser/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {{ "learnMoreAboutAutofill" | i18n }}.
+        <i
+          [attr.aria-label]="'opensInANewWindow' | i18n"
+          class="bwi bwi-external-link bwi-sm bwi-fw"
+        ></i>
+      </a>
     </div>
   </div>
   <div class="box">

apps/browser/src/popup/settings/autofill.component.ts

@@ -63,10 +63,6 @@ export class AutofillComponent implements OnInit {
     await this.stateService.setDefaultUriMatch(this.defaultUriMatch);
   }
 
-  AboutAutofill() {
-    BrowserApi.createNewTab("https://bitwarden.com/help/auto-fill-browser/");
-  }
-
   private async setAutofillKeyboardHelperText(command: string) {
     if (command) {
       this.autofillKeyboardHelperText = this.i18nService.t("autofillShortcutText", command);