From 876fdc272da16625e832039ba7f280e5cfe8c4de Mon Sep 17 00:00:00 2001
From: Sean Wu <seanwuapps@gmail.com>
Date: Sat, 30 Dec 2023 17:42:37 +1100
Subject: [PATCH] fix(go-button): pass through aria attributes to native
 element

---
 .../src/components/go-button/go-button.tsx    | 25 ++++---------------
 packages/core/src/utils/helper.ts             |  5 ++--
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/components/go-button/go-button.tsx b/packages/core/src/components/go-button/go-button.tsx
index 7bb0659..2f057af 100644
--- a/packages/core/src/components/go-button/go-button.tsx
+++ b/packages/core/src/components/go-button/go-button.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop, Element, Host, Watch, State, Build } from '@stencil/core';
+import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';
 import { Breakpoints, ColorVariants } from '../../interfaces';
 import { $attrs, warning } from '../../utils/helper';
 
@@ -13,7 +13,7 @@ import { $attrs, warning } from '../../utils/helper';
   shadow: false,
 })
 export class GoButton {
-  @Element() root: HTMLElement;
+  @Element() el: HTMLElement;
 
   /**
    * Html type of the button
@@ -97,8 +97,8 @@ export class GoButton {
   componentWillLoad() {
     // a11y check
     if (this.icon) {
-      if (!this.root.hasAttribute('aria-label') && !this.root.hasAttribute('aria-labelledby')) {
-        warning(`go-button with icon must have either aria-label or aria-labelledby attribute`, this.root);
+      if (!this.el.hasAttribute('aria-label') && !this.el.hasAttribute('aria-labelledby')) {
+        warning(`go-button with icon must have either aria-label or aria-labelledby attribute`, this.el);
       }
     }
 
@@ -106,25 +106,9 @@ export class GoButton {
       this.handleBlockChange(this.block);
     }
     this.updateInnerButtonAttributes();
-
-    if (Build.isBrowser) {
-      // watch attribute change in case they're modified by after initial load
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === 'attributes') {
-            this.updateInnerButtonAttributes();
-          }
-        });
-      });
-      observer.observe(this.root, {
-        attributes: true,
-      });
-    }
   }
-
   updateInnerButtonAttributes() {
     this.inheritedAttributes = {
-      ...this.inheritedAttributes,
       ...$attrs.bind(this)(true),
     };
   }
@@ -147,6 +131,7 @@ export class GoButton {
       loading,
       loadingAnouncement,
     } = this;
+    console.log(inheritedAttributes);
     const Tag = href ? 'a' : 'button';
     const rootClasses = `${variant} ${blockClasses}`;
     return (
diff --git a/packages/core/src/utils/helper.ts b/packages/core/src/utils/helper.ts
index 863b502..ac4e21e 100644
--- a/packages/core/src/utils/helper.ts
+++ b/packages/core/src/utils/helper.ts
@@ -51,10 +51,9 @@ export function inheritComponentAttrs(component, excludes: string[] = [], remove
  * get attributes that are not defined in a components props, without removing them from the host element
  * @returns list of attributes inherited from the host element
  */
-export function $attrs(removeAttrs = false) {
+export function $attrs(removeAttrs = false, elPropName = 'el') {
   const propNames = Object.keys(Object.getPrototypeOf(this));
-
-  return inheritAttributes(this.el, ['class', 'style', 'id', ...propNames], removeAttrs);
+  return inheritAttributes(this[elPropName], ['class', 'style', 'id', 'data-testid', ...propNames], removeAttrs);
 }
 
 /**