[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
2025-01-02 18:17:46 +01:00 · 2023-12-21 10:54:54 -05:00 · 2023-12-21 10:54:54 -05:00 · 07d224d6bc
commit 07d224d6bc
parent 6fe82e95e7
12 changed files with 66 additions and 22 deletions
--- a/apps/browser/src/vault/popup/components/vault/add-edit.component.html
+++ b/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>
--- a/apps/browser/src/vault/popup/components/vault/add-edit.component.ts
+++ b/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,
    );
  }

--- a/apps/browser/src/vault/popup/components/vault/view.component.html
+++ b/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 }}
-              {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
+              {{ fido2CredentialCreationDateValue }}
            </div>
          </div>
        </div>
--- a/apps/browser/src/vault/popup/components/vault/view.component.ts
+++ b/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,
    );
  }

--- a/apps/desktop/src/vault/app/vault/add-edit.component.html
+++ b/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>
--- a/apps/desktop/src/vault/app/vault/add-edit.component.ts
+++ b/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,
    );
  }

--- a/apps/desktop/src/vault/app/vault/view.component.html
+++ b/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"
--- a/apps/desktop/src/vault/app/vault/view.component.ts
+++ b/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() {
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.html
+++ b/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"
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.ts
+++ b/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,
    );
  }

--- a/libs/angular/src/vault/components/add-edit.component.ts
+++ b/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 },
--- a/libs/angular/src/vault/components/view.component.ts
+++ b/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() {