From d196df0443ec02f88dfa6f9d50031cba30cb6b88 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Thu, 30 Mar 2023 08:51:05 -0700
Subject: [PATCH] add disabled focusable click handling

---
 .../src/button/button.stories.ts              |  4 +--
 packages/web-components/src/button/button.ts  | 30 +++++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
index 867d8aaecdf4d2..1069c4c3debcee 100644
--- a/packages/web-components/src/button/button.stories.ts
+++ b/packages/web-components/src/button/button.stories.ts
@@ -14,9 +14,9 @@ const storyTemplate = html<ButtonStoryArgs>`
     shape="${x => x.shape}"
     size="${x => x.size}"
     ?disabled="${x => x.disabled}"
-    ?disabledFocusable="${x => x.disabledFocusable}"
+    ?disabled-focusable="${x => x.disabledFocusable}"
     ?icon-only="${x => x.iconOnly}"
-    ?icon="${x => x.icon}
+    ?icon="${x => x.icon}"
   >
     ${x => x.content}
   </fluent-button>
diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
index 6457978d2dcc7b..6032fa4d0f63cc 100644
--- a/packages/web-components/src/button/button.ts
+++ b/packages/web-components/src/button/button.ts
@@ -68,10 +68,36 @@ export class Button extends FASTButton {
   @attr({ attribute: 'disabled-focusable', mode: 'boolean' })
   public disabledFocusable?: boolean = false;
   protected disabledFocusableChanged(prev: boolean, next: boolean): void {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+
     if (this.disabledFocusable) {
-      ((this as unknown) as HTMLElement).setAttribute('aria-disabled', 'true');
+      this.ariaDisabled = true;
     } else {
-      ((this as unknown) as HTMLElement).removeAttribute('aria-disabled');
+      this.ariaDisabled = false;
+    }
+  }
+
+  /**
+   * Prevents disabledFocusable click events
+   */
+  private handleDisabledFocusableClick = (e: MouseEvent): void => {
+    if (e && this.disabledFocusable) {
+      e.stopImmediatePropagation();
+      return;
     }
+  };
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    ((this as unknown) as HTMLElement).addEventListener('click', this.handleDisabledFocusableClick);
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    ((this as unknown) as HTMLElement).removeEventListener('click', this.handleDisabledFocusableClick);
   }
 }