[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/browser/src/vault/popup/components/vault/add-edit.component.html

@@ -131,7 +131,12 @@
           </div>
 
           <!--Passkey-->
-          <div class="box" *ngIf="cipher.login.hasFido2Credentials && !cloneMode">
+          <div
+            class="box"
+            *ngIf="cipher.login.hasFido2Credentials && !cloneMode"
+            tabindex="0"
+            attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
+          >
             <div class="box-content">
               <div class="box-content-row text-muted">
                 <span class="row-label">{{ "typePasskey" | i18n }}</span>

apps/browser/src/vault/popup/components/vault/add-edit.component.ts

@@ -1,4 +1,4 @@
-import { Location } from "@angular/common";
+import { DatePipe, Location } from "@angular/common";
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
@@ -66,6 +66,7 @@ export class AddEditComponent extends BaseAddEditComponent {
     logService: LogService,
     sendApiService: SendApiService,
     dialogService: DialogService,
+    datePipe: DatePipe,
   ) {
     super(
       cipherService,
@@ -83,6 +84,7 @@ export class AddEditComponent extends BaseAddEditComponent {
       organizationService,
       sendApiService,
       dialogService,
+      datePipe,
     );
   }
 

apps/browser/src/vault/popup/components/vault/view.component.html

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

apps/browser/src/vault/popup/components/vault/view.component.ts

@@ -1,4 +1,4 @@
-import { Location } from "@angular/common";
+import { DatePipe, Location } from "@angular/common";
 import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subject, firstValueFrom, takeUntil } from "rxjs";
@@ -96,6 +96,7 @@ export class ViewComponent extends BaseViewComponent {
     logService: LogService,
     fileDownloadService: FileDownloadService,
     dialogService: DialogService,
+    datePipe: DatePipe,
   ) {
     super(
       cipherService,
@@ -117,6 +118,7 @@ export class ViewComponent extends BaseViewComponent {
       stateService,
       fileDownloadService,
       dialogService,
+      datePipe,
     );
   }
 

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 }}
+              {{ fido2CredentialCreationDateValue }}
-              {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
             </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 }}
+            {{ fido2CredentialCreationDateValue }}
-            {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
           </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() {

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

@@ -195,7 +195,13 @@
             <div class="row">
               <div class="col-6 form-group">
                 <label for="loginFido2credential">{{ "typePasskey" | i18n }}</label>
-                <div class="input-group">
+                <div
+                  class="input-group"
+                  tabindex="0"
+                  attr.aria-label="{{ 'typePasskey' | i18n }} {{
+                    fido2CredentialCreationDateValue
+                  }}"
+                >
                   <input
                     id="loginFido2credential"
                     class="form-control"

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

@@ -43,15 +43,6 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
   protected totpInterval: number;
   protected override componentName = "app-vault-add-edit";
 
-  get fido2CredentialCreationDateValue(): string {
-    const dateCreated = this.i18nService.t("dateCreated");
-    const creationDate = this.datePipe.transform(
-      this.cipher?.login?.fido2Credentials?.[0]?.creationDate,
-      "short",
-    );
-    return `${dateCreated} ${creationDate}`;
-  }
-
   constructor(
     cipherService: CipherService,
     folderService: FolderService,
@@ -70,7 +61,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
     passwordRepromptService: PasswordRepromptService,
     sendApiService: SendApiService,
     dialogService: DialogService,
-    private datePipe: DatePipe,
+    datePipe: DatePipe,
   ) {
     super(
       cipherService,
@@ -88,6 +79,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
       organizationService,
       sendApiService,
       dialogService,
+      datePipe,
     );
   }
 

libs/angular/src/vault/components/add-edit.component.ts

@@ -1,3 +1,4 @@
+import { DatePipe } from "@angular/common";
 import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
 import { Observable, Subject, takeUntil, concatMap } from "rxjs";
 
@@ -85,6 +86,15 @@ export class AddEditComponent implements OnInit, OnDestroy {
   private personalOwnershipPolicyAppliesToActiveUser: boolean;
   private previousCipherId: string;
 
+  get fido2CredentialCreationDateValue(): string {
+    const dateCreated = this.i18nService.t("dateCreated");
+    const creationDate = this.datePipe.transform(
+      this.cipher?.login?.fido2Credentials?.[0]?.creationDate,
+      "short",
+    );
+    return `${dateCreated} ${creationDate}`;
+  }
+
   constructor(
     protected cipherService: CipherService,
     protected folderService: FolderService,
@@ -101,6 +111,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     protected sendApiService: SendApiService,
     protected dialogService: DialogService,
+    protected datePipe: DatePipe,
   ) {
     this.typeOptions = [
       { name: i18nService.t("typeLogin"), value: CipherType.Login },

libs/angular/src/vault/components/view.component.ts

@@ -1,3 +1,4 @@
+import { DatePipe } from "@angular/common";
 import {
   ChangeDetectorRef,
   Directive,
@@ -68,6 +69,15 @@ export class ViewComponent implements OnDestroy, OnInit {
   private previousCipherId: string;
   private passwordReprompted = false;
 
+  get fido2CredentialCreationDateValue(): string {
+    const dateCreated = this.i18nService.t("dateCreated");
+    const creationDate = this.datePipe.transform(
+      this.cipher?.login?.fido2Credentials?.[0]?.creationDate,
+      "short",
+    );
+    return `${dateCreated} ${creationDate}`;
+  }
+
   constructor(
     protected cipherService: CipherService,
     protected folderService: FolderService,
@@ -88,6 +98,7 @@ export class ViewComponent implements OnDestroy, OnInit {
     protected stateService: StateService,
     protected fileDownloadService: FileDownloadService,
     protected dialogService: DialogService,
+    protected datePipe: DatePipe,
   ) {}
 
   ngOnInit() {