[PM-7683] Fix dynamic item defects (#9575)

* [PM-8639] Add data-testid attribute for test automation

* [PM-8669] Add autofill aria label

* [PM-8674] Show autofill menu options for card/identities when not in the autofill suggestion list

* [PM-8635] Hide menu items when copy cipher field directive is disabled

* [PM-8636] Disable copy menu dropdown when no items available to copy

* [CL-309] Add title override to bitBadge

* [PM-8669] Update menu-item directive disabled input

* [PM-7683] Fix race condition for remainingCiphers$

* [PM-7683] Use strict equality check

libs/components/src/badge/badge.directive.ts

@@ -51,10 +51,18 @@ export class BadgeDirective implements FocusableElement {
       .concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
       .concat(this.truncate ? ["tw-truncate", this.maxWidthClass] : []);
   }
-  @HostBinding("attr.title") get title() {
+  @HostBinding("attr.title") get titleAttr() {
+    if (this.title !== undefined) {
+      return this.title;
+    }
     return this.truncate ? this.el.nativeElement.textContent.trim() : null;
   }
 
+  /**
+   * Optional override for the automatic badge title when truncating.
+   */
+  @Input() title?: string;
+
   /**
    * Variant, sets the background color of the badge.
    */

libs/components/src/menu/menu-item.directive.ts

@@ -1,5 +1,6 @@
 import { FocusableOption } from "@angular/cdk/a11y";
-import { Component, ElementRef, HostBinding } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 @Component({
   selector: "[bitMenuItem]",
@@ -32,6 +33,11 @@ export class MenuItemDirective implements FocusableOption {
   ];
   @HostBinding("attr.role") role = "menuitem";
   @HostBinding("tabIndex") tabIndex = "-1";
+  @HostBinding("attr.disabled") get disabledAttr() {
+    return this.disabled || null; // native disabled attr must be null when false
+  }
+
+  @Input({ transform: coerceBooleanProperty }) disabled?: boolean = false;
 
   constructor(private elementRef: ElementRef) {}
 

libs/vault/src/components/copy-cipher-field.directive.ts

@@ -1,6 +1,7 @@
-import { Directive, HostBinding, HostListener, Input, OnChanges } from "@angular/core";
+import { Directive, HostBinding, HostListener, Input, OnChanges, Optional } from "@angular/core";
 
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { MenuItemDirective } from "@bitwarden/components";
 import { CopyAction, CopyCipherFieldService } from "@bitwarden/vault";
 
 /**
@@ -9,6 +10,8 @@ import { CopyAction, CopyCipherFieldService } from "@bitwarden/vault";
  *
  * Automatically disables the host element if the field to copy is not available or null.
  *
+ * If the host element is a menu item, it will be hidden when disabled.
+ *
  * @example
  * ```html
  * <button appCopyField="username" [cipher]="cipher">Copy Username</button>
@@ -27,11 +30,23 @@ export class CopyCipherFieldDirective implements OnChanges {
 
   @Input({ required: true }) cipher: CipherView;
 
-  constructor(private copyCipherFieldService: CopyCipherFieldService) {}
+  constructor(
+    private copyCipherFieldService: CopyCipherFieldService,
+    @Optional() private menuItemDirective?: MenuItemDirective,
+  ) {}
 
   @HostBinding("attr.disabled")
   protected disabled: boolean | null = null;
 
+  /**
+   * Hide the element if it is disabled and is a menu item.
+   * @private
+   */
+  @HostBinding("class.tw-hidden")
+  private get hidden() {
+    return this.disabled && this.menuItemDirective;
+  }
+
   @HostListener("click")
   async copy() {
     const value = this.getValueToCopy();
@@ -49,6 +64,11 @@ export class CopyCipherFieldDirective implements OnChanges {
       (this.action === "totp" && !(await this.copyCipherFieldService.totpAllowed(this.cipher)))
         ? true
         : null;
+
+    // If the directive is used on a menu item, update the menu item to prevent keyboard navigation
+    if (this.menuItemDirective) {
+      this.menuItemDirective.disabled = this.disabled;
+    }
   }
 
   private getValueToCopy() {