[PM-5884] Allow deletion of passkey from edit view - clients (#8500)

* add remove button for passkeys during edit

* added live region to announce when a passkey is removed

* removed announce passkey removed by SR

* removed unused variable

apps/desktop/src/locales/en/messages.json

@@ -2696,5 +2696,11 @@
   },
   "enableHardwareAccelerationRestart": {
     "message": "Enable hardware acceleration and restart"
+  },
+  "removePasskey": {
+    "message": "Remove passkey"
+  },
+  "passkeyRemoved": {
+    "message": "Passkey removed"
   }
 }

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

@@ -116,14 +116,25 @@
             </div>
             <!--Passkey-->
             <div
-              class="box-content-row text-muted"
+              class="box-content-row box-content-row-multi text-muted"
               *ngIf="cipher.login.hasFido2Credentials && !cloneMode"
               appBoxRow
               tabindex="0"
               attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
             >
-              <span class="row-label">{{ "typePasskey" | i18n }}</span>
-              {{ fido2CredentialCreationDateValue }}
+              <button
+                type="button"
+                appStopClick
+                (click)="removePasskey()"
+                appA11yTitle="{{ 'removePasskey' | i18n }}"
+                [disabled]="!cipher.edit && editMode"
+              >
+                <i class="bwi bwi-fw bwi-minus-circle bwi-lg" aria-hidden="true"></i>
+              </button>
+              <div class="row-main">
+                <span class="row-label">{{ "typePasskey" | i18n }}</span>
+                {{ fido2CredentialCreationDateValue }}
+              </div>
             </div>
 
             <div class="box-content-row" appBoxRow>