Refactor Button component to prevent duplicate data-testid attributes on host and inner button

Author: arhtudormorar

src/components/visual/button/button.tsx

@@ -1,5 +1,5 @@
 import type { EventEmitter } from '@stencil/core';
-import { Component, Element, Event, h, Prop } from '@stencil/core';
+import { Component, Event, h, Prop } from '@stencil/core';
 import { Button as ButtonComponent } from 'common/Button/Button';
 
 import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types';
@@ -10,29 +10,16 @@ import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/b
   shadow: true,
 })
 export class Button {
-  @Element() hostElement!: HTMLElement;
-
   @Event() buttonClick: EventEmitter<MouseEvent>;
 
   @Prop() class?: string = '';
-  @Prop({ attribute: 'data-testid' }) dataTestId?: string = '';
+  // Accept `data-testid` without reflecting it on the host element,
+  // so only the inner `<button>` ends up with this attribute.
+  @Prop({ attribute: 'data-testid', reflect: false }) dataTestId?: string = '';
   @Prop() disabled?: boolean = false;
   @Prop() size?: `${ButtonSizeEnum}` = 'large';
   @Prop() variant?: `${ButtonVariantEnum}` = 'primary';
 
-  /**
-   * Stencil reflects `data-testid` to the host element based on the Prop decorator above.
-   * That causes two DOM nodes with the same `data-testid`: the `<mvx-button>` host and
-   * the inner `<button>`, which breaks Playwright strict mode. We keep using the
-   * attribute to populate `dataTestId`, but remove it from the host after render so that
-   * only the inner `<button>` keeps the `data-testid`.
-   */
-  componentDidRender() {
-    if (this.hostElement.hasAttribute('data-testid')) {
-      this.hostElement.removeAttribute('data-testid');
-    }
-  }
-
   private handleClick = (event: MouseEvent) => {
     this.buttonClick.emit(event);
   };