[PM-4239] When viewing an item with a passkey, passkey is not announced by screenreader (#7154)

* Made passkey field focusable

* Made passkey field focusableand accessibilty possible for screenreaders in announcing the field

apps/desktop/src/vault/app/vault/add-edit.component.html

@@ -119,10 +119,11 @@
               class="box-content-row text-muted"
               *ngIf="cipher.login.hasFido2Credentials && !cloneMode"
               appBoxRow
+              tabindex="0"
+              attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
             >
               <span class="row-label">{{ "typePasskey" | i18n }}</span>
-              {{ "dateCreated" | i18n }}
-              {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
+              {{ fido2CredentialCreationDateValue }}
             </div>
 
             <div class="box-content-row" appBoxRow>

apps/desktop/src/vault/app/vault/add-edit.component.ts

@@ -1,3 +1,4 @@
+import { DatePipe } from "@angular/common";
 import { Component, NgZone, OnChanges, OnDestroy, ViewChild } from "@angular/core";
 import { NgForm } from "@angular/forms";
 
@@ -46,6 +47,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnChanges,
     organizationService: OrganizationService,
     sendApiService: SendApiService,
     dialogService: DialogService,
+    datePipe: DatePipe,
   ) {
     super(
       cipherService,
@@ -63,6 +65,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnChanges,
       organizationService,
       sendApiService,
       dialogService,
+      datePipe,
     );
   }
 

apps/desktop/src/vault/app/vault/view.component.html

@@ -119,10 +119,14 @@
             </div>
           </div>
           <!--Passkey-->
-          <div class="box-content-row text-muted" *ngIf="cipher.login.hasFido2Credentials">
+          <div
+            class="box-content-row text-muted"
+            *ngIf="cipher.login.hasFido2Credentials"
+            tabindex="0"
+            attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
+          >
             <span class="row-label">{{ "typePasskey" | i18n }}</span>
-            {{ "dateCreated" | i18n }}
-            {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
+            {{ fido2CredentialCreationDateValue }}
           </div>
           <div
             class="box-content-row box-content-row-flex totp"

apps/desktop/src/vault/app/vault/view.component.ts

@@ -1,3 +1,4 @@
+import { DatePipe } from "@angular/common";
 import {
   ChangeDetectorRef,
   Component,
@@ -56,6 +57,7 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
     stateService: StateService,
     fileDownloadService: FileDownloadService,
     dialogService: DialogService,
+    datePipe: DatePipe,
   ) {
     super(
       cipherService,
@@ -77,6 +79,7 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
       stateService,
       fileDownloadService,
       dialogService,
+      datePipe,
     );
   }
   ngOnInit() {